Google Pay

Google Pay is a trademark of Google LLC.

In the React Native SDK, Google Pay can be used to process payments with a smooth and native experience on Android devices. The SDK exposes a fully native Google Pay flow — including device-readiness checks, payment-sheet presentation, and receipt generation — without requiring you to integrate the Google Pay Android SDK directly into your app.

🚧

Google Pay is only available on Android devices. Calling Google Pay APIs on iOS will reject the returned promise with an error.

Overview

MoneyHash's Google Pay integration in the React Native SDK enables you to:

  • Accept payments using customers' saved cards in Google Pay
  • Provide a seamless, native payment experience through the MoneyHash SDK
  • Use either a one-call full flow (proceedWithGooglePay) or a two-step flow (generateGooglePayReceipt + submitPaymentReceipt)

Prerequisites

Before implementing Google Pay, make sure you have:

  • A MoneyHash account with Google Pay enabled
  • Your MoneyHash Account ID (used as gatewayMerchantId)
  • A registered Google Pay merchant ID
  • Google Pay configured under your MoneyHash Dashboard

1. (Optional) Configure Google Pay

You can configure the SDK with a GooglePayNativeConfig to control the Google Pay environment (TEST or PRODUCTION) and to request additional billing data (e.g., email) during the Google Pay flow.

There are two ways to provide the config:

Option A: Configure via the SDK Builder

TypeScript

import {
  MoneyHashSDKBuilder,
  GooglePayEnvironment,
  CollectibleBillingData,
  type GooglePayNativeConfig,
} from '@moneyhash/reactnative-sdk';

const googlePayConfig: GooglePayNativeConfig = {
  environment: GooglePayEnvironment.TEST, // Use PRODUCTION for live transactions
  collectibleBillingData: [CollectibleBillingData.EMAIL], // Optional
};

const moneyHashSDK = new MoneyHashSDKBuilder()
  .setNativeGooglePayConfig(googlePayConfig)
  .build();

Option B: Configure on an Existing SDK Instance

TypeScript

await moneyHashSDK.setNativeGooglePayConfig({
  environment: GooglePayEnvironment.TEST,
  collectibleBillingData: [CollectibleBillingData.EMAIL], // Currently, only "email" is supported
});
  • environment is required and must be either GooglePayEnvironment.TEST or GooglePayEnvironment.PRODUCTION.
  • collectibleBillingData is optional. Pass an empty array ([]) — or omit the field — to disable additional billing data collection. Currently, only email is supported.

🚧

The Google Pay configuration is only applied on Android. On iOS the call will reject with an error.


2. Check Device Compatibility

Before showing the Google Pay button or kicking off the flow, verify that the device supports Google Pay:

TypeScript

const isReady = await moneyHashSDK.isGooglePayReady();

if (isReady) {
  // Proceed with Google Pay
} else {
  console.log("This device does not support Google Pay");
}

You can also check readiness against specific card networks and auth methods that you intend to support:

TypeScript

const isReady = await moneyHashSDK.isGooglePayReady({
  allowedCardNetworks: ['VISA', 'MASTERCARD'],
  allowedCardAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
});

🚧

Only supported on Android. Calling this on other platforms will reject the promise with an error.


3. Get Available Methods & Find Google Pay Configuration

Retrieve the available payment methods from MoneyHash. The Google Pay configuration is returned inside the expressMethods list as nativePayData of type GooglePayData.

TypeScript

import { GooglePayData } from '@moneyhash/reactnative-sdk';

const methods = await moneyHashSDK.getMethods({
  amount: 10,
  currency: 'USD',
  customer: '<customer_id>',
});

const googlePayMethod = methods.expressMethods?.find(
  (em) => em.nativePayData && em.nativePayData.type === 'google_pay'
);

if (!googlePayMethod) {
  throw new Error('Google Pay method not available');
}

const googlePayData = googlePayMethod.nativePayData as GooglePayData;

Google Pay Payment Flow

The React Native SDK supports two ways of completing a Google Pay payment:

  1. One-call flowproceedWithGooglePay launches the Google Pay sheet, collects the token, and submits it to MoneyHash in a single call.
  2. Two-step flowgenerateGooglePayReceipt produces a receipt, then submitPaymentReceipt finalizes the payment using your intentId.

Use the two-step flow when you need full control (e.g., direct tokenization, deferred submission, or custom flows). Use the one-call flow for the simplest integration.


Option 1: One-Call Flow with proceedWithGooglePay

Use this when you already have an intentId and want the SDK to handle everything end-to-end:

TypeScript

try {
  const intentDetails = await moneyHashSDK.proceedWithGooglePay({
    intentId: '<intent_id>',
    currency: googlePayData.currencyCode!,
    amount: googlePayData.amount!,
    countryCode: googlePayData.countryCode!,
    gateway: googlePayData.gateway!,                   
    gatewayMerchantId: googlePayData.gatewayMerchantId!,
    merchantId: googlePayData.merchantId!,            
    merchantName: googlePayData.merchantName!,
    allowedCardNetworks: googlePayData.allowedCardNetworks, // Optional
    allowedCardAuthMethods: googlePayData.allowedCardAuthMethods, // Optional
  });

  console.log('🎉 Payment completed successfully:', intentDetails);
} catch (error) {
  console.error('❌ Google Pay payment failed:', error);
}

