Payment methods (PIX, Apple Pay, Google Pay)

Tokenize PIX, Apple Pay, and Google Pay in the browser with the Tokeflow Bridge SDK — discover enabled methods at runtime and forward one token reference to your backend.

A single Bridge SDK instance covers every payment method your merchant has enabled. Cards, PIX, Apple Pay, and Google Pay all share the same flow: the customer authorizes payment in the browser, the SDK returns a short-lived token reference (tok_…), and you forward only that reference to your backend to charge.

This page documents the PIX, Apple Pay, and Google Pay modules. For card collection, see Tokenization and the SDK quickstart.

The Bridge SDK is initialized with a public key (pk_…). Public keys are restricted to client-safe scopes and are safe to ship in browser code. Never put a secret key (sk_…) in the browser — see Authentication.

How it fits together

Every method produces the same kind of token reference. The browser never holds raw payment credentials, and the actual charge happens server-side with your secret key.

A token reference is short-lived and intended for a single charge. Create the transaction on your backend promptly after tokenization.

Discover enabled methods

Which methods are available depends on what the merchant has enabled in the Tokeflow Dashboard during onboarding. Read them at runtime instead of hardcoding a payment UI.

Call tokeflow.getAvailablePaymentMethods() (valid after init()), or use the useAvailablePaymentMethods() React hook. It returns a subset of 'cards', 'pix', 'applePay', and 'googlePay'.

await tokeflow.init();

const methods = tokeflow.getAvailablePaymentMethods();
// e.g. ['cards', 'pix', 'applePay']

if (methods.includes('pix')) {
  // render the PIX flow
}

import { useAvailablePaymentMethods } from '@tokeflow_com/bridge-js/react';

function PaymentOptions() {
  const methods = useAvailablePaymentMethods();
  return (
    <>
      {methods.includes('pix') && <PixForm />}
      {methods.includes('applePay') && <ApplePayButton />}
      {methods.includes('googlePay') && <GooglePayButton />}
    </>
  );
}

Value	Module	Returns
`cards`	`tokeflow.cards`	A card token reference (`tok_…`)
`pix`	`tokeflow.pix`	A PIX token reference (`tok_…`)
`applePay`	`tokeflow.applePay`	A wallet token reference (`tok_…`)
`googlePay`	`tokeflow.googlePay`	A wallet token reference (`tok_…`)

Wallet availability also depends on the customer's device and browser. Always pair the merchant-level check above with the per-device checks (isSupported(), canMakePayments(), isReadyToPay()) shown below before rendering a wallet button.

PIX (Brazil)

PIX is Brazil's instant payment method. The Bridge SDK collects the payer's CPF inside a secure field and exchanges it, along with the payer's name and optional email, for a PIX token reference.

Create a CPF element, then call tokeflow.pix.tokenize(). The name can be either a secure text element or a plain string; email is optional.

const cpfElement = tokeflow.createCpfElement();
cpfElement.mount('#cpf-element');

const nameElement = tokeflow.createTextElement({ placeholder: 'Full name' });
nameElement.mount('#name-element');

const token = await tokeflow.pix.tokenize({
  cpf: cpfElement,
  name: nameElement,           // element or string, e.g. 'Joao Silva'
  email: 'joao@example.com',   // optional
});

// Send token.tokenId to YOUR server to create the charge.
await fetch('/api/payments', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ tokenId: token.tokenId }),
});

The PixToken response

tokeflow.pix.tokenize() resolves to a PixToken. The only field you send onward is tokenId; cpfLastDigits is non-sensitive display metadata.

// {
//   tokenId: 'tok_a1b2c3d4e5',  // the reference you send to your server
//   type: 'pix',
//   cpfLastDigits: '321'
// }

Field	Type	Description
`tokenId`	`string`	The Tokeflow token reference (`tok_…`). Send this to your server to charge.
`type`	`string`	Always `pix` for PIX tokens.
`cpfLastDigits`	`string`	Last digits of the CPF, for display.

To charge a PIX token from your backend, create a transaction with payment_method: "pix". See Transactions.

Apple Pay

The Apple Pay module presents the native Apple Pay sheet, captures the authorized payment in the browser, and exchanges it for a wallet token reference. Apple Pay is available only on supported Apple devices and browsers.

Configure

Configure the module once after init(). Money in the payment request is expressed as a decimal string, as Apple Pay expects.

tokeflow.applePay.configure({
  merchantId: 'merchant.com.yourcompany',
  merchantName: 'Your Company',
  countryCode: 'US',
  currencyCode: 'USD',
});

Field	Type	Required	Description
`merchantId`	`string`	Yes	Your Apple Pay merchant identifier.
`merchantName`	`string`	Yes	Display name shown on the Apple Pay sheet.
`countryCode`	`string`	Yes	ISO 3166-1 alpha-2 country code, e.g. `US`.
`currencyCode`	`string`	Yes	ISO 4217 currency code, e.g. `USD`.

Check availability and begin payment

Gate the Apple Pay button behind isSupported() (the browser supports Apple Pay) and canMakePayments() (the device has a usable card). When the customer taps the button, call beginPayment() with a payment request and a set of callbacks. In onAuthorized, tokenize the authorized payment and forward the token reference to your server.

