📍
Bolt Help / Developer Resources / Bolt SDKs / React Native SDK / Google Pay
Accept Google Pay payments on Android using the Bolt React Native SDK for Embeddable Checkout.
Overview
This guide covers Google Pay integration for Bolt Embeddable Checkout.
The Bolt React Native SDK provides a GoogleWallet component that renders a native Google Pay PayButton on Android. On iOS, the component renders nothing.
Merchant and gateway configuration (tokenization spec, merchant IDs) is automatically fetched from Bolt’s API using your publishable key — you only need to provide presentation options like currency and amount.
Usage
import { GoogleWallet } from '@boltpay/react-native/payments';
function CheckoutScreen() {
return (
<GoogleWallet
config={{
currencyCode: 'USD',
amount: '9.99',
label: 'Your Store',
billingAddressCollectionFormat: 'full',
}}
buttonType="buy"
borderRadius={8}
onComplete={(result) => {
// result: { token, bin?, expiration?, email?, billingAddress?, boltReference? }
}}
onError={(error) => console.error(error)}
/>
);
}
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
config |
GooglePayConfig |
required | Presentation options: currency, amount, label, billing address format. Merchant config is auto-fetched from Bolt. |
onComplete |
(GooglePayResult) => void |
required | Called with token, bin, expiration, and billing address on success. |
onError |
(Error) => void |
— | Called on payment failure or cancellation. |
buttonType |
GooglePayButtonType |
'plain' |
Maps to Google Pay ButtonConstants.ButtonType. Button text is rendered natively and auto-localized. |
buttonTheme |
GooglePayButtonTheme |
'dark' |
Button color theme: 'dark' or 'light'. Maps to ButtonConstants.ButtonTheme. |
borderRadius |
number |
— | Corner radius in dp applied to the Google Pay button. |
style |
ViewStyle |
— | Container style overrides (height, margin, etc.). |
GooglePayConfig
| Property | Type | Description |
|---|---|---|
currencyCode |
string |
ISO 4217 currency code (e.g. 'USD'). |
amount |
string |
Total payment amount as a string (e.g. '9.99'). |
label |
string |
Display label for the transaction (e.g. your store name). |
billingAddressCollectionFormat |
string |
Billing address collection level (e.g. 'full'). |
NOTE
You do not need to configure merchant IDs, gateway parameters, or tokenization specs. All of this is automatically fetched from Bolt’s API using the publishable key you provided when initializing the Bolt client.
GooglePayButtonType Values
'plain', 'buy', 'pay', 'checkout', 'subscribe', 'donate', 'order', 'book'
GooglePayButtonTheme Values
'dark', 'light'
GooglePayResult
{
token: string;
bin?: string;
expiration?: string;
email?: string;
billingAddress?: object;
boltReference?: string;
}