ReactJS:Stripe Google 和 Apple Pay

ReactJS: Stripe Google and Apple Pay

我在我的 ReactJS 应用程序中使用@stripe/react-stripe-js。

我的支付码:

import React from 'react';
import {CardElement} from '@stripe/react-stripe-js';

const CARD_ELEMENT_OPTIONS = {
  style: {
    base: {
      'color': '#32325d',
      'fontFamily': 'inherit',
      'fontSmoothing': 'antialiased',
      'fontSize': '16px',
      '::placeholder': {
        color: '#aab7c4',
      },
    },
    invalid: {
      color: '#fa755a',
      iconColor: '#fa755a',
    },
  },
};

export default function CardInput() {
  return (
    <>
    <CardElement options={CARD_ELEMENT_OPTIONS} />
    </>
  );
}

这使卡支付表单正常,但我不确定如何通过 Google 或 Apple Pay 添加结帐选项。我已阅读 Stripe 文档但不确定如何继续。谁能就如何将其集成到应用程序中给我一些建议?

Card Element 不提供接受 Google Pay 或 Apple Pay 的选项。如果您想使用电子钱包接受银行卡付款,您可以切换到使用付款元素,或单独实施付款请求按钮。

需要注意的重要一点是,接受 Google Pay 或 Apple Pay 的选项仅在您使用 https 提供页面时显示。您可以使用 ngrok 进行测试。

支付元素和卡元素比较:https://stripe.com/docs/payments/payment-card-element-comparison

快速入门(select自定义支付流程):https://stripe.com/docs/payments/quickstart

接受付款:https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements&html-or-react=react#apple-pay-and-google-pay

付款请求按钮:https://stripe.com/docs/stripe-js/elements/payment-request-button?html-or-react=react