缺少 Stripe 3D 安全授权弹出窗口答案

【问题标题】：Stripe 3D secure authorization pop up missing缺少 Stripe 3D 安全授权弹出窗口
【发布时间】：2020-01-16 08:51:41
【问题描述】：

这是我的 HTML 表单并使用条带最新的 PaymentIntent API。我的问题是我没有弹出 3D 安全授权。谁能帮我指导那些让我错了的人？我曾尝试关注条纹文档 (https://stripe.com/docs/payments/payment-intents/web#handling-next-actions)，但这完全令人困惑。

<script src='https://js.stripe.com/v3/' type='text/javascript'></script>
<form action="process_payment.php" method="post" id="payment-form">
    <div class="form-row">
        <label for="card-element">
            Credit or debit card
        </label>
        <div id="card-element"><!-- Your form goes here --></div>
    </div>
    <!-- Used to display form errors -->
    <div id="card-errors" role="alert"></div>
    <button class="atbdp_pay_btn" type="submit">Pay</button>
</form>

Javascript

document.addEventListener("DOMContentLoaded", function(event) {
        var stripe = Stripe('pk_test_xxxxxxxxxx'); // test publishable API key
        var elements = stripe.elements();

        var card = elements.create('card');
        // Add an instance of the card UI component into the `card-element` <div>
        card.mount('#card-element');

        // Handle events and errors
        card.addEventListener('change', function(event) {
            var displayError = document.getElementById('card-errors');
            if (event.error) {
                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';
            }
        });

        function stripeTokenHandler(token) {
            // Insert the token ID into the form so it gets submitted to the server
            var form = document.getElementById('payment-form');
            var hiddenInput = document.createElement('input');
            hiddenInput.setAttribute('type', 'hidden');
            hiddenInput.setAttribute('name', 'stripeToken');
            hiddenInput.setAttribute('value', token.id);
            form.appendChild(hiddenInput);

            // Submit the form
            form.submit();
        }

        function createToken() {
            stripe.createToken(card).then(function(result) {
                if (result.error) {
                    // Inform the user if there was an error
                    var errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                } else {
                    // Send the token to your server
                    stripeTokenHandler(result.token);
                }
            });
        };

        // Create a token when the form is submitted.
        var form = document.getElementById('payment-form');
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            createToken();
        });

    });

最终处理响应

require_once 'init.php';
\Stripe\Stripe::setApiKey( 'sk_test_xxxxxxxx' );
$stripeToken = $_POST['stripeToken']; // stripe will handle the sanitization
$error_msg = '';
try {
    $intent = \Stripe\PaymentIntent::create([
        'payment_method_data' => [
            'type' => 'card',
            'card' => ['token' => $stripeToken],
        ],
        'amount' => 19 * 100,
        'currency' => 'usd',
        'confirmation_method' => 'manual',
        'confirm' => true,
    ]);
    $result = generatePaymentResponse($intent);
}catch (\Stripe\Card $exception){

}

function generatePaymentResponse($intent) {
    if ($intent->status == 'requires_source_action' &&
        $intent->next_action->type == 'use_stripe_sdk') {
        # Tell the client to handle the action
        echo json_encode([
            'requires_action' => true,
            'payment_intent_client_secret' => $intent->client_secret
        ]);
    } else if ($intent->status == 'succeeded') {
        # The payment didn’t need any additional actions and completed!
        # Handle post-payment fulfillment
        echo json_encode([
            'success' => true
        ]);
    } else {
        # Invalid status
        http_response_code(500);
        echo json_encode(['error' => 'Invalid PaymentIntent status']);
    }
}

回应是

"requires_action": true,
  "payment_intent_client_secret": "pi_1FIowAIUv6RpAcZVcd9txP1g_secret_M0byttxAd4ZFB4NxLgsanaZZS"

【问题讨论】：

要检查的两件事。您是否在 Stripe 界面中启用了 3D 安全？测试帐号。您是否使用了用于测试 3D 安全的卡号？您要测试的每个场景都有一个。 stripe.com/docs/testing
是的，我确实使用 3D 安全测试卡，但我不知道“Stripe 界面中的 3D 安全”。 :)
您的前端代码没有进行任何 3D 安全处理。 stripe.createToken 不会做任何 3D 安全。正如您的 PaymentIntent 所说，它处于requires_action 状态。您链接的链接是您必须做的：stripe.com/docs/payments/payment-intents/… 在客户端调用handleCardAction 是使3D Secure 窗口出现的原因。
@karllekko 感谢您的技巧。我找到了解决方案here
@Sandra 这里是完整的code

标签： php stripe-payments stripe-sca

【解决方案1】：

您正在使用不支持 3ds 身份验证的stripe.createToken。
您需要将客户端代码迁移到支持它的stripe.createPaymentMethod。

stripe 文档中有一个有用的迁移指南，你可以关注它here

【讨论】：