javascript - 如何在客户端正确使用 Stripe api 保存卡

Question

我目前正在使用 Stripe API。我能够正确使用一次性付款，并正确保存信用卡以及处理；

但是，我被困在客户端保存卡的 3D 安全(第二次身份验证)上。我搜索了该网站但没有成功。和官方文档 https://stripe.com/docs/payments/save-and-reuse#web-create-payment-intent-off-session关于在客户端使用保存的卡的信息似乎很少。或者可能我只是不明白。希望有人可以通过正确的练习指导我。

下面是代码的关键部分，它目前适用于一次性付款和第二个身份验证 strip 弹出。

注意:我能够根据来自 $saved_cards 的每张卡的信息创建费用。在我的服务器中，但是它不会触发 3d 安全，因此它总是会因需要第二次身份验证的卡而失败

后端.php

    \Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));

    $intent = \Stripe\PaymentIntent::create([
        'amount' => $payment * 100,
        'currency' => 'usd',
    ]);

    if (!empty(Auth::user()->stripe_id)) { //all saved card info
        $saved_cards = \Stripe\PaymentMethod::all([
            'customer' => Auth::user()->stripe_id,
            'type' => 'card',
        ]);
    }

    return view('cart.preview', $items)->with('saved_cards', $saved_cards)->with('client_secret', $intent->client_secret);

客户端.js

        // this is for one time payment
        var payment_method = {
            card: card,
            billing_details: {
                name: "name"
            }
        };

        stripe.confirmCardPayment( "{{ $client_secret }}", {

           payment_method: payment_method,  // <= I believe this is the place I can use the saved card?

        }).then(function (result) {
            if (result.error) {
                // Show error to your customer (e.g., insufficient funds)
                console.log(result.error.message);
            } else {
                // The payment has been processed!
                if (result.paymentIntent.status === 'succeeded') {
                    // Show a success message to your customer
                    // There's a risk of the customer closing the window before callback
                    // execution. Set up a webhook or plugin to listen for the
                    // payment_intent.succeeded event that handles any business critical
                    // post-payment actions.
                }
            }
        });

/***************************************************** ********************************/

根据答案建议更新解决方案:

免责声明:这可能是一个不好的做法，因为 secret 切换发生在前端。但是你明白了。

为了使用您的payment_method ID，您还必须附上您的 customer id ，这发生在后端。所以对于我的情况，我创建了另一个 savedCard_intent在我的后端并将其传递给前端以专门处理保存的卡。

    $savedCard_intent = \Stripe\PaymentIntent::create([
        'customer' => Auth::user()->stripe_id,
        'amount' => $payment * 100,
        'currency' => 'usd',
    ]);

将其传递给前端 with('saved_secret' ,$savedCard_intent->client_secret) ;

将所有这些组合在一起我有如下代码:

新建后端.php

\Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));

$new_intent = \Stripe\PaymentIntent::create([
    'amount' => $payment * 100,
    'currency' => 'usd',
]);

$savedCard_intent = \Stripe\PaymentIntent::create([
    'customer' => Auth::user()->stripe_id,
    'amount' => $payment * 100,
    'currency' => 'usd',
]);

if (!empty(Auth::user()->stripe_id)) { //all saved card info
    $saved_cards = \Stripe\PaymentMethod::all([
        'customer' => Auth::user()->stripe_id,
        'type' => 'card',
    ]);
}

return view('cart.preview', $items)->with('saved_cards', $saved_cards)->with('new_secret', $new_intent->client_secret)->with('saved_secret', $savedCard_intent->client_secret);

新客户端.js

    // this is for one time payment
    var payment_method = {
        card: card,
        billing_details: {
            name: "name"
        }
    };

    var secret = (Some conditions here) ? "{{$new_secret}}" : "{{$saved_secret}}";

    stripe.confirmCardPayment( secret, {

       payment_method: (Some conditions here) ? payment_method : saved_payment_method.id,
    }).then(function (result) {
        if (result.error) {
            // Show error to your customer (e.g., insufficient funds)
            console.log(result.error.message);
        } else {
            // The payment has been processed!
            if (result.paymentIntent.status === 'succeeded') {
                // Show a success message to your customer
            }
        }
    });

Answer 1

你是对的。您可以像这样使用 PaymentMethod 的 id ( pm_****** ):

stripe.confirmCardPayment( "{{ $client_secret }}", {
  payment_method: payment_method.id,
}). then( ... )

记录于此: https://stripe.com/docs/js/payment_intents/confirm_card_payment#stripe_confirm_card_payment-data-payment_method

您也可以通过 PaymentMethod对象，如果您在客户端生成一个，但这可能不是您正在寻找的方法。