Skip to content
SumUp Developer

Google Pay Integration Guide

In this guide, you will learn how to directly integrate Google Pay with SumUp. This payment method is also available via the SumUp Payment Widget.

Prerequisites

Section titled “Prerequisites”
  • You have a merchant profile with SumUp and have already filled in your profile details.
  • If you want to test payments without involving real funds, create a test profile.
  • Review Google Pay API terms of service.
  • 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, which covers the requirements you’re expected to follow in order to successfully offer this payment method.
Screenshot of the dashboard Developer Settings, showing Payment wallets section that includes Apple Pay and Google Pay
Screenshot of the dashboard Developer Settings, showing Payment wallets section that includes Apple Pay and Google Pay

Accepting Google Pay Payments With SumUp

Section titled “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 with the following keys:
    • merchantId- unique identifier provided to you by Google once you register your domain with them
    • merchantName- your merchant name
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',
        },
      },
    },
  ],
};
  1. Load the Google Pay API JavaScript library on the web page you will offer this payment method
  2. Initialize a PaymentsClient object for the environment you are implementing
const paymentsClient = new google.payments.api.PaymentsClient({
  environment: 'TEST',
});
  1. Check readiness to pay with Google Pay API
  2. Launch the Google Pay button
  3. Create a PaymentDataRequest using the baseRequest object and append the transactionInfo and merchantInfo objects. Your PaymentDataRequest should look like this:
const paymentDataRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  merchantInfo: {
    merchantName: 'Example Merchant',
  },
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
        allowedCardNetworks: ['MASTERCARD', 'VISA'],
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'sumup',
          gatewayMerchantId: 'exampleGatewayMerchantId',
        },
      },
      merchantInfo: {
        merchantId: 'your_merchant_id',
        merchantName: 'your_merchant_name',
      },
      transactionInfo: {
        totalPriceStatus: 'FINAL',
        totalPriceLabel: 'Total',
        totalPrice: `${checkoutInfo.amount}`,
        currencyCode: checkoutInfo.currency || 'EUR',
        countryCode: 'DE',
      },
    },
  ],
};
  1. Create a checkout with SumUp
  2. Call the 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
  3. Process the checkout. 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
{
  "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"
      }
    }
  }
}