if (tokeflow.applePay.isSupported() && (await tokeflow.applePay.canMakePayments())) {
  tokeflow.applePay.beginPayment(
    { total: { label: 'Total', amount: '10.00' } },
    {
      onAuthorized: async ({ payment }) => {
        const token = await tokeflow.applePay.tokenize(payment);

        // Send token.tokenId to YOUR server to create the charge.
        await fetch('/api/payments', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ tokenId: token.tokenId }),
        });
      },
      onCancel: () => {},
      onError: (err) => console.error(err),
    }
  );
}

The amount in an Apple Pay payment request is a decimal string (for example '10.00'). This is distinct from the Tokeflow API, where money is sent as an integer in minor units (cents).

The button element

You can render a prebuilt, Apple-compliant button instead of styling your own:

const button = tokeflow.createApplePayButton();
button.mount('#apple-pay-button');

In React, use the <ApplePayButton> component.

Apple Pay methods

Method	Description
`configure(options)`	Set merchant, country, and currency. Call once after `init()`.
`isSupported()`	Returns whether the browser supports Apple Pay.
`canMakePayments()`	Resolves to whether the device can make Apple Pay payments.
`createPaymentRequest(...)`	Builds a payment request object.
`beginPayment(request, callbacks)`	Presents the Apple Pay sheet with `onAuthorized`, `onCancel`, `onError`.
`tokenize(payment)`	Exchanges an authorized payment for a wallet token reference.

Google Pay

The Google Pay module loads the Google Pay payment sheet, captures the selected payment data, and exchanges it for a wallet token reference.

Configure

tokeflow.googlePay.configure({
  merchantId: 'your-merchant-id',
  merchantName: 'Your Company',
});

Field	Type	Required	Description
`merchantId`	`string`	Yes	Your Google Pay merchant identifier.
`merchantName`	`string`	Yes	Display name shown on the Google Pay sheet.

Check availability and load payment data

Gate the Google Pay button behind isSupported() (the browser supports Google Pay) and isReadyToPay() (the customer has a usable payment method). When the customer taps the button, call loadPaymentData() with a payment request, then tokenize the returned payment data.

if (tokeflow.googlePay.isSupported() && (await tokeflow.googlePay.isReadyToPay())) {
  const paymentData = await tokeflow.googlePay.loadPaymentData(request);
  const token = await tokeflow.googlePay.tokenize(paymentData);

  // Send token.tokenId to YOUR server to create the charge.
  await fetch('/api/payments', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ tokenId: token.tokenId }),
  });
}

The button element

const button = tokeflow.createGooglePayButton();
button.mount('#google-pay-button');

In React, use the <GooglePayButton> component.

Google Pay methods

Method	Description
`configure(options)`	Set merchant identifier and display name. Call once after `init()`.
`isSupported()`	Returns whether the browser supports Google Pay.
`isReadyToPay()`	Resolves to whether the customer is ready to pay with Google Pay.
`loadPaymentData(request)`	Presents the Google Pay sheet and resolves with the selected payment data.
`createButton(options)`	Builds a Google Pay button.
`tokenize(paymentData)`	Exchanges payment data for a wallet token reference.

Charge the token from your server

Whatever the method, the result is a tok_… reference. Your backend creates the transaction with your secret key, referencing the token, and sends an Idempotency-Key so a retry never double-charges. Set payment_method to match the method the customer used (pix, wallet, or credit_card).

curl -X POST https://api.tokeflow.com/api/v1/transactions \
  -H "Authorization: Bearer sk_live_mer_xxxxxxxxxxxxxxxx" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: order_2026_0623_attempt_1" \
  -d '{
    "customer_id": "cust_a1b2c3d4e5",
    "amount": 15000,
    "currency": "BRL",
    "payment_method": "pix",
    "charge_type": "payment",
    "country": "BR",
    "card_ciphertext_id": "tok_a1b2c3d4e5"
  }'

The success response is wrapped in the standard envelope:

{
  "success": true,
  "data": {
    "id": "tx_9f8e7d6c5b",
    "status": "pending",
    "amount": 15000,
    "currency": "BRL",
    "payment_method": "pix",
    "charge_type": "payment",
    "country": "BR",
    "customer_id": "cust_a1b2c3d4e5",
    "created_at": "2026-01-15T12:30:00.000Z"
  },
  "request_id": "req_8f3c2a1b",
  "timestamp": "2026-01-15T12:30:00.000Z"
}

The full charge flow — capture, refunds, and the attempt timeline — lives in Transactions.

Never send raw card numbers, CVCs, CPF values, or wallet credentials to your own backend. Only the SDK-produced tok_… reference should leave the browser.

Next steps

Bridge SDK overview — elements, wallets, checkout context, and the full configuration model.
Tokenization — tokenize input shapes, options, and the token response.
Elements — every input element, including the CPF element used for PIX.
Transactions — charge the token, then capture, void, or refund.

Payment methods (PIX, Apple Pay, Google Pay)

On this page