* Define the version of the Google Pay API referenced when creating your
* @see {@link https://developers.google.com/pay/api/web/reference/object#PaymentDataRequest|apiVersion in PaymentDataRequest}
var allowedCardNetworks = [‘MASTERCARD’, ‘VISA’];
// CRYPTOGRAM_3DS – Payment only if Google Pay is available on the device. It is a more secure way. Currently works only in Chrome browser on Android.
// PAN_ONLY – Payment by card data from Google account. Available in most modern browsers.
//You can use both methods, or any one of them.
Var allowedCardAuthMethods = [“PAN_ONLY”,’CRYPTOGRAM_3DS’];
var tokenizationSpecification = {
gatewayMerchantId: ‘ваш Id в системе Payler’,
* Describe your site’s support for the CARD payment method and its required
* @see {@link https://developers.google.com/pay/api/web/reference/object#CardParameters|CardParameters}
var baseCardPaymentMethod = {
allowedAuthMethods: allowedCardAuthMethods,
allowedCardNetworks: allowedCardNetworks,
* Describe your site’s support for the CARD payment method including optional
* @see {@link https://developers.google.com/pay/api/web/reference/object#CardParameters|CardParameters}
var cardPaymentMethod = Object.assign({}, baseCardPaymentMethod, {
tokenizationSpecification: tokenizationSpecification,
var paymentsClient = null;
* Configure your site’s support for payment methods supported by the Google Pay
* Each member of allowedPaymentMethods should contain only the required fields,
* allowing reuse of this base request when determining a viewer’s ability
* to pay and later requesting a supported payment method
* @returns {object} Google Pay API version, payment methods supported by the site
function getGoogleIsReadyToPayRequest() {
return Object.assign({}, baseRequest, {
allowedPaymentMethods: [baseCardPaymentMethod],
* Configure support for the Google Pay API
* @see {@link https://developers.google.com/pay/api/web/reference/object#PaymentDataRequest|PaymentDataRequest}
* @returns {object} PaymentDataRequest fields
function getGooglePaymentDataRequest() {
var paymentDataRequest = Object.assign({}, baseRequest);
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
paymentDataRequest.merchantInfo = {
// @todo a merchant ID is available for a production environment after approval by Google
// See {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist|Integration checklist}
merchantId: ‘Ваш Id GooglePay’,
merchantName: ‘Ваше наименование,
return paymentDataRequest;
* Return an active PaymentsClient or initialize
* @see {@link https://developers.google.com/pay/api/web/reference/client#PaymentsClient|PaymentsClient constructor}
* @returns {google.payments.api.PaymentsClient} Google Pay API client
function getGooglePaymentsClient() {
if (paymentsClient === null) {
paymentsClient = new google.payments.api.PaymentsClient({
environment: ‘TEST’, // For product environment PRODUCTION
* Initialize Google PaymentsClient after Google-hosted JavaScript has loaded
* Display a Google Pay payment button after confirmation of the viewer’s
function onGooglePayLoaded() {
var paymentsClient = getGooglePaymentsClient();
.isReadyToPay(getGoogleIsReadyToPayRequest())
.then(function(response) {
// @todo prefetch payment data to improve performance after confirming site functionality
// prefetchGooglePaymentData();
// show error in developer console for debugging
* Add a Google Pay purchase button alongside an existing checkout button
* @see {@link https://developers.google.com/pay/api/web/reference/object#ButtonOptions|Button options}
* @see {@link https://developers.google.com/pay/api/web/guides/brand-guidelines|Google Pay brand guidelines}
function addGooglePayButton() {
var paymentsClient = getGooglePaymentsClient();
var button = paymentsClient.createButton({onClick: onGooglePaymentButtonClicked});
var changeBlock = document.querySelector(‘.change-js’);
document.getElementById(‘container’).appendChild(button);
changeBlock.style.display = ‘block’;
* Provide Google Pay API with a payment amount, currency, and amount status
* @see {@link https://developers.google.com/pay/api/web/reference/object#TransactionInfo|TransactionInfo}
* @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
function getGoogleTransactionInfo() {
currencyCode: ‘RUB’, //Currency of payment
totalPriceStatus: ‘FINAL’,
totalPrice: ‘11.20’, //Amount of payment
* Prefetch payment data to improve performance
* @see {@link https://developers.google.com/pay/api/web/reference/client#prefetchPaymentData|prefetchPaymentData()}
function prefetchGooglePaymentData() {
var paymentDataRequest = getGooglePaymentDataRequest();
// transactionInfo must be set but does not affect cache
paymentDataRequest.transactionInfo = {
totalPriceStatus: ‘NOT_CURRENTLY_KNOWN’,
var paymentsClient = getGooglePaymentsClient();
paymentsClient.prefetchPaymentData(paymentDataRequest);
* Show Google Pay payment sheet when Google Pay payment button is clicked
function onGooglePaymentButtonClicked() {
var paymentDataRequest = getGooglePaymentDataRequest();
paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
var paymentsClient = getGooglePaymentsClient();
.loadPaymentData(paymentDataRequest)
.then(function(paymentData) {
processPayment(paymentData);
// show error in developer console for debugging
function sendPaymentData(paymentToken) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var data = JSON.parse(this.responseText);
‘https:/secure.payler.com/gapi/GooglePay?session_id=’ + // https:/secure.payler.com for test environment
encodeURIComponent(window.params_payler.session_id) +
encodeURIComponent(paymentToken)
* Process payment data returned by the Google Pay API
* @param {object} paymentData response from Google Pay API after user approves payment
* @see {@link https://developers.google.com/pay/api/web/reference/object#PaymentData|PaymentData object reference}
function processPayment(paymentData) {
// show returned data in developer console for debugging
// console.log(paymentData);
// @todo pass payment token to your gateway to process payment
paymentToken = paymentData.paymentMethodData.tokenizationData.token;
var promise = sendPaymentData(paymentToken);
promise.then(function(response) {
// console.log(response.error);