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.

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

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.

1<psdk-legal></psdk-legal>
2<psdk-total></psdk-total>
3
4
5<psdk-payment-form></psdk-payment-form>
6<psdk-submit-button text="Pay"></psdk-submit-button>

3. Add the handling of the check_status event for the payment status change.

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    case 'check_status': {
4      showStatus = true;
5    }
6  }
7});

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

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