# Apple Pay for Web

Configure Apple Pay for Web into your website to accept payments in Safari and supported third-party browsers on Apple devices.

### Key capabilities

#### Cross-browser support

* Accept Apple Pay payments using supported browsers on secure devices.
* Process Apple Pay payments in Chrome or Edge when customers use an iPhone.
* Use a consistent implementation across supported browsers, including Safari.

#### iFrame support

* Support iFrame-based checkout experiences.
* Allow embedded payment flows, including Paylink and Hosted Payments.
* Enforce domain validation and browser/device compatibility requirements.

### Prerequisites <a href="#prerequisites" id="prerequisites"></a>

Make sure you have the following before you configure Apple Pay and start accepting payments on your website:

* [**Devices**](https://support.apple.com/en-us/102896) compatible with Apple Pay.
* [**HTTPS**](https://en.wikipedia.org/wiki/HTTPS) enabled for both development and production environments.
* A [**valid SSL certificate**](https://en.wikipedia.org/wiki/Public_key_certificate#TLS/SSL_server_certificate) for your domain.
* [**Transport Layer Security (TLS) 1.2**](https://en.wikipedia.org/wiki/Transport_Layer_Security#TLS_1.2) or later and a supported cipher suite for your server.
* Ensure [**Apple Pay**](https://developer.apple.com/documentation/ApplePayontheWeb/setting-up-your-server) is configured and enabled on your production server.

{% hint style="success" %}
We recommend you implement manual card entry using the [JavaScript](https://docs.xplorpay.com/guides/payment-processing-solutions/javascript) as a fallback.
{% endhint %}

### Supported payment methods <a href="#supported-payment-methods" id="supported-payment-methods"></a>

{% hint style="warning" %}
Payment and address information are *required* to process payments using Apple Pay on your website.
{% endhint %}

### **Supported Cards**

* [Visa](https://en.wikipedia.org/wiki/Visa_Inc.#Products)
* [MasterCard](https://en.wikipedia.org/wiki/Mastercard#Products)
* [Amex](https://en.wikipedia.org/wiki/American_Express#Amex_credit_card_benefits_and_fees)
* [Discover](https://en.wikipedia.org/wiki/Discover_Card)

### **Merchant Capabilities**

* [Credit cards](https://en.wikipedia.org/wiki/Credit_card)
  * [Visa](https://en.wikipedia.org/wiki/Visa_Inc.#Visa_Credit_Cards)
  * [Mastercard](https://en.wikipedia.org/wiki/Mastercard#Products)
  * [Amex](https://en.wikipedia.org/wiki/American_Express#Amex_credit_card_benefits_and_fees)
  * [Discover](https://en.wikipedia.org/wiki/Discover_Card)
* [Debit cards](https://en.wikipedia.org/wiki/Debit_card)
  * [Visa](https://en.wikipedia.org/wiki/Visa_Debit)
  * [Mastercard](https://en.wikipedia.org/wiki/Mastercard#Prepaid_debit_cards)

### Unsupported payment methods <a href="#unsupported-payment-methods" id="unsupported-payment-methods"></a>

* In-App payments
* Recurring payments
* Split shipment
* Voids/Refunds through Apple Pay

### Getting started <a href="#getting-started" id="getting-started"></a>

Xplor Pay manages the [Merchant Validation](https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/providing_merchant_validation/) process for you by creating an Apple Merchant ID and CSR. For more information, see [Apple Developer Documentation](https://developer.apple.com/documentation/apple_pay_on_the_web).

#### Register domain using Merchant Portal

To register a domain:

1. Go to the [Merchant Portal](https://auth.clearent.net/oauth2/aus4ulyubshD7M0yf697/v1/authorize?client_id=0oa6ggt30dFSxSVxX697\&redirect_uri=https%3A%2F%2Fmy.clearent.net%2Fui%2Fauth%2Fpost-login\&response_type=code\&scope=openid+profile\&state=76467a84f76643108a9e608b3352d346\&code_challenge=aueGbQf2_zJaTHmk8PskefVGKPOA8C8-T9JbbZF5E-Y\&code_challenge_method=S256).
2. Select **Virtual Terminal** > **VT Settings** > **Apple Pay for Web**.
3. Download the registration file.
4. Host the downloaded file on your website to complete the registration.

#### Register domain using Apple Pay for Web API endpoint

To register a domain:

1. Use the **POST** method with [Apple Pay for Web API](https://docs.xplorpay.com/api-references/payments/mobile/apple-merchant/apple-pay-for-web) endpoint to register the domain or domains you’ll use with Apple Pay.
2. Host the verification file provided by Xplor Pay to you on the following URL, replacing `[DOMAIN_NAME]` with your domain name.

**URL**: `https://[DOMAIN_NAME]/.well-known/apple-developer-merchantid-domain-association`

{% hint style="warning" %}
The URL with your `[DOMAIN_NAME]` *must* be publicly accessible to allow Apple to verify the file.
{% endhint %}

#### Verifying domain with Apple

To verify your domain with Apple:

1. Send a notification to Xplor Pay to request domain verification with Apple after hosting the file at the appropriate URL.
2. You will receive confirmation after successful domain verification with Apple from Xplor Pay.

#### Configuring Apple Pay for Web

To configure Apple Pay into your website:

1. Add the `JavaScriptSDK.init` method to allow Apple Pay.

```javascript
ClearentSDK.init({
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "enableApplePay": true
});
```

The following table describes the fields in the `JavaScriptSDK.init` method:

<table><thead><tr><th width="160.33331298828125" valign="top">Name</th><th width="115.33331298828125" valign="top">Data type</th><th width="128.66668701171875" valign="top">Required?</th><th valign="top">Description</th></tr></thead><tbody><tr><td valign="top"><code>pk</code></td><td valign="top">String</td><td valign="top">Required</td><td valign="top">Your public API key issued by Xplor Pay to authenticate the SDK.</td></tr><tr><td valign="top"><code>enableApplePay</code></td><td valign="top">Boolean</td><td valign="top">Required</td><td valign="top">Enables Apple Pay functionality when you set it to <code>true</code>.</td></tr></tbody></table>

2. Add the `applePayRequest` object to the `JavaScriptSDK.init` method.

```javascript
ClearentSDK.init({
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "enableApplePay": true,
    "applePayRequest": {
        "total": {
            "label": "Bob's Canoes",
            "amount": "50.25",
            "type": "final"
        }
    }
});
```

The following table describes the fields in the `applePayRequest` object:

<table><thead><tr><th width="195" valign="top">Name</th><th width="117.3333740234375" valign="top">Data type</th><th width="115" valign="top">Required?</th><th valign="top">Description</th></tr></thead><tbody><tr><td valign="top"><code>applePayRequest.total</code></td><td valign="top">String</td><td valign="top">Required</td><td valign="top">Defines the total transaction amount and merchant label that appear in the Apple Pay sheet.</td></tr><tr><td valign="top"><code>total.label</code></td><td valign="top">String</td><td valign="top">Required</td><td valign="top">The merchant’s name displayed to customers in the Apple Pay sheet. For example, Bob’s Canoes.</td></tr><tr><td valign="top"><code>total.amount</code></td><td valign="top">String</td><td valign="top">Required</td><td valign="top">The total transaction amount to be charged. For example, 50.25</td></tr><tr><td valign="top"><code>total.type</code></td><td valign="top">String</td><td valign="top">Required</td><td valign="top">Indicates the type of transaction amount. Use final for a fixed total.</td></tr></tbody></table>

{% hint style="info" %}
See the [Apple Pay on the Web Demo](https://applepaydemo.apple.com/) for additional objects you can use in your Apple Pay payment sheet.
{% endhint %}

#### Processing payments with Apple Pay

Integrating the[ JavaScript](https://docs.xplorpay.com/guides/payment-processing-solutions/javascript) handles Apple Pay token and convert it into the mobile JSON Web Token (JWT).

To process the payment with Apple Pay:

1. Add the `ClearentTokenSuccess` and `ClearentTokenError` functions to your integration to receive feedback containing the mobile JSON Web Token (JWT) for processing payments.

```javascript
function ClearentTokenSuccess(raw, json) {
    console.log("ClearentTokenSuccess");
    console.log(raw);
    console.log(json);
    console.log("-----------------------------------------------");
    console.log("now you can send the token to your server");
    console.log("to complete the transaction via mobile-gateway");
    console.log("-----------------------------------------------")
}
function ClearentTokenError(raw, json) {
    console.log("ClearentTokenError");
    console.log(raw);
    console.log(json);
}
```

{% hint style="warning" %}
Make sure the `ClearentTokenSuccess` and `ClearentTokenError` functions are added to your JavaScript integration to avoid unnecessary rework. If you haven’t integrated them yet, see the [JavaScript SDK](https://docs.xplorpay.com/payment-processing-solutions/javascript-sdk) for integration steps.
{% endhint %}

2. Use [HTTPS](https://en.wikipedia.org/wiki/HTTP#Request_methods) methods to send the [mobile payment API](https://docs.xplorpay.com/api-references/payments/mobile/apple-merchant/apple-pay-for-web) requests using the mobile JSON Web Token (JWT) from your server.

{% hint style="warning" %}
Make sure you have the following to process the Apple Pay transaction using [Mobile Payment Transactions API](https://docs.xplorpay.com/api-references/payments/mobile/mobile-payment-transactions) on your website:

:white\_check\_mark: [API key](https://docs.xplorpay.com/api-references/authentication#obtaining-your-access-key) issued by Xplor Pay

:white\_check\_mark: Mobile JSON Web Token (JWT)
{% endhint %}

{% hint style="danger" %}
Don’t expose the [API key](https://docs.xplorpay.com/api-references/authentication#obtaining-your-access-key) issued by Xplor Pay in your website code or client-side scripts.
{% endhint %}

#### Testing Apple Pay for Web <a href="#offline-testing-for-apple-pay" id="offline-testing-for-apple-pay"></a>

Refer the [Apple’s sandbox testing](https://developer.apple.com/apple-pay/sandbox-testing/) guide to test offline transactions on your website using Apple Pay.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.xplorpay.com/guides/payment-processing-solutions/javascript/apple-pay-for-web.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.