如何在 React 中集成 GooglePay

2020-04-09 08:00:00 · 飞浪

介绍作为开发人员，您在开发电子商务应用程序时必须处理付款问题。幸运的是，已经有合法服务为您提供解决方案。您将在本指南中了解的一种值得信赖的解决方案是GooglePayAPI。 Goog

介绍

作为开发人员，您在开发电子商务应用程序时必须处理付款问题。幸运的是，已经有合法服务为您提供解决方案。您将在本指南中了解的一种值得信赖的解决方案是 Google Pay API。

Google Pay API 可让开发者轻松集成付款方式，为您的用户或客户提供简化、安全且保密的体验。

为何使用 Google Pay

在接受付款时，您可能会有一个结帐表单，用户可在此输入送货和信用卡详细信息。但您需要考虑以下几点：您的客户不记得信用卡或借记卡的 16 位数字、安全码或到期日期。他们可能不信任该网站，即使该网站具有 SSL 证书并且地址栏上有绿色锁。除此之外，您的用户还必须在每个电子商务应用程序上输入相同的详细信息。

这些因素可能会给用户在结账流程中带来不便，从而降低销售额。为了帮助您构建无缝且简单的结账流程，Google Pay API 可让您方便地访问用户保存在其 Google 帐户中的卡详细信息。这样，您的用户就不必手动将卡详细信息输入结账表单 - 您可以使用 Google Pay API 以编程方式获取它们。

加载 Google Pay API JavaScript 库

首先，将脚本标签添加到应用程序的index.html文件中以加载 Google Pay JavaScript 库。

      <script
  async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()"
></script>
    

初始化 Google Pay API

脚本加载完成后，立即构建PaymentsClient对象。首先在窗口对象中全局实例化客户端对象，稍后您将使用该对象从您的组件调用 Google Pay API。

      function onGooglePayLoaded() {
  window.googlePayClient = new google.payments.api.PaymentsClient({
    environment: "TEST"
  });
}
    

付款客户端使用PaymentOptions对象进行初始化。对于测试环境，您无需向 Google 注册。在测试环境中，Google 将授予访问真实卡详细信息的权限，但您无法向其收费。要启用实际付款，您需要向 Google 注册以获得生产访问权限。

配置付款方式

在App.js文件中，定义您的应用程序允许的卡网络和身份验证方法。

      const { googlePayClient } = window;

const baseCardPaymentMethod = {
  type: "CARD",
  parameters: {
    allowedCardNetworks: ["VISA", "MASTERCARD"],
    allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"]
  }
};
    

定义 API 版本

配置付款方式后，定义用于处理付款的 Google Pay API 版本，以及需要将baseCardPaymentMethod对象传递给的allowedPaymentMethods属性。

      const googlePayBaseConfiguration = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [baseCardPaymentMethod]
};
    

确定是否准备好使用 Google Pay 付款

现在已配置并定义了支付客户端，请检查 Google Pay API 是否已准备好进行付款。这还包括检查当前设备和浏览器是否支持该 API。

组件挂载后立即检查是否就绪。如果是类组件，请使用 componentDidMount ()生命周期方法；如果是函数组件，请使用useEffect钩子。

      function App() {
  // ...
  useEffect(() => {
    googlePayClient
      .isReadyToPay(googlePayBaseConfiguration)
      .then(res => {
        if (res.result) {
          createAndRenderPayButton();
        } else {
          alert("Unable to pay using Google Pay");
        }
      })
      .catch(function (err) {
        console.error("Error determining readiness to use Google Pay: ", err);
      });
  }, []);
  // ...
}
    

isReadyToPay ()方法将基本配置作为其参数并确定付款准备情况。由于它本质上是异步的，因此您需要将.then()和.catch()调用附加到它。如果响应成功，则向用户呈现 Google Pay 按钮。否则，显示替代付款方式作为后备。

添加使用 GPay 付款按钮

现在，当您知道用户已准备好付款时，请调用第二个 API createButton()。createButton()方法将返回使用 GPay 付款按钮 HTML 元素。您可以传递buttonColor和buttonType等选项来设置按钮样式，使其与您的整体网站颜色完美融合。您可以在此处找到有关选项的更多信息。

在组件的状态中设置按钮 HTML，以便可以使用dangerouslySetInnerHTML prop 通过 JSX 呈现它。

      // ...
const [gPayBtn, setGPayBtn] = useState(null);

function createAndAddButton() {
  if (googlePayClient) {
    const googlePayButton = googlePayClient.createButton({
      buttonColor: "default",

      buttonType: "long",

      onClick: processPayment
    });

    setGPayBtn(googlePayButton);
  }
}

return (
  <div className="App">
    <h1>Click the Pay button</h1>
    <div
      onClick={processPayment}
      dangerouslySetInnerHTML={{ __html: gPayBtn && gPayBtn.innerHTML }}
    />
  </div>
);
// ...
    

当点击按钮时，调用processPayment()，这将启动支付流程。

支付

将按钮添加到页面后，如果用户点击了 Google Pay 按钮，则调用 loadPaymentData ()方法打开 Google Pay 付款窗口。构建paymentDataRequest对象，其中包含一组将用于此特定交易的付款配置。

      function processPayment() {
  // ...
  googlePayClient
    .loadPaymentData(paymentDataRequest)
    .then(function (paymentData) {
      console.log(paymentData);
    })
    .catch(function (err) {
      console.log(err);
    });
}
    

