Готовый клиентский модуль Google Pay

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

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

Надо сказать, что гугловская документация именно по платёжной кнопке оказалось не самая простая, список ошибок, возвращаемых 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 — это объект, в котором перечислены платёжные типы и параметры (подробнее здесь ^[2] по поиску allowed). Если он не задан, мы в коде вызываем стандартный сеттер, возвращающий нам типовой объект:

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

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

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

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
        }
    };

→ Подробнее о параметрах читать тут ^[4]

Далее, когда объект сформирован, с помощью метода 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 после обработки на бэке состоялся!

Автор: botyaslonim

Источник ^[5]