# Google Pay
import { Aside } from '@astrojs/starlight/components';
import Image from '@components/content/Image.astro';
In this guide, you will learn how to directly integrate Google Pay with SumUp. Please note that you can also offer Google Pay through our Payment Widget (see [Payment Widget documentation](/online-payments/checkouts/card-widget#alternative-payment-methods)).
## Prerequisites
- You have a SumUp merchant account and have already filled in your [account details](https://me.sumup.com/account).
- If you want to test payments without involving real funds, [create a sandbox merchant account](/online-payments/#getting-a-sandbox-merchant-account).
- Review [Google Pay API terms of service](https://payments.developers.google.com/terms/sellertos).
- Complete the domain onboarding setup steps described in your Dashboard under **Settings** > **For developers** > **Payment wallets**. You can read Google's tutorial [Google Pay for Payments](https://developers.google.com/pay/api/web/guides/tutorial), which covers the requirements you're expected to follow in order to successfully offer this payment method.
## Accepting Google Pay Payments with SumUp
Considering you've adhered to the prerequisites, the following steps will enable you to begin accepting Google Pay payments through SumUp:
1. Create a base payment request object, containing:
- `tokenizationSpecification` object with the following parameters:
- `gateway`- always equal to "sumup"
- `gatewayMerchantId`- your SumUp merchant code
- [`merchantInfo` object](https://developers.google.com/pay/api/web/reference/request-objects#MerchantInfo) with the following keys:
- `merchantId`- unique identifier provided to you by Google once you register your domain with them. This is required for `PRODUCTION`.
- `merchantName`- your merchant name
```js
const baseRequest = {
apiVersion: 2,
apiVersionMinor: 0,
merchantInfo: {
merchantId: '123456789123456789',
merchantName: 'Example Merchant',
},
allowedPaymentMethods: [
{
type: 'CARD',
parameters: {
allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
allowedCardNetworks: ['MASTERCARD', 'VISA'],
},
tokenizationSpecification: {
type: 'PAYMENT_GATEWAY',
parameters: {
gateway: 'sumup',
gatewayMerchantId: 'exampleGatewayMerchantId',
},
},
},
],
};
```
2. Load the [Google Pay API JavaScript library](https://developers.google.com/pay/api/web/guides/tutorial#js-load) on the web page you will offer this payment method
3. Initialize a `PaymentsClient` object for the environment you are implementing. Two values are possible here: `TEST` for testing the integration and `PRODUCTION` for live payments.
```js
const paymentsClient = new google.payments.api.PaymentsClient({
environment: 'PRODUCTION',
});
```
4. [Check readiness to pay](https://developers.google.com/pay/api/web/guides/tutorial#isreadytopay) with Google Pay API
5. [Launch the Google Pay button](https://developers.google.com/pay/api/web/guides/tutorial#add-button)
6. [Create a PaymentDataRequest](https://developers.google.com/pay/api/web/guides/tutorial#paymentdatarequest) using the `baseRequest` object and append the top-level `transactionInfo` and `merchantInfo` objects. Your `PaymentDataRequest` should look like this:
```js
const paymentDataRequest = {
apiVersion: 2,
apiVersionMinor: 0,
merchantInfo: {
merchantId: '123456789123456789',
merchantName: 'Example Merchant',
},
transactionInfo: {
totalPriceStatus: 'FINAL',
totalPriceLabel: 'Total',
totalPrice: `${checkoutInfo.amount}`,
currencyCode: checkoutInfo.currency || 'EUR',
countryCode: 'DE',
},
allowedPaymentMethods: [
{
type: 'CARD',
parameters: {
allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
allowedCardNetworks: ['MASTERCARD', 'VISA'],
},
tokenizationSpecification: {
type: 'PAYMENT_GATEWAY',
parameters: {
gateway: 'sumup',
gatewayMerchantId: 'exampleGatewayMerchantId',
},
},
},
],
};
```
7. [Create a checkout](/api/checkouts/create) with SumUp
8. [Call the `loadPaymentData`](https://developers.google.com/pay/api/web/reference/client#loadPaymentData) method and pass it the `PaymentDataRequest` as an argument. This method will respond in a Promise, where if resolved you will receive a `PaymentData` object
9. [Process the checkout](/api/checkouts/process). The process checkout request body needs to include a `payment_type` of `google_pay` and a `google_pay` object, containing the response from the previous step
```json
{
"payment_type": "google_pay",
"id": "6te2da07-a7bd-4877-bc0a-e16cd909a876",
"amount": 12,
"currency": "EUR",
"google_pay": {
"apiVersionMinor": 0,
"apiVersion": 2,
"paymentMethodData": {
"description": "Visa •••• 1111",
"tokenizationData": {
"type": "PAYMENT_GATEWAY",
"token": "token-data"
},
"type": "CARD",
"info": {
"cardNetwork": "VISA",
"cardDetails": "1111"
}
}
}
}
```
## Troubleshooting
### Screenshots for Google
Google demands screenshots for the onboarding process, but you don't have the integration ready yet? Simply add `#sumup-widget:google-pay-demo-mode` to your URL to render the Google Pay button for onboarding purposes.
### Testing Google Pay Integration Locally
This is not possible at the moment. You need to use a staging environment and validate the test domain in Google API console.
### Error Decrypting Google Pay Token
An Internal Server Error that points to Google Pay token decryption can be caused by an environment mismatch. Make sure the `PaymentsClient` `environment` matches the Google Pay configuration used to create the payment data: use `TEST` for test flows and `PRODUCTION` for live payments.
```js
const paymentsClient = new google.payments.api.PaymentsClient({
environment: 'PRODUCTION',
});
```