Товарищи, представляю готовый модуль JavaScript для осуществления платежей с помощью Google Pay. Модуль предполагает использование в современной среде разработки npm с экспортами-импортами, однако, те, кто хочет чистого ES5, думаю, без труда смогут его переделать.

Ссылка на модуль. В коде есть нужная документация и комментарии. Здесь дам некоторые пояснения.



Надо сказать, что гугловская документация именно по платёжной кнопке оказалось не самая простая, список ошибок, возвращаемых Google Pay API, тоже не самый полный. Поэтому, в отличие от работы с ApplePay, с Google Pay пришлось чуть-чуть почертыхаться, прежде чем модуль действительно заработал.

Работа состоит из двух этапов: сначала мы должны принять решение, показывать или нет кнопку (не все браузеры поддерживают Google Pay), а потом выполнить сам платёжный процессинг.

1. Показ кнопки

export function showGooglePayButton(options, callbacks) {
    // проверка параметров
    const check = checkParams("showGooglePayButton", options, callbacks);
    if (!check) {
        return false;
    } else {
        options = check.options;
    }

    const paymentsClient = new google.payments.api.PaymentsClient({environment: options.environment});
    // в приложении запоминаем экземпляр платёжного клиента, который создало API
    callbacks.setPaymentClient(paymentsClient);
    const request = {
        apiVersion: 2,
        apiVersionMinor: 0,
        allowedPaymentMethods: [options.googleBaseCardPaymentMethod]
    };
    paymentsClient.isReadyToPay(request)
        .then(function(response) {
            if (response.result) {
                callbacks.success();
                return true;
            } else {
                console.log("Запрос на показ кнопки Google Pay закончился неудачно");
                callbacks.fail();
            }
        })
        .catch(function(err) {
            console.log("showGooglePayButton ERROR");
            callbacks.fail();
        });
}

Тут ничего сложного. В options мы передаём два параметра — googleBaseCardPaymentMethod и environment.

googleBaseCardPaymentMethod — это объект, в котором перечислены платёжные типы и параметры (подробнее здесь по поиску allowed). Если он не задан, мы в коде вызываем стандартный сеттер, возвращающий нам типовой объект:

const setGoogleBaseCardPaymentMethod = () => {
    return {
        type: "CARD",
        parameters: {
            allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
            allowedCardNetworks: ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"]
        }
    }
};

environment — это окружение, PRODUCTION или TEST

На вызове коллбэка success мы собственно отрисовываем (либо показываем уже отрисованную) кнопку. Это на ваш выбор. Помните только, что Google требует соответствия его гайдам.

2. Процессинг

Для показа кнопки Google Pay API вашего браузера создало объект paymentsClient, который теперь вместе с другими параметрами нужно передать в функцию процессинга. Посмотрим на другие параметры:

googleBaseCardPaymentMethod — см. выше
googlePayPublicKey, merc_id, merc_name — для успешной работы с Google Pay у вас должен быть зарегистрированный merchant. Его параметры мы получаем то бэка.

Кроме того, мы передаём коллбэки success и fail, а также данные для осуществления платежа (см. ниже).

Итак, для осуществления платежа мы должны взять ранее созданный объект paymentsClient и вызвать у него метод loadPaymentData с объектом paymentDataRequest: const paymentDataRequest = getGooglePaymentDataRequest():

const getGooglePaymentDataRequest = () => {
        const cardPaymentMethod = Object.assign(
            {},
            baseMethod,
            {
                tokenizationSpecification: token
            }
        );

        const paymentDataRequest = {
            apiVersion: 2,
            apiVersionMinor: 0,
            allowedPaymentMethods : [cardPaymentMethod],
            /* for demo (enviroment TEST):
                merchantInfo : {
                    merchantId: '12345678901234567890',
                    merchantName: 'JOHN SMITH'
                },
            */
            /* for prod (enviroment PRODUCTION):
                merchantInfo : {
                    merchantId: options.merc_id,
                    merchantName: options.merc_name
                },
            */
            merchantInfo : {
                merchantId: options.merc_id,
                merchantName: options.merc_name
            },
            transactionInfo : {
                currencyCode: options.currency,
                totalPriceStatus: 'FINAL',
                totalPrice: "" + options.sum
            }
        };

        return paymentDataRequest;
    };

Для тестовой среды Google предлагает свой объект merchantInfo. Его нужно использовать именно с тем merchantId, который записан в примере, merchantName не существенно.

Кроме того, нам нужен объект token:

const token = {
        /* for demo (enviroment TEST):
            parameters: {
                "protocolVersion": "ECv1",
                "publicKey": yourTestPublicKey
            }
        */
        /* for prod (enviroment PRODUCTION):
            parameters: {
                "protocolVersion": "ECv1",
                "publicKey": params.googlePayPublicKey
            }
        */
        type: 'DIRECT',
        parameters: {
            "protocolVersion": "ECv1",
            "publicKey": options.googlePayPublicKey
        }
    };

> Подробнее о параметрах читать тут

Далее, когда объект сформирован, с помощью метода loadPaymentData посылается запрос на сервер Google, открывается фрейм с сохранёнными картами, после завершения операции фрейм закрывается:

 paymentsClient.loadPaymentData(paymentDataRequest)
        .then(function(paymentData) {
            const googleToken = JSON.parse(paymentData.paymentMethodData.tokenizationData.token);
// your own client-back ajax request here

}

После успешного выполнения метода (то есть вызова сохранённых карт и прохождения верификации) мы можем делать AJAX-запрос на собственный бэк с целью провести платёж с помощью Google Pay. В этом запросе нам нужно будет обязательно передать пришедший от Гугла googleToken, а также публичный ключ.

Всё, наш платёж Google Pay после обработки на бэке состоялся!