This single call will:

  1. Present the Google Pay sheet to the user.
  2. Collect the encrypted Google Pay token.
  3. Submit the token to MoneyHash for the given intentId.
  4. Resolve with the updated IntentDetails.

Option 2: Two-Step Flow

Step 1: Generate the Google Pay Receipt

Generate a Google Pay receipt without immediately submitting it. This is useful for direct tokenization or deferred submission scenarios.

TypeScript

try {
  const receipt = await moneyHashSDK.generateGooglePayReceipt({
    currency: googlePayData.currencyCode!,
    amount: googlePayData.amount!,
    countryCode: googlePayData.countryCode!,
    gateway: googlePayData.gateway!,
    gatewayMerchantId: googlePayData.gatewayMerchantId!,
    merchantId: googlePayData.merchantId!,
    merchantName: googlePayData.merchantName!,
    allowedCardNetworks: googlePayData.allowedCardNetworks, // Optional
    allowedCardAuthMethods: googlePayData.allowedCardAuthMethods, // Optional
  });

  console.log('Google Pay Receipt generated:', receipt);
  // Store the receipt to use later in step 2
} catch (error) {
  console.error('Error generating Google Pay receipt:', error);
}

Step 2: Submit the Payment Receipt

Once you have the intentId (typically obtained from your backend), finalize the payment:

TypeScript

try {
  const intentId = '<intent_id>';

  // (Optional) Select Google Pay as the payment method on the intent first
  await moneyHashSDK.proceedWithMethod(
    intentId,
    IntentType.Payment,
    'GOOGLE_PAY',
    MethodType.PaymentMethod,
  );

  const intentDetails = await moneyHashSDK.submitPaymentReceipt(
    intentId,
    receipt, // From Step 1
  );

  console.log('Payment completed successfully:', intentDetails);
} catch (error) {
  console.error('Error submitting payment receipt:', error);
}

Complete Example

The following example shows a full Google Pay flow inside a React Native screen — initialization, compatibility check, fetching the configuration from MoneyHash, generating the receipt, and submitting it.

TypeScript

import {
  MoneyHashSDKBuilder,
  IntentType,
  MethodType,
  GooglePayEnvironment,
  CollectibleBillingData,
  GooglePayData,
  type GooglePayNativeConfig,
} from '@moneyhash/reactnative-sdk';

// 1. Configure Google Pay
const googlePayConfig: GooglePayNativeConfig = {
  environment: GooglePayEnvironment.TEST,
  collectibleBillingData: [CollectibleBillingData.EMAIL],
};

const moneyHashSDK = new MoneyHashSDKBuilder()
  .setNativeGooglePayConfig(googlePayConfig)
  .build();

moneyHashSDK.setPublicKey('<YOUR_PUBLIC_KEY>');

async function payWithGooglePay(intentId: string) {
  // 2. Check device compatibility
  const isReady = await moneyHashSDK.isGooglePayReady();
  if (!isReady) {
    throw new Error('Device not compatible with Google Pay');
  }

  // 3. Fetch Google Pay configuration from MoneyHash
  const methods = await moneyHashSDK.getMethods({
    amount: 10,
    currency: 'USD',
  });

  const googlePayMethod = methods.expressMethods?.find(
    (em) => em.nativePayData && em.nativePayData.type === 'google_pay',
  );

  if (!googlePayMethod) {
    throw new Error('Google Pay method not available');
  }

  const googlePayData = googlePayMethod.nativePayData as GooglePayData;

  // 4. Generate the Google Pay receipt
  const receipt = await moneyHashSDK.generateGooglePayReceipt({
    currency: googlePayData.currencyCode!,
    amount: googlePayData.amount!,
    countryCode: googlePayData.countryCode!,
    gateway: googlePayData.gateway!,
    gatewayMerchantId: googlePayData.gatewayMerchantId!,
    merchantId: googlePayData.merchantId!,
    merchantName: googlePayData.merchantName!,
    allowedCardNetworks: googlePayData.allowedCardNetworks,
    allowedCardAuthMethods: googlePayData.allowedCardAuthMethods,
  });

  // 5. Select Google Pay as the payment method
  await moneyHashSDK.proceedWithMethod(
    intentId,
    IntentType.Payment,
    'GOOGLE_PAY',
    MethodType.PaymentMethod,
  );

  // 6. Submit the receipt to complete the payment
  const intentDetails = await moneyHashSDK.submitPaymentReceipt(
    intentId,
    receipt,
  );

  console.log('🎉 Payment completed:', intentDetails);
  return intentDetails;
}

Supported Parameters

