准备就绪的Google Pay客户模块

同志们，我要介绍一个现成的JavaScript模块，用于使用Google Pay付款。 该模块涉及在现代开发环境中将npm与export-import结合使用，但是，我认为想要干净的ES5的人可以轻松地重做它。

链接到模块 。 该代码具有必要的文档和注释。 我将在这里给出一些解释。



我必须说，付款按钮上的Google文档并非最简单，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(); }); } 

这里没什么复杂的。 在选项中，我们传递两个参数-googleBaseCardPaymentMethod和environment。

googleBaseCardPaymentMethod是一个对象，该对象列出了付款类型和参数（ 此处提供了有关搜索的更多详细信息）。 如果未设置，则在代码中调用标准setter，将一个典型对象返回给我们：

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

环境是环境，生产还是测试

在成功回调的调用上，我们实际上绘制（或显示已经绘制）按钮。 这是您的选择。 请记住，Google需要匹配其指南 。

2.加工

要显示Google Pay按钮，您的浏览器的API创建了paymentsClient对象，该对象现在与其他参数一起需要传递给处理函数。 让我们看一下其他参数：

googleBaseCardPaymentMethod-参见上文
googlePayPublicKey，merc_id，merc_name-要成功使用Google Pay，您必须具有注册商家。 它的参数我们得到了支持。

此外，我们还会传输成功和失败回调以及付款数据（请参见下文）。

因此，要进行付款，我们必须采用先前创建的paymentsClient对象，并使用paymentDataRequest对象调用loadPaymentData方法： 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提供了自己的商人信息对象。 它需要与示例中编写的商人ID一起使用， 商人名不重要。

另外，我们需要一个令牌对象：

 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付款。 在此请求中，我们将需要传输来自Google的googleToken以及公共密钥。

就是这样，我们的Google Pay付款已在背面处理后完成！