无法使用条带PaymentIntent中的fetch API获取Payment_method_id

Question

我正在使用条带应用程序接口集成条带支付使用PaymentIntent -php SDK和Stripe.js V3。遵循此指南，https://stripe.com/docs/payments/payment-intents/migration#saving-cards-checkout。我在我的条纹仪表板上成功完成的付款不需要3d-secure的测试卡。但是，根据他们的文档，条纹的新的SCA 3d安全弹出窗口。未弹出，这导致使用启用3dsecure的卡完成的付款显示在条带仪表板中的“未完成付款”选项卡。

我已经对代码进行了多次彻底的检查和测试。我已经注意到我的代码会跳过(有时)，或者在客户端代码的"Fetch Part“中抛出错误"Unexpected end of JSON input”。这导致3d-secure卡支付不能从指定的文件(Url)中提取"payment_method_id“。

我的Payment.js文件：

var elements = stripe.elements();
var style = {
    base: {
        color: '#32325d',
        lineHeight: '18px',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
            color: '#aab7c4'
        }
    },
    invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
    }
};

var cardNumber = elements.create('cardNumber', {
    style: style
});
cardNumber.mount('#cardNumber');
var cardExpiry = elements.create('cardExpiry', {
    style: style
});
cardExpiry.mount('#cardExpiry');
var cardCvc = elements.create('cardCvc', {
    style: style
});
cardCvc.mount('#cardCVC');

var cardholderName = $('#custName').val();
var amount = $('#amount').val();

$(document).ready(function () {
    $("#paymentForm").submit(function (event) {
        //event.preventDefault();

        stripe.createPaymentMethod('card', cardNumber, {
            billing_details: {name: cardholderName.value}
        }).then(function (result) {
            console.log(result);

            if (result.error) {
                var errorElement = document.getElementById('card-error');
                errorElement.textContent = result.error.massage;

            } else {
                 stripeTokenHandler(result);

                fetch('example.com/stripe/index.php', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        payment_method_id: result.paymentMethod.id
                    })
                }).then(function (result) {
                    // Handle server response (see Step 3)
                    result.json().then(function (result) {
                        handleServerResponse(result);
                    })
                });
            }
        });   
        //return false;
    });
 function stripeTokenHandler(result) {
            var payForm = $("#paymentForm");
            var paymentMethodID = result.paymentMethod.id;
            //set the token into the form hidden input to make payment
            payForm.append("<input type='hidden' name='payment_method_id' value='" + paymentMethodID + "' />");
            //  payForm.submit();   
             payForm.submit();
        }
}

我的Index.php文件

header('Content-Type: application/json');
if(isset($_POST['submit'])){

    //include Stripe PHP library
    require_once('stripe-php/init.php');    
   //set Stripe Secret Key
\Stripe\Stripe::setApiKey('sk_test_key');

    //add customer to stripe
    $customer = \Stripe\Customer::create(array(
        'email' => $custEmail,
    ));    

function generatePaymentResponse($intent) {
    if ($intent->status == 'requires_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']);
    }
}
# retrieve json from POST body
  $json_str = file_get_contents('php://input');
  $json1 = json_encode($_POST);
  $json_obj = json_decode($json1);

  $intent = null;

try {
    if (isset($json_obj->payment_method_id)) {
    $intent = \Stripe\PaymentIntent::create([
    'payment_method' => $json_obj->payment_method_id,
    'customer' => $customer->id,
    'amount' => 1099,
    'currency' => 'gbp',
    'confirmation_method' => 'manual',
    'confirm' => true,

]);
}
    generatePaymentResponse($intent);

  }catch (\Stripe\Error\Base $e) {
    # Display error on client
    echo json_encode([
      'error' => $e->getMessage()
    ]);
  }


}
?>

可以看到，我的stripeTokenHandler正在将payment_method.id附加到HTML表单中，这个过程还在继续。但是JS代码的"fetch“部分应该让payment_method_id生成"Response”，如果支付状态是"requires_action“，则继续生成"next_action”。

Answer 1

所以，为了实现我想要的，我所做的是

-删除了stripeTokenHandler()

因为我在之前的收费应用程序接口集成中使用了它，并认为它将与新的PaymentIntent一起工作。我想很多人误解或误导了stripe在其文档中提供的一堆不同的方法。我在互联网上看到很多人抱怨stripe的“管理不善”文档把他们搞糊涂了。

-学习Fetch Api。

作为一个新手，我不知道它是用来做什么的。

-从我的php代码中删除isset post submit

原因: payment.js无法使用Fetch Api将paymentMethod.id发送到服务器，也无法从服务器获取响应正文以进一步执行代码。

我必须说，条纹需要改进它的文档关于这个SCA就绪的PaymentIntent的事情。