20210611 - 페이팔 결제 모듈과 연동 PayPal Integration - 4. 결제 완료된 주문 확인

테스트 페이지 구성은 템플릿 중 마법사 Wizard 템플릿을 사용하였고 총 4 단계로 구성하였음.

1. 아이템 확인 및 장바구니 넣기

2. 장바구니 확인 및 수량 조정

3. 페이팔 결제 연동

4. 결제 완료된 주문 확인


4. 결제 완료된 주문 확인



1) 주문 정보 확인

페이지 로드 시 주문 번호와 PayPal API를 통해 결제 완료된 건을 조회하여 내용 확인

Dynamic Action - Execute Server-side Code


  apex_web_service.g_request_headers.delete();
  apex_web_service.g_request_headers(1).name  := 'authorization';
  apex_web_service.g_request_headers(1).value := 'Bearer '||l_token;
  apex_web_service.g_request_headers(2).name  := 'content-type';
  apex_web_service.g_request_headers(2).value := 'application/json';
  
  l_idcs_response_clob := apex_web_service.make_rest_request
  ( p_url         => 'https://api-m.sandbox.paypal.com/v2/payments/captures/'||ls_captureid,
    p_http_method => 'GET'
  );


2) 라벨과 값에 대한 포맷 변경

P6_ORDERID

Type : Display Only

Label : <span style="color:blue;font-weight:bold;">ORDERID</span>

Advanced - Custom Attributes : style="color:black;font-weight:bold;"


P6_TTLAMT

Type : Display Only

Label : <span style="color:blue;font-weight:bold;">TOTAL PAID AMOUNT</span>

Advanced - Custom Attributes : style="color:black;font-weight:bold;"


금액에 대한 포맷을 적용하기 위해서 추가 javascript 설정

Dynamic Action

Event : Change

Selection Type : Item(s)

Item(s) : P6_TTLAMT

Action : Set Value

Settings - Set Type : JavaScript Expression

JavaScript Expression : accounting.formatMoney(apex.item("P6_TTLAMT").getValue());

Suppress Change Event : YES

Affected Elements - Selection Type : Item(s)

Item(s) : P6_TTLAMT

Fire on Initialization : NO


** 전체 페이지에 금액 포맷 변경 Javascript 를 활용하기 위해 Application 환경 설정



3) 데모 완료 후 데이터 리셋과 첫 페이지로 이동

Name : Reset and Return to Page 3

Point : After Submit

Behavior - Type : Page or URL (Redirect)

Target : Page 3

When Button Pressed : FINISH

Type : Function Body

Language : PL/SQL

PL/SQL Function Body : 

begin

   DELETE FROM DM_PAYPALD_CART WHERE OD = :P6_ORDERID;

   RETURN TRUE;

end;





참고

http://openexchangerates.github.io/accounting.js/#download



댓글 없음:

댓글 쓰기

20250202 - IG 다운로드 버튼 바로 보이기

JS initialization Code : function (config) {     var $ = apex.jQuery,         toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),  ...