# 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](/documentation/get_started/additional_resources/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:


```javascript 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:


```javascript 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:


```javascript 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](https://developer.apple.com/design/human-interface-guidelines/technologies/apple-pay/buttons-and-marks/) to ensure that your customisations comply with Apple's requirements.

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


```javascript 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](/documentation/get_started/process_payments/embedded_sdk/sdk_events) section for more details on how to listen for and handle SDK events.