Skip to content

Google Pay on own checkout page

If you want to accept payments with the Google Pay button on your own checkout, follow the steps below:

  1. Register your website in Google Pay Business Console. Review and adhere to Google Pay policies and terms of service and refer to Google Pay Brand Guidelines to display the Google Pay button correctly.

  2. Choose and implement one of the integration options:

Registration with Google Pay Business Console

Before you start accepting Google Pay payments in production mode, register your website with Google Pay Business Console and get your payment flow confirmed by Google.

For that, follow the steps below:

  1. Log in to Google Pay Business Console.
  2. Select Google Pay API on the sidebar.
  3. Select Add website in the Integrate with your website block.
  4. Fill in the registration form. Upload the screenshots of Google Pay payment flow implemented on your website.

Google Pay for websites using bePaid library

To accept Google Pay payments on your website, you can use the library developed by bePaid. It is compatible with the parameters and properties of the payment widget library.

Follow the steps below:

1. Install the script for connecting the library on your website:

<script type="text/javascript" src="https://js.bepaid.by/widget/google_pay.js"></script>

2. Place a frame on the page where the Google Pay button should appear:

<div id="google-pay-button">
  <div id="google-pay" onclick="pay()" class="google-pay-button-with-text" lang="en-US"></div>
</div>

3. Add the following JavaScript-code to start Google Pay payment processing. Payment requests will be sent automatically:

<script>
var params = {
  checkout_url: 'https://checkout.bepaid.by',
  google_pay: {
    google_pay_merchant_id: 'IDFROMGOOGLECONSOLE',
  },
  googlePayContainerId: 'google-pay-button',
  supportedNetworks: ['visa', 'masterCard'],
  token: '3241e439f8c87d941d92621a4bdc030d4c9a69c67f3b0cfe12de4a13cc34aa51'
}
const googlePay = new GooglePay(params);
this.pay = googlePay.pay;
</script>
Parameter Type Description
checkout_url * required
 string https://checkout.bepaid.by
google_pay_merchant_id Google merchant identifier issued after registration with Google Pay Business Console.
googlePayContainerId ID of the container where Google Pay button will be appended.
supportedNetworks * required
 array visa, masterCard
token * required
 string To get a token, make a request described on the Payment token page.
public_key * conditionally required
 string Shop public key. Required if the token parameter is not sent.

Google Pay for websites using Google Pay API

To integrate Google Pay on your websites using Google Pay API, follow the steps below:

1. Get the payment method token from Google Pay with the following parameters used in Steps 2 - 4 of Google Pay API Tutorial:

Parameter Type Description
type * required
 string payment_gateway
gateway * required
 string {psp.google_pay.gateway_id}
gatewayMerchantId * required
 string Shop ID in the bePaid system.
allowedCardNetworks * required
 array visa, masterCard
allowedCardAuthMethods * required
 array PAN_ONLY, CRYPTOGRAM_3DS
BillingAddressParameters object Billing address parameters are not necessary for processing via bePaid Gateway API.
Example of the request parameters 
const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0
};

const tokenizationSpecification = {
  type: 'payment_gateway',
  parameters: {
    'gateway': '{psp.google_pay.gateway_id}',
    'gatewayMerchantId': 'exampleGatewayMerchantId'
  }
};

const allowedCardNetworks = ["MASTERCARD", "VISA"];

const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];
Example of the response for Google Pay API version 2.0 for a card payment 
{
  "apiVersion": 2,
  "apiVersionMinor": 0,
  "paymentMethodData": {
    "type": "CARD",
    "description": "Visa •••• 1234",
    "info": {
      "cardNetwork": "VISA",
      "cardDetails": "1234"
    },
    "tokenizationData": {
      "type": "PAYMENT_GATEWAY",
      "token": "examplePaymentMethodToken"
    }
  }
}

Request

2. Send the payment, authorization or charge request, where you should submit the encrypted Google Pay token as the value of request.credit_card.token in the format described below.

The required format of the encrypted Google Pay token sent as the card token

Submit the encrypted Google Pay token in requests as the card token in the $begateway_google_pay_1_0_0$<base64_PaymentToken_here> format, where:

  • $begateway_google_pay_1_0_0$ is the required prefix for the encrypted Google Pay token;
  • <base64_PaymentToken_here> is the received Google Pay token (paymentMethodData.tokenizationData.token for Google Pay API version 2.0) in the JSON format converted to the Base64-strict format.

For recurring payments and payments with the saved card data, get the bePaid payment token by sending the request.additional_data.contract parameter in the payment, authorization or charge requests.

