Apple Pay & Google Pay

Time: ~25 minutes | Difficulty: Intermediate | Type: part of Examples

Finished project: 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.

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 — 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:

// 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:

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 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:

Start the demo

git clone https://github.com/TagadaPay/examples.git
cd examples/apple-google-tokenization
pnpm install && pnpm dev        # http://localhost:5173

Tunnel with ngrok

brew install ngrok              # or: npm install -g ngrok
ngrok http 5173                 # prints https://abc123.ngrok.io

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.

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.

Finished project on GitHub

Wallet buttons, card form, 3DS — all three entry points in one app

Card tokenization & 3DS

The shared charge path this demo plugs into

core-js reference

Wallet sections included — full API detail

Choose your integration

Wallets on a TagadaPay-managed cart? That’s the Headless SDK path

Overview

Payments

Web Integration

Tracking & Attribution

Node SDK

Funnels

Funnel demos

Examples

Shopify

SaaS Billing

Headless SDK

Plugin SDK

Plugin CLI

Studio MCP (AI Agents)

CRM MCP (AI Agents)

Hosting & A/B Testing

Internal

Apple Pay & Google Pay

Apple Pay & Google Pay

The two wallet-specific parts

Run it — Apple Pay needs HTTPS

Next

Finished project on GitHub

Card tokenization & 3DS

core-js reference

Choose your integration

​Apple Pay & Google Pay

​The two wallet-specific parts

​Run it — Apple Pay needs HTTPS

​Next

Finished project on GitHub

Card tokenization & 3DS

core-js reference

Choose your integration

Apple Pay & Google Pay

The two wallet-specific parts

Run it — Apple Pay needs HTTPS

Next