> For a complete page index, fetch https://docs.transak.com/llms.txt

# Headless Apple Pay

**Headless Apple Pay** is a lightweight, embeddable UI module that allows partners to offer Apple Pay as a payment method directly within their own application without loading any widget.

## Problem Statement

Currently, Transak requires loading the full widget for Apple pay, which forces users to go through multiple screens before reaching payment module. This creates friction and limits the partner control over the payment experience.

Here are some of the **key challenges** with the current approach:

<table>
  <tbody>
    <tr>
      <td>
        <strong>
          Full widget required
        </strong>

        Partners must load the entire Transak widget to confirm order with Apple pay as payment method.
      </td>
    </tr>

    <tr>
      <td>
        <strong>
          Multiple screens before payment
        </strong>

        Users navigate through several Transak screens before they ever see the Apple Pay button, increasing drop-off risk.
      </td>
    </tr>

    <tr>
      <td>
        <strong>
          Disconnected payment experience
        </strong>

        The payment flow feels separate from the partner's own UI, breaking the continuity.
      </td>
    </tr>

    <tr>
      <td>
        <strong>
          Limited partner control
        </strong>

        Partners have no control over when or where Apple Pay appears as placement and styling are determined by the widget.
      </td>
    </tr>
  </tbody>
</table>

## Our Solution

Headless Apple Pay exposes just the Apple Pay button as a standalone, embeddable component. Partners control where it sits, how it looks, and what happens after payment. Transak handles all the payment infrastructure in the background.

Here are some of the **key benefits** of the Headless Apple Pay solution:

<table>
  <tbody>
    <tr>
      <td>
        <strong>
          Just the Apple Pay button
        </strong>

        Embed only the Apple Pay button — no full widget required.
      </td>
    </tr>

    <tr>
      <td>
        <strong>
          One tap to payment
        </strong>

        Users see the Apple Pay button immediately and complete payment in a single tap, reducing drop-off.
      </td>
    </tr>

    <tr>
      <td>
        <strong>
          Seamless checkout integration
        </strong>

        The Apple Pay button sits inside the partner's own checkout UI, keeping the experience continuous.
      </td>
    </tr>

    <tr>
      <td>
        <strong>
          Full partner control
        </strong>

        Partners decide where the button appears, how it looks, and what happens after payment.
      </td>
    </tr>
  </tbody>
</table>

## How does it work?

## Current Limitations

