> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crossmint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add Payment Methods

> Enable cards, Apple Pay, and Google Pay for onramp

This guide covers how to enable each supported payment method — cards, Apple Pay, and Google Pay — in your onramp integration, including the platform-specific configuration each one requires.

All payment methods are controlled through the payment configuration of the checkout component. The checkout only displays methods that the user's device supports, so enabling a method is safe even on platforms where it cannot appear. For an explanation of how each method works, see [Payment Methods](/onramp/concepts/payment-methods).

## Prerequisites

* A working onramp integration — complete a [quickstart](/onramp/quickstarts/react) first.

## Configure Allowed Methods

Set the methods you want to offer in the fiat payment configuration:

<Tabs>
  <Tab title="React">
    ```jsx theme={null}
    <CrossmintEmbeddedCheckout
        orderId={order.orderId}
        clientSecret={order.clientSecret}
        payment={{
            crypto: { enabled: false },
            fiat: {
                enabled: true,
                allowedMethods: {
                    card: true,
                    applePay: true,
                    googlePay: true,
                },
            },
        }}
    />
    ```
  </Tab>

  <Tab title="React Native">
    ```jsx theme={null}
    <CrossmintEmbeddedCheckout
        orderId={order.orderId}
        clientSecret={order.clientSecret}
        payment={{
            crypto: { enabled: false },
            fiat: {
                enabled: true,
                allowedMethods: {
                    card: true,
                    applePay: true,
                    googlePay: true,
                },
            },
        }}
    />
    ```
  </Tab>

  <Tab title="Flutter">
    ```dart theme={null}
    CrossmintEmbeddedCheckout(
      apiKey: clientApiKey,
      config: CrossmintCheckoutConfig(
        order: CrossmintCheckoutExistingOrder(
          orderId: order.orderId,
          clientSecret: order.clientSecret,
        ),
        payment: CrossmintCheckoutPayment(
          crypto: CrossmintCheckoutCryptoPayment(enabled: false),
          fiat: CrossmintCheckoutFiatPayment(
            enabled: true,
            allowCard: true,
            allowApplePay: true,
            allowGooglePay: true,
          ),
        ),
      ),
    )
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    CrossmintEmbeddedCheckout(
        orderId = "YOUR_ORDER_ID",
        clientSecret = "YOUR_CLIENT_SECRET",
        payment = CheckoutPayment(
            crypto = CheckoutCryptoPayment(enabled = false),
            fiat = CheckoutFiatPayment(
                enabled = true,
                allowedMethods = CheckoutAllowedMethods(
                    card = true,
                    applePay = true,
                    googlePay = true
                )
            )
        ),
        environment = CheckoutEnvironment.STAGING
    )
    ```
  </Tab>

  <Tab title="Swift">
    ```swift theme={null}
    CrossmintEmbeddedCheckout(
        orderId: "YOUR_ORDER_ID",
        clientSecret: "YOUR_CLIENT_SECRET",
        payment: CheckoutPayment(
            crypto: CheckoutCryptoPayment(enabled: false),
            fiat: CheckoutFiatPayment(
                enabled: true,
                allowedMethods: CheckoutAllowedMethods(
                    googlePay: false,
                    applePay: true,
                    card: true
                )
            )
        )
    )
    ```
  </Tab>
</Tabs>

Cards work on every platform with no additional setup. Apple Pay and Google Pay require the platform-specific configuration below.

## Apple Pay

