Laravel 收银员条纹问题与 3d 安全卡不重定向到确认页面

Question

我正在努力获得Laravel收银条集成以使用3d安全卡。 我已经进行了设置，因此订阅可以正常工作，并显示在我的条纹仪表板中，以及它进入本地数据库的所有内容。 但是当我使用需要强烈自定义的卡片作为 3ds 进行测试时，它们在我的条纹仪表板中得到不完整的状态。

我在控制台日志中收到收银员付款响应页面。 但收银员不应该重定向到此确认窗口吗？

我的代码如下

在我的订阅控制器中，我有

public function index() {
$data = [
'intent' => auth()->user()->createSetupIntent(),
// 'plans' => $available_plans
];
return view('artists.subscription')->with($data);
}
public function checkout(Request $request) {
$user = auth()->user();
$paymentMethod = $request->payment_method;
$planId = 'monthly_sub';
// SCA
try {
$subscription = $user->newSubscription('monthly', $planId)->create($paymentMethod);
} catch (IncompletePayment $exception) {
return redirect()->route(
'cashier.payment',
[$exception->payment->id, 'redirect' => route('front')]
);        
}
// return response(['status' => 'Success']);
}

在我的条纹js文件中，我有这个

const stripe = Stripe('stripe_key'); // i have my test key here
const elements = stripe.elements();
const cardElement = elements.create('card',{hidePostalCode: true});
cardElement.mount('#card-element');
const cardHolderName = document.getElementById('card-holder-name');
const cardButton = document.getElementById('card-button');
const clientSecret = cardButton.dataset.secret;
cardButton.addEventListener('click', async (e) => {
const { setupIntent, error } = await stripe.confirmCardSetup(
clientSecret, {
payment_method: {
card: cardElement,
billing_details: { name: cardHolderName.value }
}
}
);

axios.post('checkout', {
payment_method: setupIntent.payment_method
}).then(response => { 
console.log(response.request.responseURL)
})
.catch(error => {
console.log(error.response)
});
});

我的刀片视图是

@extends('layouts.app')
@section('head')
@php 
// dd($intent);
@endphp
<script src="https://js.stripe.com/v3/"></script>
<link href="{{ asset('css/stripe.css') }}" rel="stylesheet">
@endsection
@section('content')
<input id="card-holder-name" type="text">
<!-- Stripe Elements Placeholder -->
<div id="card-element"></div>
<button id="card-button" data-secret="{{ $intent->client_secret }}">
subscribe
</button>
@endsection
@section('js')
<script src="{{ asset('js/stripe.js') }}" type="text/javascript"></script>
@endsection

一切似乎都正常，但我只是在控制台中收到 3ds 确认页面作为响应。如何让 laravel 重定向并为用户打开该页面？

Answer 1

我认为问题是事件的顺序，您的代码应该等待 3DS 被调用并完成，然后在结果返回给您后回调您的代码。使用此调节器卡 [1]，您应该能够通过这样的一些小更改来测试它(我不得不删除一些东西，但这应该是一个参考(：

stripe.confirmCardSetup(
"seti_xxx", {
payment_method: {
card: card,
billing_details: { name: "Name" }
}
}).then(function(result) {
// Check the result status here!!
axios.post('checkout', {
payment_method: result.setupIntent.payment_method
}).then(response => { 
console.log(response.request.responseURL)
}).catch(error => {
console.log(error.response)
});    
});

希望这有帮助！

[1] https://stripe.com/docs/testing#regulatory-cards