<table>
  <thead>
    <tr>
      <th>
        Limitation
      </th>

      <th>
        Details
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <strong>
          Headless Apple Pay APIs (

          [Transaction Session API](/api/headless-apple-pay/transaction-session-api)

          , 

          [Transaction Process API](/api/headless-apple-pay/transaction-process-api)

          , 

          [Transaction Request Status API](/api/headless-apple-pay/transaction-request-status-api)

          )
        </strong>
      </td>

      <td>
        APIs are to be called only from the partner backend and subjected to the whitelisting of partner IP addresses. We don't support API calls from the frontend due to security restrictions.
      </td>
    </tr>

    <tr>
      <td>
        <strong>
          No supported device detection
        </strong>
      </td>

      <td>
        The module does not check whether the user's device supports Apple Pay. Partners must verify availability before loading the Transak UI SDK.
      </td>
    </tr>

    <tr>
      <td>
        <strong>
          Supported only for React Native integrations
        </strong>
      </td>

      <td>
        The Transak UI SDK is currently available for [React Native](/features/headless-apple-pay#load-the-apple-pay-component-via-transak-ui-sdk) only. Web-based integrations are not supported at the moment.
      </td>
    </tr>

    <tr>
      <td>
        <strong>
          Transaction Process API may timeout
        </strong>
      </td>

      <td>
        The [Transaction Process API](/api/headless-apple-pay/transaction-process-api) can take time to process a request. In case of an API timeout or server error, poll the [Transaction Request Status API](/api/headless-apple-pay/transaction-request-status-api) to retrieve the current status of the transaction request.
      </td>
    </tr>
  </tbody>
</table>

## How to integrate?

| Action                                                                                                                 |
| ---------------------------------------------------------------------------------------------------------------------- |
| Follow the steps in the [Need help in Integration](/getting-started/help-and-support#need-help-in-integration) section |
| Request **API key whitelisting** and ask to **enable Headless Apple Pay** for your API key                             |
| Share your public IP addresses with Transak for whitelisting to use our APIs in your backend                           |

You can use either of the following authentication options:

| Option               | Description                                                                                                                                                                                                                                                                                                 |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **White-label Auth** | Use the standard Transak authentication flow to generate a user access token. Partners can do this by calling the [Send User OTP API](/api/whitelabel/user/send-user-otp) followed by the [Verify User API](/api/whitelabel/user/verify-user-otp) to generate the access token.<br /><br />Learn more<br /> |
| **Auth Reliance**    | Use [Auth Reliance](/features/auth-reliance) by passing these headers with every request: `x-user-identifier` and `x-access-token`                                                                                                                                                                          |

Please refer to the tutorial on [how to create partner access token](/guides/how-to-create-partner-access-token).

KYC is a mandatory step in compliance with regulatory requirements. Each user should be KYC Approved. You can use either of the following KYC options:

| Option                      | Description                                                                                                                                                               |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **White label KYC**         | Partners can collect the required KYC information on their end and then forward it to Transak for review and approval. Learn more: [Whitelabel KYC](/integration/api#kyc) |
| **KYC Reliance via Sumsub** | Partners can share their KYC data from their platform with Transak using Sumsub. Learn more: [KYC Reliance Guide](/features/kyc-reliance-sumsub)                          |

Call the [Get Quote API](https://docs.transak.com/api/whitelabel/lookup/get-quote) to get a quote for the transaction. Pass the apiKey, fiat amount, fiat currency, crypto currency, network, and order type.

A successful response returns a `quoteId`.

Call the [Transaction Session API](/api/headless-apple-pay/transaction-session-api) from your backend using the `quoteId` and the user's wallet address. You can optionally pass a `config` object to customise the look and feel of the Apple Pay component.

A successful response returns a `sessionId`.

Use the Transak UI SDK to render the Apple Pay component. Pass the `sessionId` received in previous Step.

```bash
npm install @transak/ui-components-rn
```

```tsx
import { TransakApplePay } from ‘@transak/ui-components-rn’;

<TransakApplePay
  sessionId={sessionId} // sessionId from Previous Step
  environment={environment} // 'STAGING' | 'PRODUCTION'
  onReady={() => {
    // Component is ready
  }}
  onSuccess={({ requestId }) => {
    // Payment data captured — use requestId in the next step
  }}
  onError={({ code }) => {
    // Handle error
  }}
/>
```

**Error codes**

The `onError` callback receives a `code` value. Use it to handle specific failure scenarios:

| Code                         | Description                                  |
| ---------------------------- | -------------------------------------------- |
| `CONFIG_LOAD_FAILED`         | Apple Pay configuration could not be loaded  |
| `MERCHANT_VALIDATION_FAILED` | Merchant validation with Apple failed        |
| `PAYMENT_CAPTURE_FAILED`     | Apple Pay payment capture failed             |
| `INVALID_OPTIONS`            | Invalid or missing options passed to the SDK |
| `IFRAME_LOAD_FAILED`         | The embedded iframe failed to load           |
| `INVALID_STATE`              | SDK method called in an unexpected state     |

Here’s how the Apple Pay module appears :

Once the SDK fires `onSuccess` with a `requestId`, call the [Transaction Process API](/api/headless-apple-pay/transaction-process-api) from your backend to complete the payment and create the order.

A successful response returns the full order details.

Call the [Transaction Request Status API](/api/headless-apple-pay/transaction-request-status-api) to check whether the request has been processed. Poll this endpoint after calling the [Transaction Process API](/api/headless-apple-pay/transaction-process-api) until the status reaches a terminal state.

Once you receive an `orderId`, use the [Get Order by ID](https://docs.transak.com/api/public/get-order-by-order-id) API to fetch full order details.

## API Overview

Creates a transaction session using a quote ID and wallet address, returns a `sessionId` to initialise the Apple Pay component.

Processes the Apple Pay payment using the `requestId` returned by the SDK's  onSuccess callback, completing the order creation.

Polls the status of the `requestId` until it reaches a terminal state.

## API Errors

| HTTP Status | Error Code | Message                                                                             |
| ----------- | ---------- | ----------------------------------------------------------------------------------- |
| 401         | 1002       | Invalid or missing authentication token(Only for White-label Auth).                 |
| 422         | 6002       | KYC is not approved. Please complete KYC before creating a session.                 |
| 422         | 6003       | This feature is not enabled for your account. Please contact support.               |
| 422         | 6005       | Quote not found or could not be loaded.                                             |
| 500         | 6005       | Failed to create a session for the user.                                            |
| 422         | 6006       | The provided wallet address is invalid for the selected cryptocurrency and network. |

| HTTP Status | Error Code | Message                                                                   |
| ----------- | ---------- | ------------------------------------------------------------------------- |
| 422         | 4001       | Invalid wallet address. Please provide a valid wallet address to proceed. |
| 422         | 4002       | Please complete your KYC to place an order.                               |
| 422         | 4003       | Please upgrade your kyc to next level to proceed with this transaction.   |
| 422         | 4005       | Order exists.                                                             |
| 422         | 4006       | Unable to create order.                                                   |
| 422         | 4013       | Minimum amount should be more than \{amount}.                             |
| 422         | 4015       | Invalid payment method for currency combination.                          |
| 422         | 4016       | FCA criteria not met, Please complete the assessments.                    |
| 422         | 4021       | Something went wrong, try again later!                                    |
| 404         | 6007       | Request ID not found.                                                     |
| 422         | 6012       | KYC requirement is not approved for this transaction.                     |
| 500         | 6099       | Unable to process the order. Please try again.                            |

| HTTP Status | Error Code | Message               |
| ----------- | ---------- | --------------------- |
| 404         | 6007       | Request ID not found. |

## Interactive Demo (Login + Existing user flow)

<iframe src="https://app.supademo.com/embed/cmp5lcz2i000f0jzcoif9emnm?embed_v=2&utm_source=embed" loading="lazy" title="Headless Apple Pay" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen />