ReactJS:Stripe Google 和 Apple Pay

Question

我在我的 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 文档，但不确定如何继续。谁能给我一些关于如何将其集成到应用程序中的建议？

Answer 1

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

需要注意的重要一点是，仅当您使用 https 提供页面时才会显示接受 Google Pay 或 Apple Pay 的选项。您可以使用 ngrok 来测试这一点。

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

快速入门(选择自定义付款流程):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