Skip to content
Process Payments/
/
Apple Pay
Last updated

Apple Pay

Overview

Apple Pay is a popular digital wallet and mobile payment service provided by Apple Inc. It allows users to make payments using their Apple devices, such as iPhones, iPads, and Macs.

This guide provides an overview of how to integrate Apple Pay into your payment form using the Embedded SDK.

Prerequisites

Before you can start accepting Apple Pay payments, you must ensure that you meet the prerequisites outlined in the Set-Up Apple Pay guide. This includes configuring your domain and obtaining the necessary certificates.

Configuring the Embedded SDK

Once your domain is verified, you can proceed to configure the embedded SDK to accept Apple Pay payments.

To do this, you need to set the applePay configuration object, which allows you to specify the following fields:

  • merchantName: The name of the business as it should appear to customers during the Apple Pay checkout process.
  • merchantCountryCode: The two-letter ISO country code representing the country where your business is located (e.g., "US" for the United States, "GB" for the United Kingdom).

Here is an example of how to configure the embedded SDK to accept Apple Pay payments:

Apple Pay Configuration Example
Ryft.init({
    publicKey,
    clientSecret,
    applePay: {
        merchantName: "Fish & Chips Ltd",  // The name of the business as it should appear to customers
        merchantCountryCode: "GB"  // The two-letter ISO country code for the business location
    }
});

If your configuration is correct, the Apple Pay button will be displayed on your payment form, allowing customers to make payments using Apple Pay.

Allowing Credit Cards

By default, the Apple Pay integration allows customers to pay using either Debit or Credit cards. If you want to restrict payments to only Debit cards, you can set the applePay.allowCreditCards configuration option to false.

Here's an example of how to configure the embedded SDK to allow only Debit cards:

Allow Only Debit Cards Example
Ryft.init({
    publicKey,
    clientSecret,
    applePay: {
        merchantName,
        merchantCountryCode,
        allowCreditCards: false // Default is true
    }
});

Shipping Configuration

If your business requires shipping information for orders, you can configure the embedded SDK to collect shipping details during the Apple Pay checkout process. This is done using the applePay.shippingConfig configuration object, which allows you to specify the following fields:

  • options (array): An array of shipping options that the customer can choose from. Each option should include:
    • id (string): A unique value to identify the shipping option.
    • label (string): A descriptive label for the shipping option (e.g., "Standard Shipping", "Express Shipping").
    • description (string): A detailed description of the shipping option.
    • amount (number): The cost of the shipping option in the smallest currency unit (e.g., cents for USD). It must be a non-negative integer.
  • allowedCountryCodes (array): An array of two-letter ISO country codes representing the countries where shipping is available (e.g., ["US", "GB"]). If not specified, shipping will be available to all countries.
  • requiredContactFields (array): An array of contact fields that are required from the customer. Possible values include email, name, phone, postalAddress.
  • type (string): The type of shipping. Possible values are shipping, delivery, storePickup or servicePickup.

Here's an example of how to configure the embedded SDK with shipping options for Apple Pay:

Apple Pay Shipping Configuration Example
Ryft.init({
    publicKey,
    clientSecret,
    applePay: {
        merchantName,
        merchantCountryCode,
        shippingConfig: {
            options: [
                {
                    id: "standard",
                    label: "Standard Shipping",
                    description: "Delivers in 3-5 business days",
                    amount: 500,
                },
                {
                    id: "express",
                    label: "Express Shipping",
                    description: "Next day delivery",
                    amount: 1500,
                },
            ],
            allowedCountryCodes: ["US", "GB"],
            requiredContactFields: ["email", "name", "phone", "postalAddress"],
            type: "shipping",
        },
    },
});

When customers proceed to checkout using Apple Pay, they will be presented with the shipping options you have configured. The selected shipping option and any collected shipping information will be included in the paymentSession object returned in the walletPaymentSessionResult event.

Customising the Apple Pay Button

If you want to customise the appearance of the Apple Pay button, you can use the applePay.buttonConfiguration configuration object. This allows you to specify the following fields:

  • height (number): The height of the button in pixels. Default is 48.
  • type (string): The type of button to display, e.g. buy, plain, subscribe. Default is plain.
  • color (string): The color of the button, e.g. black, white. Default is black.
  • width (string): The CSS width of the button, e.g. 80%, 50%. Default is 100%.
  • borderRadius (number): The border radius of the button in pixels. Default is 4.

Please refer to the Apple Pay Button Branding Guidelines to ensure that your customisations comply with Apple's requirements.

Here's an example of how to customise the Apple Pay button:

Apple Pay Custom Button Example
Ryft.init({
    publicKey,
    clientSecret,
    applePay: {
        merchantName,
        merchantCountryCode,
        buttonConfiguration: {
            height: 50,
            type: "buy",
            color: "white",
            width: "80%",
            borderRadius: 8,
        },
    },
});

Handling the Payment Result

To handle the result of a Apple Pay transaction, you can listen for the walletPaymentSessionResult event, which is triggered when the payment process is completed. This event provides a paymentSession object that contains information about the transaction status and any errors that may have occurred. You can use this information to update your UI and inform the customer of the payment outcome.

Also, the walletButtonsReady event can be used to detect when the Apple Pay button is fully loaded and ready for interaction.

Please refer to the Handling SDK Events section for more details on how to listen for and handle SDK events.

Previous page
Next page