> ## Documentation Index
> Fetch the complete documentation index at: https://razorpay-881012b3.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Integration Steps
> Accept Apple Pay payments from international customers on your own checkout UI using the Razorpay Custom Checkout SDK.
Available in
🇮🇳 India
Apple Pay is a secure, contactless payment method that lets customers pay using their Apple devices with Face ID/Touch ID authentication. With the Custom Checkout headless SDK, you check Apple Pay eligibility and either let Razorpay render the Apple Pay button or render your own — all on your existing Custom Checkout integration, with no redirect. Know more about [Apple Pay](https://www.apple.com/apple-pay/).
This integration works with your existing card payment flow: check eligibility, render a button and initiate the payment with one additional `app` parameter.
* Accept payments in over 120 currencies from international customers.
* Reduce checkout time with one-touch biometric payments (Face ID/Touch ID).
* Full control of where and how the Apple Pay button appears on your page.
* Razorpay encapsulates device eligibility — no need to integrate the Apple Pay JS API or write capability-detection logic yourself.
* No need to handle Apple certificates or domain verification beyond hosting one file — Razorpay manages the rest.
## Prerequisites
Before you begin, ensure you have:
* An existing Razorpay Custom Checkout integration.
* Apple Pay enabled and International Payments enabled on your Razorpay account.
* HTTPS on your website — Apple Pay requires a secure context.
* Your API Key Id. Generate [API Keys](/docs/api/authentication#generate-api-keys) from the Dashboard. Use Live Mode keys to accept real payments.
* Apple Pay domain verification completed for your domain (host the domain association file; Razorpay registers it with Apple).
## Integration Steps
Follow the steps given below.
### 1.1 Create an Order on Your Server
An order should be created for every payment.
* Create an order using the [Orders API](/docs/api/orders/create). This is a server-side call.
* Pass the returned `order_id` to your frontend. This ties the order to the payment and secures the request from tampering.
**Watch Out!**
Payments made without an `order_id` cannot be captured and will be automatically refunded. Create an order before initiating payment.
```bash Request theme={null}
curl -X POST https://api.razorpay.com/v1/orders \
-u [YOUR_KEY_ID]:[YOUR_KEY_SECRET] \
-H 'content-type:application/json' \
-d '{
"amount": 50000,
"currency": "USD",
"receipt": "receipt_1"
}'
```
The response includes an `id` (for example, `order_XXXXXXXXXX`). Pass this to your frontend for SDK initialisation. For the full list of order request and response parameters, see the [Create an Order API](/docs/api/orders/create).
### 1.2 Load the Custom Checkout Script
Include the Custom Checkout script, preferably in the `` of your page:
```html HTML theme={null}
```
**Handy Tips**
Load the script from `https://checkout.razorpay.com/v1/razorpay.js` rather than serving a copy. This keeps updates and fixes automatic. Existing Custom Checkout merchants already load this script.
### 1.3 Initialise the SDK
Initialise Razorpay with your key and the `order_id` created in step 1.1. Provide a handler to receive the successful payment response (you can also use event listeners — see step 1.6).
```javascript JavaScript theme={null}
var razorpay = new Razorpay({
key: 'rzp_live_xxx',
order_id: 'order_XXXXXXXXXX', // created server-side at page load
contact: '9123456789',
email: 'gaurav.kumar@example.com',
handler: function (response) {
// response.razorpay_payment_id
// response.razorpay_order_id
// response.razorpay_signature // verify on your server
}
});
```
| Parameter | Type | Required | Description |
| ---------- | -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| `key` | string | Yes | API Key ID (`rzp_test_*` or `rzp_live_*`). |
| `order_id` | string | Yes | Order ID generated via the Orders API. |
| `contact` | string | Optional | Customer's phone number, used to prefill the contact field. |
| `email` | string | Optional | Customer's email address, used to prefill the email field. |
| `handler` | function | Optional | Called with the success response (`razorpay_payment_id`, `razorpay_order_id`, `razorpay_signature`). Alternatively, use event listeners (step 1.6). |
### 1.4 Check Apple Pay Eligibility
Use `canMakePayment()` to check whether the customer's device can pay with Apple Pay. Razorpay's SDK encapsulates the device capability check, so you do not integrate the Apple Pay JS API or evaluate `paymentCredentialsAvailable` yourself.
```javascript JavaScript theme={null}
// canMakePayment() is async — call it inside an async function or a