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

1
import { createTransakGooglePay } from '@transak/ui-components';
2
3
const googlePay = createTransakGooglePay({
4
  sessionId, // sessionId from Previous Step
5
  environment, // 'STAGING' | 'PRODUCTION'                       
6
  onReady: () => {
7
    // Component is ready
8
  },
9
  onSuccess: ({ requestId }) => {
10
    // Payment data captured — use requestId in the next step
11
  },  
12
  onError: ({ code }) => {
13
    // Handle error
14
  }      
15
});
16
17
await googlePay.mount('checkout-slot');
18
19
// and then
20
googlePay.unmount();

Error codes

The onError callback receives a code value. Use it to handle specific failure scenarios:

Here’s how the Google Pay module appears :

Process the payment with requestId (using Backend only)

Once the SDK fires onSuccess with a requestId, call the Transaction Process API from your backend 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

Open the redirectUrl returned in the previous step in the browser or webview to complete any 3DS or bank authentication required by the payment provider.

Upon completing the transaction, the user will be redirected to either the successUrl or failureUrl you passed in the Transaction Session API.

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.