<Tabs>
  <Tab title="Web (React)">
    To display Apple Pay on your website (Safari on macOS and iOS), you must verify your domain with Apple through the Crossmint Console. This is a one-time setup per domain.

    ### Prerequisites

    1. **HTTPS hosting** — your site must be served over HTTPS.
    2. **Crossmint account** — you need an active Crossmint developer account.

    <Steps>
      <Step title="Download the Verification File">
        Go to the <a href="https://www.crossmint.com/console/apple-pay-domains" target="_blank">Apple Pay Domains</a> page in the Crossmint Console and click **Download file** to get the Apple Developer Merchant ID Domain Association file.
      </Step>

      <Step title="Host the Verification File">
        Host the downloaded file on your server at the following path:

        ```text theme={null}
        https://YOUR_DOMAIN/.well-known/apple-developer-merchantid-domain-association
        ```

        <Accordion title="Example: Next.js App Router">
          **Option 1: Using the Public Folder**

          1. Create the `.well-known` folder inside your `public` directory.
          2. Place the downloaded file in `public/.well-known/` with the filename `apple-developer-merchantid-domain-association` (no extension).

          **Option 2: Using a Route**

          1. Create a folder at `app/.well-known/apple-developer-merchantid-domain-association/`
          2. Add a `route.ts` file with the following content:

          ```typescript route.ts theme={null}
          import { NextResponse } from "next/server";

          export async function GET() {
              return new NextResponse("PASTE_FILE_CONTENT_HERE", {
                  headers: {
                      "Content-Type": "text/plain",
                  },
              });
          }
          ```

          Replace `PASTE_FILE_CONTENT_HERE` with the content of the downloaded verification file.
        </Accordion>

        <Accordion title="Example: Next.js Page Router">
          1. Create the `.well-known` folder inside your `public` directory.
          2. Place the downloaded file in `public/.well-known/` with the filename `apple-developer-merchantid-domain-association` (no extension).
        </Accordion>

        <Accordion title="Example: Vite">
          1. Create the `.well-known` folder inside your `public` directory.
          2. Place the downloaded file in `public/.well-known/` with the filename `apple-developer-merchantid-domain-association` (no extension).
        </Accordion>
      </Step>

      <Step title="Verify Your Domain">
        1. Return to the <a href="https://www.crossmint.com/console/apple-pay-domains" target="_blank">Apple Pay Domains</a> page in the Crossmint Console.
        2. Enter your domain (e.g., `example.com` or `checkout.example.com`) in the input field.
        3. Click **Verify domain**.

        If verification succeeds, your domain will appear in the list of registered domains and Apple Pay will be available as a payment method in the onramp checkout.

        <Note>
          If verification fails, ensure the file is publicly accessible at the correct path. You can test by visiting `https://YOUR_DOMAIN/.well-known/apple-developer-merchantid-domain-association` in your browser.
        </Note>
      </Step>
    </Steps>

    ### Local Testing

    Using <a href="https://ngrok.com/" target="_blank">ngrok</a> is recommended for local testing:

    1. Start ngrok with a fixed domain if possible for consistent testing.
    2. Host the verification file on your local server.
    3. Register the ngrok domain in the Crossmint Console.
    4. Test Apple Pay on Safari (macOS) or any iOS device.
  </Tab>

  <Tab title="iOS (Swift)">
    Apple Pay is supported automatically in native iOS apps via the Swift SDK — no domain verification is required. Enable it through `allowedMethods` as shown in [Configure Allowed Methods](#configure-allowed-methods), and see the [Swift Quickstart](/onramp/quickstarts/swift) for the full integration.
  </Tab>
</Tabs>

## Google Pay

On the web, Google Pay works out of the box — enabling it via `allowedMethods` is all that is needed. Mobile apps require additional native configuration because the payment sheet is rendered by the operating system.

<Tabs>
  <Tab title="React Native">
    ### Prerequisites

    * React Native project with Expo or bare workflow
    * Android device or emulator with Google Play Services

    <Steps>
      <Step title="Install Dependencies">
        ```shell theme={null}
        pnpm add @crossmint/client-sdk-react-native-ui
        ```

        The SDK includes `react-native-webview` as a dependency. If you need to install it separately, ensure version **13.15.0 or higher**:

        ```shell theme={null}
        pnpm add react-native-webview@^13.15.0
        ```
      </Step>

      <Step title="Configure the Expo Plugin">
        Update your `app.json` to enable Google Pay:

        ```json theme={null}
        {
          "expo": {
            "plugins": [
              [
                "@crossmint/client-sdk-react-native-ui",
                {
                  "enableGooglePay": true
                }
              ]
            ]
          }
        }
        ```

        <Warning>
          This plugin modifies native Android permissions required for Google Pay. The app must be rebuilt after adding this configuration.
        </Warning>
      </Step>

      <Step title="Rebuild Your App">
        Hot reload cannot apply the permission changes. You must rebuild:

        ```shell theme={null}
        npx expo run:android
        ```

        Or for bare React Native:

        ```shell theme={null}
        npx react-native run-android
        ```
      </Step>

      <Step title="Enable Google Pay in the Checkout Component">
        Set `googlePay: true` in `allowedMethods` as shown in [Configure Allowed Methods](#configure-allowed-methods).
      </Step>
    </Steps>
  </Tab>

  <Tab title="Android Native (Kotlin)">
    ### Prerequisites

    * Minimum Android SDK version 24 (Android 7.0)
    * Jetpack Compose

    <Steps>
      <Step title="Add the SDK Dependency">
        In your app-level `build.gradle.kts`:

        ```kotlin theme={null}
        dependencies {
            implementation("com.crossmint:crossmint-sdk-android:0.0.9")
        }
        ```
      </Step>

      <Step title="Configure AndroidManifest.xml">
        Add the required query intents to enable Google Pay functionality:

        ```xml theme={null}
        <manifest xmlns:android="http://schemas.android.com/apk/res/android">
            <queries>
                <intent>
                    <action android:name="org.chromium.intent.action.PAY"/>
                </intent>
                <intent>
                    <action android:name="org.chromium.intent.action.IS_READY_TO_PAY"/>
                </intent>
                <intent>
                    <action android:name="org.chromium.intent.action.UPDATE_PAYMENT_DETAILS"/>
                </intent>
            </queries>
        </manifest>
        ```
      </Step>

      <Step title="Enable Google Pay in the Checkout Component">
        Set `googlePay = true` in `allowedMethods` as shown in [Configure Allowed Methods](#configure-allowed-methods).
      </Step>
    </Steps>
  </Tab>
</Tabs>

### Google Pay Production Approval

Google Pay works immediately in **staging** environments. For **production**, Google requires explicit approval of your Android app.

<AccordionGroup>
  <Accordion title="Step 1: Create Your Business Profile">
    1. Navigate to the <a href="https://pay.google.com/business/console" target="_blank">Google Pay & Wallet Console</a>
    2. Select "Merchant" as your business type
    3. Complete all business profile information
    4. Navigate to **Google Pay API** and click "Get Started"
    5. Accept the Google Pay API Terms of Service
    6. Note your **Merchant ID** (top-right corner after completion)
  </Accordion>

  <Accordion title="Step 2: Submit Your Android App for Approval">
    In the Google Pay & Wallet Console:

    1. Navigate to **Google Pay API** then **Integrations** then **Integrate with your Android app**
    2. Locate your Android application and click "Manage"
    3. Select your integration type (typically "Gateway")
    4. Upload screenshots of your TEST Google Pay integration
    5. Click "Save" then "Submit for approval"

    **Required Screenshots:**

    * Product/item selection showing Google Pay option
    * Cart or checkout view with payment options
    * Google Pay payment sheet with card selection
    * Confirmation or receipt screen
  </Accordion>

  <Accordion title="Step 3: Go Live">
    After Google approval (typically \~1 business day):

    1. Sign your APK with a **release key** (debug keys do not work in production)
    2. Update environment settings:
       * Kotlin: `environment = CheckoutEnvironment.PRODUCTION`
       * React Native: Use production API key
    3. Publish your app to Google Play Store
  </Accordion>
</AccordionGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Apple Pay button does not appear">
    1. **Domain not verified (web):** Verify your domain on the <a href="https://www.crossmint.com/console/apple-pay-domains" target="_blank">Apple Pay Domains</a> page
    2. **Unsupported browser:** Apple Pay on web only appears in Safari on macOS and iOS
    3. **Payment method disabled:** Check `applePay: true` in `allowedMethods`
  </Accordion>

  <Accordion title="Google Pay button does not appear">
    1. **Plugin not configured:** Verify `enableGooglePay: true` in `app.json` plugins
    2. **App not rebuilt:** Run `npx expo run:android` after adding the plugin
    3. **Environment mismatch:** Staging works without approval; production requires it
    4. **Payment method disabled:** Check `googlePay: true` in `allowedMethods`
  </Accordion>

  <Accordion title="PaymentRequest API is not supported error">
    1. **AndroidManifest missing queries:** Add all three Chromium intent queries
    2. **Native rebuild required:** Hot reload cannot apply permission changes
    3. **Device requirements:** User needs Google Play Services 25.18.30+ and WebView 137+
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Payment Methods" icon="book-open" href="/onramp/concepts/payment-methods">
    Understand how each payment method works and why onramp is a regulated transfer
  </Card>

  <Card title="UI Customization" icon="palette" href="/onramp/guides/ui-customization">
    Customize the onramp checkout UI to match your brand identity
  </Card>

  <Card title="User Onboarding" icon="id-card" href="/onramp/introduction/user-onboarding">
    Register users and handle KYC before their first onramp transaction
  </Card>

  <Card title="React Quickstart" icon="rocket" href="/onramp/quickstarts/react">
    Build a complete onramp integration from scratch
  </Card>
</CardGroup>