条纹设置意图

Posted 2023-03-28

【中文标题】条纹设置意图

【英文标题】：Stripe setup intent

【发布时间】：2020-08-23 13:51:15

【问题描述】：

我希望收集客户卡信息，然后在他们使用我的服务后将其保存以供日后收费。我正在遵循完全相同的步骤：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: [e-mail]");
         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]。”

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

【问题讨论】：

看错了，好像是卡的问题吧？然而你已经向我们展示了所有除了收集卡片的代码......在你链接到的指南中，你是否正在执行步骤“4.收集卡片详细信息”？

是的，第 4 步非常重要，我只是没有显示其中的 html 部分。这就是我使用 stripe.js 安装卡的意思。

你能告诉我们你是如何设置cardElement的吗？这一切看起来都是正确的，因此可能是您安装条纹元素的方式存在问题。

如果您给我们整辆车，但不给我们带孔的轮胎，我们无法帮助修复爆胎……:-)

@Don'tPanic 哈哈哈。我加了轮胎。 HTML 表单和 JS 都安装并向 Stripe 发送确认请求

【参考方案1】：

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

【讨论】：

我在结账时使用令牌方式进行收费，然后在服务使用后将其刮掉进行收费。让我尝试标记卡信息并在创建客户时传递它，我看看它是如何进行的。

我尝试使用源令牌创建客户，但在确认 Intent 部分时仍然出现同样的错误

【参考方案2】：

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

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

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

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

并在调用 confirmCardSetup 时使用它