アプリケーション側でSDKを統合する

SDKをインストールして初期化した後：

1. 決済方法IDとリダイレクトURLを指定して、決済UIを初期化します：
   • headlessCheckout.form.initメソッドは、支払いUIとのさらなる対話式操作に使用されるオブジェクトを返します。
   • リダイレクトURLは、たとえば、3-Dセキュア検証を完了した後に、ユーザーをリダイレクトするために使用されます。

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>
}