用于 React js 项目的 Google Pay 支付网关 - Javascript

简介

Google Pay 是 Google 推出的一项支付服务，允许用户在各种应用和网站中用他们已经存储的支付信息进行付款。这篇文章将介绍如何在 React.js 项目中使用 Google Pay 支付网关。

关键步骤

1. 导入 Google Pay API

在 HTML 文件中导入 Google Pay API：

<script src="https://pay.google.com/gp/p/js/pay.js"></script>

2. 创建 Google Pay 付款数据

使用 JavaScript 创建 Google Pay 付款数据，这将告诉 Google Pay 应用程序要向谁支付多少钱。

const paymentDataRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
        allowedCardNetworks: ['AMEX', 'DISCOVER', 'INTERAC', 'JCB', 'MASTERCARD', 'VISA'],
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'your_payment_gateway',
          gatewayMerchantId: 'your_merchant_id',
        },
      },
    },
  ],
  merchantInfo: {
    merchantName: 'your_merchant_name',
    merchantId: 'your_merchant_id',
    merchantOrigin: 'your_merchant_origin',
  },
  transactionInfo: {
    totalPriceStatus: 'FINAL',
    totalPrice: '10.00',
    currencyCode: 'USD',
  },
};

3. 注册 Google Pay 付款按钮

在 React 组件中创建 Google Pay 付款按钮：

class GooglePayButton extends React.Component {
  componentDidMount() {
    const { isReadyToPay, paymentDataRequest } = this.props;
    const googlePayButton = this.createGooglePayButton();
    googlePayButton.addEventListener('click', () => {
      const paymentDataRequestJSON = JSON.stringify(paymentDataRequest);
      const paymentOptions = {
        checkoutOption: 'COMPLETE_IMMEDIATE_PURCHASE',
      };
      const paymentData = google.payments.api.PaymentData.fromJson(paymentDataRequestJSON);
      const paymentDataPromise = google.payments.api.PaymentsClient.loadPaymentData(paymentData);
      paymentDataPromise.then((paymentData) => {
        // Handle the payment data
      }).catch((err) => {
        console.error('Failed to load payment data', err);
      });
    });
    googlePayButton.setAttribute('disabled', !isReadyToPay);
  }

  createGooglePayButton() {
    const { buttonColor, buttonType } = this.props;
    const googlePayButton = google.payments.api.button.createButton({
      buttonColor: buttonColor || google.payments.api.ButtonColor.DEFAULT,
      buttonType: buttonType || google.payments.api.ButtonType.BUY,
    });
    this.div.appendChild(googlePayButton);
    return googlePayButton;
  }

  render() {
    return <div ref={(ref) => { this.div = ref }} />;
  }
}

4. 完成 Google Pay 付款流程

当用户点击 Google Pay 付款按钮时，将出现一个弹出窗口，要求用户选择他们的支付方式和交付信息。一旦用户确认，Google Pay 应用程序将生成一个标记，该标记可以被你的服务器用来处理交易。

总结

本文提供了一个使用 React.js 框架和 Google Pay API 的示例，可以让您轻松地在您的 web 应用程序中接受支付。通过我们的步骤和代码，您可以构建一个流畅的用户体验，包括交付信息和支付方式的无缝选择，以及在计算机和移动设备上支持的 Google Pay 应用程序。