Google Pay Integration Guide

In this guide you will find the steps for a direct integration of Google Pay. This payment method is also available via the SumUp Payment Widget.

Before you begin

Here are the things that you need in order to complete the steps in this guide:

• You have a merchant profile with SumUp and have already filled in your profile details
• For a test profile reach out to our support team through this contact form
• Review Google Pay API terms of service
• Validate your domain with Google here

How to validate your domain with Google

In order to use Google Pay you need to validate your domain with Google. This process requires rendering a non-functional Google Pay button on your website and providing them with screenshots of your buyflow.

To validate your domain with Google, follow these steps:

1. Create an account in the Google Pay console
2. Go to the Google Pay API tab in your Google Pay console
3. Navigate to the Integrate with your website and click on + Add website
4. Fill out the form with the requested information (domain name, buyflow screenshots, etc.)
5. At the top of the page click on Submit for approval

Steps

Google's Google Pay for Payments documentation covers the requirements you're expected to follow in order to successfully offer this payment method. Considering you've adhered to the aforementioned requirements from the tutorial, 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',
        },
      },
    },
  ],
};

2. Load the Google Pay API JavaScript library on the web page you will offer this payment method
3. Initialize a PaymentsClient object for the environment you are implementing

const paymentsClient = new google.payments.api.PaymentsClient({
  environment: 'TEST',
});

4. Check readiness to pay with Google Pay API
5. Launch the Google Pay button
6. 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',
      },
    },
  ],
};

7. Create a checkout with SumUp
8. 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
9. 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"
      }
    }
  }
}