SDK를 애플리케이션 측에 통합

SDK 설치 및 초기화 후:

1. 결제 수단 ID와 리디렉션 URL을 지정하여 결제 UI를 초기화:
   • headlessCheckout.form.init 메서드는 결제 UI와의 추가 상호 작용에 사용되는 개체를 반환합니다.
   • 리디렉션 URL은 예를 들어 3D 보안 인증을 완료한 후 사용자를 리디렉션하는 데 사용됩니다.

await headlessCheckout.form.init({
  paymentMethodId: ID,
  returnUrl: 'returnUrl',
});

2. 결제 UI의 HTML 마크업에 다음 구성 요소 추가:
   • 필수 구성 요소:
     • psdk-legal - 법률 문서에 대한 정보 표시.
     • psdk-total - 총 구매 금액 표시.
   • 결제 양식 구성 요소. 기본 제공 psdk-payment-form 구성 요소를 사용하거나 사용 준비 구성 요소를 사용하여 결제 UI 요소를 수동으로 생성할 수 있습니다.
   • 결제 버튼 구성 요소 - psdk-submit-button.

<psdk-legal></psdk-legal>
<psdk-total></psdk-total>


<psdk-payment-form></psdk-payment-form>
<psdk-submit-button text="Pay"></psdk-submit-button>

3. 결제 상태 변경에 대한 check_status 이벤트 처리를 추가합니다.

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    case 'check_status': {
      showStatus = true;
    }
  }
});

4. 결제 UI의 HTML 마크업에 psdk-status 구성 요소를 추가하여 결제 상태를 표시합니다.

@if (showStatus) {
  <psdk-status></psdk-status>
}