Stripe PHP 3D secure payment without Stripe.JS? - php

Question

I'm not using Stripe.JS because I need custom UI.
I have collected card information from my customer. I'm using the PHP SDK.
My workflow is
create customer
add/attach payment method to customer
create payment intent
Every works fine. Now the issue that is if the end user uses a 3D secure card, I get a next_action in the response
"next_action": {
"type": "use_stripe_sdk",
"use_stripe_sdk": {
"type": "three_d_secure_redirect",
"stripe_js": "https://hooks.stripe.com/redirect/authenticate/xxxxxx?client_secret=src_client_secret_xxxxxxx",
"source": "src_xxxxxx"
}
},
"next_source_action": {
"type": "use_stripe_sdk",
"use_stripe_sdk": {
"type": "three_d_secure_redirect",
"stripe_js": "https://hooks.stripe.com/redirect/authenticate/src_xxxxxx?client_secret=src_client_secret_xxxxxx",
"source": "src_xxxxxx"
}
},
The documentation then relies on Stripe.JS for this step to open a verification popup. I'm not using Stripe.JS for the first part of the implementation due to custom UI. Can I use Stripe.JS for this part only? Or how do I do this part WITHOUT using Stripe.JS ? How do I know if this next step is successful so I can confirm the payment? I also see in my dev dashboard that the payment so successful (confusing). But the documentation says I still need to confirm that payment intent?

Answer 1

Stripe has documentation about handling 3D Secure manually without Stripe.js which will guide you through what you need to do.
That said, you can create your own custom payment form with Stripe.js using Stripe Elements, which is strongly recommended to increase security and reduce your PCI compliance burden.

Answer 2

check https://stripe.com/docs/payments/payment-intents/migration-synchronous#elements-step-3. You need to use stripe.js, just to handle 3D secure.
Also check this example:
pay.php:
<?php
require './../vendor/autoload.php';
// This is your test secret API key.
\Stripe\Stripe::setApiKey('sk_test_51M5C27LYhXp3iY7Hp8Oz2PRPoUpYXbkTzMcx4xuiEmqayIIJTbGe1uTE2gtPg3mhJJpmoOBnFzZna9eQYr3xmV6T006etitKBC');
header('Content-Type: application/json');
try {
$stripe = new \Stripe\StripeClient('sk_test_51M5C27LYhXp3iY7Hp8Oz2PRPoUpYXbkTzMcx4xuiEmqayIIJTbGe1uTE2gtPg3mhJJpmoOBnFzZna9eQYr3xmV6T006etitKBC');
$cardData = [
'number' => '4000000000003220',
'exp_month' => 12,
'exp_year' => 2029,
'cvc' => '314',
];
$paymentData = [
'amount' => 1400,
'currency' => 'usd',
];
$token = $stripe->tokens->create([
'card' => $cardData,
]);
$paymentMethod = $stripe->paymentMethods->create([
'type' => 'card',
'card' => $cardData,
]);
// Create a PaymentIntent with amount and currency
$paymentIntent = \Stripe\PaymentIntent::create([
'amount' => $paymentData['amount'],
'currency' => $paymentData['currency'],
'payment_method' => $paymentMethod,
'confirmation_method' => 'manual' // required to make 3d secure work
]);
$payment = $stripe->paymentIntents->confirm(
$paymentIntent->id,
[
'return_url' => 'YOUR_URL'
]);
if($payment->status == 'succeeded' || $payment->status == 'pending') echo json_encode(['redirect' => './succeed.php']);
// check if the status === requires_action, it means that 3D secure is required
elseif ($payment->status == 'requires_action') {
// Tell the client to handle the action
echo json_encode([
'requiresAction' => true,
'clientSecret' => $paymentIntent->client_secret
]);
exit();
}
else echo json_encode(['unexpected_error' => true]);
$charge = $stripe->charges->create([
'source' => $token,
'currency' => $paymentData['currency'],
'amount' => $paymentData['amount'],
'description' => 'My First Test Charge (created for API docs at https://www.stripe.com/docs/api)',
]);
} catch (Error $e) {
http_response_code(500);
echo json_encode(['error' => $e->getMessage()]);
}
pay.js:
// This is your test publishable API key.
const stripe = Stripe("pk_test_51M5C27LYhXp3iY7HJOk6mEZu6caLGHi8QzyaAgMK1Ek1X7W8yeSSkeMVTTg9tO0S8UPnGX4Qo0tSJQzjJuUavbaH00qAFwCPbw");
document
.querySelector("#payment-form")
.addEventListener("submit", handleSubmitBackend);
async function handleSubmitBackend(e) {
e.preventDefault();
let response = await fetch("./php/pay.php", {
method: "POST",
});
let result = await response.json();
console.log(result);
if (result.requiresAction) {
// Use Stripe.js to handle the required card action
const { error: errorAction, paymentIntent } = await stripe.handleCardAction(result.clientSecret);
if (errorAction) {
// Show error from Stripe.js in payment form
console.log(errorAction);
} else {
// The card action has been handled
// The PaymentIntent can be confirmed again on the server
const serverResponse = await fetch('/pay.php', {
method: 'POST',
});
}
}
else if(result.redirect) {
window.location.href = result.redirect;
}
}