Headless Google Pay

Whitelist Your API Key & Enable Headless Google Pay

User Authentication

You can use either of the following authentication options:

User KYC

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:

Generate a quote using the Quote API

Call the Get Quote API 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.

Create a transaction session (using Backend only)

Call the Transaction Session API from your backend using the quoteId, successUrl, failureUrl and the user’s wallet address. You can optionally pass a config and billingAddress object to customise the look and feel of the Google Pay component and billing details.

A successful response returns a sessionId.

Load the Google Pay Component via Transak UI SDK

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

npm install @transak/ui-components

import { createTransakGooglePay } from '@transak/ui-components';
const googlePay = createTransakGooglePay({
  sessionId, // sessionId from Previous Step
  environment, // 'STAGING' | 'PRODUCTION'                       
  onReady: () => {
    // Component is ready
  },
  onSuccess: ({ requestId }) => {
    // Payment data captured — use requestId in the next step
  },  
  onError: ({ code }) => {
    // Handle error
  }      
});
await googlePay.mount('checkout-slot');

onError callback

The onError callback returns one of the following error codes. Use it to handle each failure case.

Here’s how the Google Pay module appears :

Place the order (using Backend only)

Once the SDK fires onSuccess with a requestId, call the Create Order API from your backend using the requestId to complete the payment and create the order.

A successful response returns the full order details with redirectUrl.

Open the redirectUrl in a browser or WebView

Always open the redirectUrl returned in the previous step in a browser or WebView.

Upon completing the transaction, the user is redirected based on the payment status:

Track the requestId (using Backend only)

Call the Transaction Request Status API to check whether the request has been processed. Poll this endpoint until the status reaches a terminal state.

Once you receive an orderId, use the Get Order by ID API to fetch full order details.