Card Networks (allowedCardNetworks)

  • AMEX — American Express
  • DISCOVER — Discover
  • INTERAC — Interac
  • JCB — JCB
  • MASTERCARD — Mastercard
  • VISA — Visa

Implementation Notes

  • Tokenization parameters — These values (gateway: 'moneyhash', gatewayMerchantId: <account_id>) are returned automatically by the MoneyHash SDK in googlePayData. No manual setup is required.
  • Card networks — Configure the supported networks in the MoneyHash Dashboard. They are returned in googlePayData.allowedCardNetworks and can be passed directly to the SDK.
  • Billing data — MoneyHash supports collecting the customer's email through CollectibleBillingData.EMAIL. Additional billing details (such as address) should be collected by the merchant in their own checkout flow if needed.
  • Encrypted token — The Google Pay encrypted token is wrapped inside a NativePayReceipt returned by generateGooglePayReceipt (or handled implicitly by proceedWithGooglePay). It must be submitted via submitPaymentReceipt to complete the payment.

Testing

Test Environment

  • Configure the SDK with environment: GooglePayEnvironment.TEST.
  • Use Google's test cards in the device's Google Pay app.
  • Make sure the example app is running on a real Android device or emulator with Google Pay installed.

Test Cards

Google Pay provides test cards for different scenarios. Refer to Google's testing documentation for the latest list. Common test PANs:

  • Visa: 4111 1111 1111 1111
  • Mastercard: 5555 5555 5555 4444
  • American Express: 3782 8224 6310 005

Error Handling

Wrap your Google Pay calls in try/catch and surface errors to the user. Typical errors include:

  • Device not compatible with Google Pay
  • Google Pay sheet cancelled by the user
  • Network or backend errors during receipt submission

TypeScript

try {
  const intentDetails = await moneyHashSDK.proceedWithGooglePay({
    intentId,
    currency: googlePayData.currencyCode!,
    amount: googlePayData.amount!,
    countryCode: googlePayData.countryCode!,
    gateway: googlePayData.gateway!,
    gatewayMerchantId: googlePayData.gatewayMerchantId!,
    merchantId: googlePayData.merchantId!,
    merchantName: googlePayData.merchantName!,
  });

  // Handle success
} catch (error: any) {
  // Handle:
  // - Google Pay not available on the device
  // - User cancelled the Google Pay sheet
  // - Receipt submission failed
  console.error('Google Pay error:', error);
}

Going Live

Before deploying to production:

  1. Switch environment to GooglePayEnvironment.PRODUCTION in GooglePayNativeConfig.
  2. Update your Google Pay merchant ID and domain registration in the Google Pay & Wallet Console.
  3. Make sure your MoneyHash account is configured for production and that Google Pay is enabled with the correct provider in the dashboard.
  4. Test the complete flow end-to-end on a real device with a real card.
  5. Set up proper logging and monitoring for failed transactions.

API Reference

setNativeGooglePayConfig(config: GooglePayNativeConfig): Promise<void>

Configures the Google Pay environment and the billing data to collect during the Google Pay flow. Available on Android only.

isGooglePayReady(params?): Promise<boolean>

Checks whether Google Pay is available on the current Android device. Optionally accepts allowedCardNetworks and allowedCardAuthMethods to scope the check to specific networks/auth methods.

getMethods(options): Promise<IntentMethods>

Retrieves the available payment methods. Google Pay configuration is returned inside expressMethods[i].nativePayData as a GooglePayData object when its type === 'google_pay'.

proceedWithGooglePay(params): Promise<IntentDetails>

End-to-end Google Pay flow: presents the Google Pay sheet, collects the token, and submits it to MoneyHash for the given intentId. Available on Android only.

generateGooglePayReceipt(params): Promise<NativePayReceipt>

Generates a Google Pay receipt without submitting it to MoneyHash. Use this when you want to manage submission yourself or perform direct tokenization. Available on Android only.

submitPaymentReceipt(intentId, receipt): Promise<IntentDetails>

Submits a NativePayReceipt to MoneyHash to complete the payment for the given intentId.


GooglePayNativeConfig

interface GooglePayNativeConfig {
  environment: GooglePayEnvironment;          // TEST | PRODUCTION
  collectibleBillingData?: CollectibleBillingData[]; // e.g. [CollectibleBillingData.EMAIL]
}

GooglePayData

class GooglePayData {
  type: 'google_pay';
  countryCode?: string;
  merchantId?: string;
  currencyCode?: string;
  amount?: number;
  merchantName?: string;
  gateway?: string;              // "moneyhash"
  gatewayMerchantId?: string;    // Your MoneyHash Account ID
  allowedCardNetworks?: string[];
  allowedCardAuthMethods?: string[];
}

NativePayReceipt

class NativePayReceipt {
  receipt?: string;                       // Encrypted Google Pay token
  receiptBillingData?: Record<string, string>; // e.g. { email: "[email protected]" }
}

Support

For additional help with Google Pay integration: