Apple Pay

Keep in mind:

• Payment via Apple Pay is only available on supported devices.
• The SDK only verifies that a payment can be made on the user’‎s device and sends all required data. The payment is then processed in an external tab: https://secure.xsolla.com/paystation4/payment/external-pages/apple-pay.
• For convenience, the psdk-apple-pay component is included in the psdk-submit-button component.

Implementation sample

Refer to the detailed sample on GitHub.

How to set it up

To use Headless checkout to accept payments via Apple Pay:

1. Add the handling of the show_fields event for displaying additional fields.

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    case 'show_fields':
4      this.handleShowFieldsAction(nextAction);
5  }
6});

2. Add the psdk-payment-form component to the HTML markup of the payment UI to display additional fields.

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

One-click payment

One-click payment allows users to pay with Apple Pay, a familiar and secure native payment method, on supported devices. To configure one-click payment:

1. Create a request to enable this option. To do so:

   a. Open your Publisher Account and go to the Support Hub section.

   b. Click Submit request.

   

   c. In the window that opens, fill in the fields:

   • Summary. For example, Apple Pay one-click payment setup.
   • Description. Specify the domain used for opening the payment UI, e.g., amazing.store.com.
   • Project ID. Select a project ID from the drop-down list. If you want to configure the one-click payment option for multiple projects, specify their IDs in the Description field.

   d. Click Send.

2. Wait for your domain association file. This step is performed by Xsolla:
   1. Xsolla registers your domain with Apple.
   2. Xsolla receives the domain association file from Apple.
   3. Xsolla emails you the domain association file and provides instructions on where to upload it.

3. Update the SDK initialization script as shown below:

1const config: InitialOptions = {
2  isWebview: false,
3  theme: 'default',
4  language: parameters.language,
5  topLevelDomain: 'amazing.store.com',
6  isApplePayInstantFlowEnabled: true
7};
8
9await initHeadlessCheckoutLib(config);