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

# Apple Pay & Google Pay

> Native wallet buttons with @tagadapay/core-js — wallet token in, TagadaToken out, then the exact same charge path as a card

# Apple Pay & Google Pay

**Time**: \~25 minutes | **Difficulty**: Intermediate | **Type**: part of [Examples](/developer-tools/examples/introduction)

<Info>
  **Finished project:** [`apple-google-tokenization`](https://github.com/TagadaPay/examples/tree/main/apple-google-tokenization). Clone it if you want working wallet buttons first — or keep reading for the two things that actually differ from a card payment.
</Info>

The punchline of this demo: **wallets are just another tokenizer**. Apple Pay and Google Pay each hand you an encrypted token; you convert it to a `TagadaToken`, and from there the flow is byte-for-byte the [card tokenization flow](/developer-tools/examples/card-tokenization) — payment instrument, optional 3DS, charge. One charge path, three ways in.

| Entry point          | You get                         | Then                                  |
| -------------------- | ------------------------------- | ------------------------------------- |
| 🍎 Apple Pay button  | `paymentData.token.paymentData` | → `TagadaToken` → instrument → charge |
| 🟢 Google Pay button | `tokenizationData.token`        | → `TagadaToken` → instrument → charge |
| 💳 Card form         | `tokenizeCard()` result         | → same instrument → same charge       |

***

## The two wallet-specific parts

**1. The buttons.** `@tagadapay/core-js` ships both button integrations. Each fires an `onAuthorized` callback with the wallet's encrypted payload:

```tsx theme={null}
// Apple Pay
const handleApplePayAuthorized = async (paymentData) => {
  const applePayToken = paymentData.token.paymentData;
  const tagadaToken = await createTagadaTokenFromApplePay(applePayToken);
  // → createPaymentInstrument → processPayment, same as a card
};

// Google Pay
const handleGooglePayAuthorized = async (paymentData) => {
  const googlePayToken = paymentData.paymentMethodData.tokenizationData.token;
  const tagadaToken = await createTagadaTokenFromGooglePay(googlePayToken);
};
```

**2. Environment config.** Google Pay needs the right tenant id per environment — don't hardcode it, the SDK resolves it:

```ts theme={null}
import { getGoogleTenantId } from '@tagadapay/core-js/core';

const tenantId = getGoogleTenantId('development'); // or 'production' | 'local'
```

Everything after the `TagadaToken` — payment instrument, SCA detection, 3DS challenge, charge — is covered in [Card tokenization & 3DS](/developer-tools/examples/card-tokenization) and is shared code in this demo.

***

## Run it — Apple Pay needs HTTPS

Google Pay and the card form work straight on `localhost`. **Apple Pay refuses non-HTTPS pages**, so tunnel your dev server:

<Steps>
  <Step title="Start the demo">
    ```bash theme={null}
    git clone https://github.com/TagadaPay/examples.git
    cd examples/apple-google-tokenization
    pnpm install && pnpm dev        # http://localhost:5173
    ```
  </Step>

  <Step title="Tunnel with ngrok">
    ```bash theme={null}
    brew install ngrok              # or: npm install -g ngrok
    ngrok http 5173                 # prints https://abc123.ngrok.io
    ```
  </Step>

  <Step title="Open the HTTPS URL in Safari">
    Open the `https://….ngrok.io` URL in **Safari** on a device with a card in Wallet — the Apple Pay button lights up and the full flow works, 3DS included.
  </Step>
</Steps>

<Tip>
  No Apple device handy? The demo degrades gracefully: Google Pay in Chrome and the classic card form both run on plain `localhost`, so you can verify the whole charge path before touching ngrok.
</Tip>

***

## Next

<CardGroup cols={2}>
  <Card title="Finished project on GitHub" icon="github" href="https://github.com/TagadaPay/examples/tree/main/apple-google-tokenization">
    Wallet buttons, card form, 3DS — all three entry points in one app
  </Card>

  <Card title="Card tokenization & 3DS" icon="credit-card" href="/developer-tools/examples/card-tokenization">
    The shared charge path this demo plugs into
  </Card>

  <Card title="core-js reference" icon="book" href="/developer-tools/payments/core-js-payments">
    Wallet sections included — full API detail
  </Card>

  <Card title="Choose your integration" icon="signs-post" href="/developer-tools/payments/choose-your-integration">
    Wallets on a TagadaPay-managed cart? That's the Headless SDK path
  </Card>
</CardGroup>