如何在 stripe.js 中添加 paypal 和 google pay 作为客户付款方式

Question

在 Rails 应用程序中，我集成了 Stripe API。在前端部分

stripe.js

库被导入并用于保存/删除客户付款方式：

const stripe_key = 'pk_test_xxx';
const stripe = Stripe(stripe_key);

var elements = stripe.elements();
const paymentMethod = elements.create("card", { hidePostalCode: true })

当用户输入有效的卡数据时，我会生成令牌，该令牌发送到 Rails 后端并转发到 Stripe API，以便将其保存为客户付款方式：

 document.getElementById('submitBtn').addEventListener('click', async function(event) {
            event.preventDefault();

            const { token, error } = await stripe.createToken(paymentMethod);

            console.log(token, error)

            fetch('http://localhost:3000/api/v2/payment_methods', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${bearerToken}`
                },
                body: JSON.stringify({ 
                    token: token.id,
                    is_default_payment_method: document.getElementById('set_as_default').checked
                })
            }).then(function(response) {
                if (response.ok) {
                    // Payment method saved successfully
                } else {
                    // Failed to save payment method
                }
            }).catch(function(error) {
                console.error('Error:', error);
            });
        });  

现在我想知道是否可以添加 paypal 或 google pay 等付款方式。在文档中找不到这些类型https://docs.stripe.com/js/elements_object/create_element?type=card

Answer 1

您可以在此处查看卡元素和付款元素之间的比较：https://docs.stripe.com/ payments/ payment-card-element-comparison

Card Element 仅支持接受银行卡，不接受使用钱包的银行卡支付（例如 Apple Pay、Google Pay）。

如果您想接受其他付款方式类型，您应该使用付款元素，它允许您通过一次集成接受多种付款方式。您可以在这里查看指南：

• https://docs.stripe.com/ payments/accept-a- payment?platform=web&ui=elements
• https://docs.stripe.com/ payments/accept-a- payment-deferred
• https://docs.stripe.com/ payments/quickstart

如果您不想使用付款元素，可以考虑将快速结账元素（将钱包显示为付款方式选项）与卡元素集成：https://docs.stripe.com/elements/快速结帐元素/接受付款

此外，令牌是一个遗留 API。令牌不支持许多新功能，例如强客户身份验证（例如 3DS）。您确实应该使用 PaymentMethods。