除了付款凭证外，您还可以要求提供其他信息，例如电子邮件、电话号码、送货地址、账单地址等。

      const cardPaymentMethod = {
  type: "CARD",
  tokenizationSpecification: tokenizationSpecification,
  parameters: {
    allowedCardNetworks: ["VISA", "MASTERCARD"],
    allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
    billingAddressRequired: true,
    billingAddressParameters: {
      format: "FULL",
      phoneNumberRequired: true
    }
  }
};
    

交易和商家信息以及基本配置对象应包含在paymentDataRequest对象中。

      const transactionInfo = {
  totalPriceStatus: "FINAL",
  totalPrice: "123.45",
  currencyCode: "USD"
};

const merchantInfo = {
  // merchantId: '01234567890123456789', Only in PRODUCTION
  merchantName: "Your Merchant Name"
};

const paymentDataRequest = {
  ...googlePayBaseConfiguration,
  ...{
    allowedPaymentMethods: [cardPaymentMethod],
    transactionInfo,
    merchantInfo
  }
};
    

tokenizationSpecification是一个包含支付请求标记化参数的对象。在这里，您可以定义在应用程序中将使用哪个支付网关。

      const tokenizationSpecification = {
  type: "PAYMENT_GATEWAY",
  parameters: {
    gateway: "example",
    gatewayMerchantId: "gatewayMerchantId"
  }
};
    

在本指南中，您将使用 Stripe 处理器，但还有许多其他可用选项。

      const tokenizationSpecification = {
  type: "PAYMENT_GATEWAY",
  parameters: {
    gateway: "stripe",
    "stripe:version": "v3",
    "stripe:publishableKey": YOUR_STRIPE_PUBLISHABLE_KEY
  }
};
    

标记化规范定义了如何管理客户选择的付款方式以及如何使用它们来完成交易。构造请求对象后，将其传递给 loadPaymentData，这是一个异步调用，它将打开 Google 付款表。用户做出选择后，Google 将返回一个paymentData对象，其中包含有关用户选择的元数据。它包括付款令牌，您可以使用它来完成交易。此时，您已完成所有必需步骤，您的交易已准备好完成。

要了解有关处理卡令牌的更多信息，请查看此Stripe 集成指南。

完整源代码

下面您可以找到完整的代码供您参考。

      import React, { useState, useEffect } from "react";
import "./styles.css";

const { googlePayClient } = window;

const baseCardPaymentMethod = {
  type: "CARD",
  parameters: {
    allowedCardNetworks: ["VISA", "MASTERCARD"],
    allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"]
  }
};

const googlePayBaseConfiguration = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [baseCardPaymentMethod]
};

export default function App() {
  const [gPayBtn, setGPayBtn] = useState(null);

  function createAndAddButton() {
    if (googlePayClient) {

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在 React 中集成 GooglePay

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

const { googlePayClient } = window; const baseCardPaymentMethod = { type: "CARD", parameters: { allowedCardNetworks: ["VISA", "MASTERCARD"], allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"] } };

function App() { // ... useEffect(() => { googlePayClient .isReadyToPay(googlePayBaseConfiguration) .then(res => { if (res.result) { createAndRenderPayButton(); } else { alert("Unable to pay using Google Pay"); } }) .catch(function (err) { console.error("Error determining readiness to use Google Pay: ", err); }); }, []); // ... }

// ... const [gPayBtn, setGPayBtn] = useState(null); function createAndAddButton() { if (googlePayClient) { const googlePayButton = googlePayClient.createButton({ buttonColor: "default", buttonType: "long", onClick: processPayment }); setGPayBtn(googlePayButton); } } return ( <div className="App"> <h1>Click the Pay button</h1> <div onClick={processPayment} dangerouslySetInnerHTML={{ __html: gPayBtn && gPayBtn.innerHTML }} /> </div> ); // ...

function processPayment() { // ... googlePayClient .loadPaymentData(paymentDataRequest) .then(function (paymentData) { console.log(paymentData); }) .catch(function (err) { console.log(err); }); }

const cardPaymentMethod = { type: "CARD", tokenizationSpecification: tokenizationSpecification, parameters: { allowedCardNetworks: ["VISA", "MASTERCARD"], allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"], billingAddressRequired: true, billingAddressParameters: { format: "FULL", phoneNumberRequired: true } } };

const transactionInfo = { totalPriceStatus: "FINAL", totalPrice: "123.45", currencyCode: "USD" }; const merchantInfo = { // merchantId: '01234567890123456789', Only in PRODUCTION merchantName: "Your Merchant Name" }; const paymentDataRequest = { ...googlePayBaseConfiguration, ...{ allowedPaymentMethods: [cardPaymentMethod], transactionInfo, merchantInfo } };

const tokenizationSpecification = { type: "PAYMENT_GATEWAY", parameters: { gateway: "stripe", "stripe:version": "v3", "stripe:publishableKey": YOUR_STRIPE_PUBLISHABLE_KEY } };

import React, { useState, useEffect } from "react"; import "./styles.css"; const { googlePayClient } = window; const baseCardPaymentMethod = { type: "CARD", parameters: { allowedCardNetworks: ["VISA", "MASTERCARD"], allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"] } }; const googlePayBaseConfiguration = { apiVersion: 2, apiVersionMinor: 0, allowedPaymentMethods: [baseCardPaymentMethod] }; export default function App() { const [gPayBtn, setGPayBtn] = useState(null); function createAndAddButton() { if (googlePayClient) {