条纹设置意图

Question

我希望收集客户卡信息，然后在他们使用我的服务后将其保存以供日后收费。我正在遵循完全相同的步骤：https://stripe.com/docs/payments/save-and-reuse，但不知何故我陷入了错误：“Missing required param: payment_method_data[card]。”

我的步骤如下：

• 客户创建了一个帐户，这些详细信息将保存到我的数据库中
• 我在 Stripe 上创建客户

    $stripe_customer = CustomerAlias::create([
        'email'       => $user->email,
        'description' => 'Subscriber',
        'name'        => $user->name,
        'phone'       => $user->phone,
    ]);

• 我在 Stripe 上创建了一个设置意图

    public function createASetUpIntent($stripe_customer){
        $intent = \Stripe\SetupIntent::create([
            'customer' => $stripe_customer->id,
            'usage'                => 'off_session',
        ]);

        return $intent;
    }

• 卡片 HTML

    <form id="setup-form" action="{{ route('completeCardSave') }}" method="post">
        <label class="pull-left">Enter your name as it exactly appears on the card</label>
        <input id="cardholder-name" type="text" class="form-control" style="text-transform:uppercase">
        <input type="hidden" name="client_secret" id="client_secret" value="{{$client_secret}}">
        <br>
        <label class="pull-left">Enter your card number, expiry and CVC</label>
        <div id="card-element"></div>

        <button type="submit" style="color: #5533FF !important;" id="card-button">
            <span class="save_card_text_span"> Save Card </span>

        </button>
    </form>
    <div class="card_custom_errors">

    </div>

• 安装卡并发送到 Stripe API 以确认意图的 Javascript

    var stripe = Stripe('pk_test_my_test_key_goes_here'); // UK

    // ADD ELEMENTS TO THE PAGE

    // Create an instance of Elements
    var elements = stripe.elements();

    // Custom styling can be passed to options when creating an Element.
    // (Note that this demo uses a wider set of styles than the guide below.)
    var style = {
        base: {
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    };

    // Create an instance of the card Element.
    var card = elements.create('card', {
        hidePostalCode: true,
        style: style
    });

    // Add an instance of the card Element into the `card-element` <div>.
    card.mount('#card-element');

    // Handle real-time validation errors from the card Element.
    card.addEventListener('change', function(event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    });

    var cardholderName = document.getElementById('cardholder-name');
    var cardButton = document.getElementById('card-button');
    var clientSecret = document.getElementById('client_secret').value;
    var cardElement =  document.getElementById('card-element');

    cardButton.addEventListener('click', function(ev) {
    ev.preventDefault();

    stripe.confirmCardSetup(
        clientSecret,
        {
            payment_method: {
                card: cardElement,
                billing_details: {
                    name: cardholderName.value,
                },
            },
        }
    ).then(function(result) {
        if (result.error) {
            // Display error.message in your UI.
            $('.card_custom_errors').css({"display":"block", "color":"red"})
                .html("There was an issue saving your card, please contact us at: farmsuite@ujuzikilimo.com");
        } else {
            // The setup has succeeded. Display a success message.
            // Now we can submit the form, which will send an email to the user and redirect to a completion page
            // Submit the form

        }
    });

现在的问题是，当我提交表单以确认意图时，我得到了错误：“缺少必需的参数：payment_method_data[card]。”

任何帮助将不胜感激，我不确定我做错了什么。 我想指出我的测试密钥是正确的，所以这不是问题。

Answer 1

我认为这里的问题是您正在创建源但没有传递任何卡详细信息。您想首先使用 Checkout 或 Elements 创建卡令牌 tok_XXX 客户端，然后在创建源服务器端时传递该卡令牌.

Answer 2

问题基本上出在这个变量上：

    var cardElement =  document.getElementById('card-element');

我应该传播卡片变量的初始声明，即：

    var card = elements.create('card', {
        hidePostalCode: true,
        style: style
    });

并在调用 confirmCardSetup 时使用它