Integrate SDK on application side

After installing and initializing SDK:

1. Initialize the payment UI specifying the payment method ID and redirect URL:
   • The headlessCheckout.form.init method returns an object used for further interaction with the payment UI.
   • The redirect URL is used to redirect the user, for example, after completing the 3-D Secure verification.

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

2. Add the following components to the HTML markup of the payment UI:
   • Mandatory components:
     • psdk-legal — to display information about legal documents.
     • psdk-total — to display the total purchase amount.
   • Payment form components. You can either use the built-in psdk-payment-form component or manually create payment UI elements using the ready-to-use components.
   • The payment button component — 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. Add the handling of the check_status event for the payment status change.

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

4. Add the psdk-status component to the HTML markup of the payment UI to display a payment status.

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