Example of the payment request with the encrypted Google Pay token 
{
  "request": {
    "amount": 100,
    "currency": "USD",
    "description": "Google Pay test transaction",
    "tracking_id": "your_uniq_number",
    "credit_card": {
      "token": "$begateway_google_pay_1_0_0$eyJzaWduYXR1cmUiOiJNRVlDSVFES2R2dFlEVFdNemh1MVhNanNTdlgxZzJFek1hdFN5Z3J3QVU0cFpyd2tnUUloQUlEMzRtUGdMa1pRU1ZvbUptSjNyM3NKZ1ZveFc5eVpIUnR6QkVjOVZiTHIiLCJpbnRlcm1lZGlhdGVTaWduaW5nS2V5Ijp7InNpZ25lZEtleSI6IntcImtleVZhbHVlXCI6XCJNRmt3RXdZSEtvWkl6ajBDQVFZSUtvWkl6ajBEQVFjRFFnQUV5cUdEYUxLN3lvVWJGWVRFWnQzaHhPTTlPckZacFUyenJJTXJ3WWhuV25HbksraDkvWWFHNllnczBUcWp0eGhFcExDUVl1RVpuTFM5S3RlN0xWRlJaUVxcdTAwM2RcXHUwMDNkXCIsXCJrZXlFeHBpcmF0aW9uXCI6XCIxNTk4NDg4NzUxMTg5XCJ9Iiwic2lnbmF0dXJlcyI6WyJNRVFDSUJmRWdXVmtxN0FtSlp2WmhpQ3hKazBPNUV6Z042NWt4dXZmb2dSM3YxT1dBaUFnd1VnMXZuWGFlK2JXM0NtbWhvRFEvTFFIcG9leUZINFNGQk9jOXBVeS93XFx1MDAzZFxcdTAwM2QiXX0sInByb3RvY29sVmVyc2lvbiI6IkVDdjIiLCJzaWduZWRNZXNzYWdlIjoie1wiZW5jcnlwdGVkTWVzc2FnZVwiOlwiY1BkQmZwbjJpa3dSSThVYWIzQTIrM0lIVitQMEZSMlFzbjNwTG9FK2NYeTZiMnE4V2R4S1gyWi9QY3M4b3JMc0toL2FsT05HZmE1RzJmMkVTK0xjNWVEWnc0YlN5aXFUb09XK2NkQjVLNFNSUUVFSkV2WitoanVvUmVINU8zakZxUXhNYk44V3V5aXlrMzlUQnZyUmQ4MXptNEEvOVkrOEdFU1NDNVhSRUd1Skk1Y2VoRzZKUDZBVnArUnpmZVAzM09INTd1dWlVdldYamsvQXZUb0VmUXprTDM3ZUJKdFI0eWRTWnhNam9zcFN5cU5CenlKZDk3RDNydkZMRmdoZGdrQ1ozMEZRbDc4NGdBelpQVVhkVDBMNW5WZnFXNGxZMHU3VTdiRGxNekxYdWErcTdZU2JQOWFtN0Z0Y2F2LzFKUjBvM1Q2clYzR1ZDdjQ1Q3lQclI1NkN0aU4xZUdONmxsUlRuTDhVMVdZY2JOQWJLQlRkTnhKTlljN2FMQTZCaUYwc01LQWdid2ltK2U5UWR2UzV6ZDJwcVJ1ZTJiYkRsVnBsdSs3ZE1WMWlJTVpVQ3JYRHFROHE3RzQvK3lLWmp6dHk1RDlYS29aSVZzeXFOUFlQTnJaRDdJQ0w5QVxcdTAwM2RcXHUwMDNkIiwiZXBoZW1lcmFsUHVibGljS2V5IjoiQklpOTRmUUhGV0NVVWYrWms0cHdLWEJXTlc5a0d5WTlJQkJrb3ZqZS9kNkJULzZaMjdTeURueFFGS0xOTWRtaUZZcXhkRko3clNkeTRqMTMrNTM3cTRJXFx1MDAzZCIsInRhZyI6InpwZXQ1SHVmbk01WXJOWHdQSjRQQ1lBWU1MeG4vMzNZaDkzNzhLZU1Ba3dcXHUwMDNkIn0ifQ=="
    }
  }
}

Info

In the Google Pay Server Demos project you can also find a JavaScript sample code of a payment request with the Google Pay token to the bePaid system. Besides, you can use this project to test the Google Pay integration.

Response

The response to the payment request with Google Pay token will be returned with transaction processing statuses. It fully matches the responses to payment or authorization requests.