How to pass additional params to Stripe Custom Flow? - stripe-payments

Question

Following Stripes official tutorial to create payment form with apple pay support: https://stripe.com/docs/payments/quickstart#collect-billing-address-details
But on thank you page, i need to know: user email and stripe customer id. How i can pass these parameters to thank you page?
My code for prepare.php:
$productID = $request['items'][0]['id'];
$customer = \Stripe\Customer::create();
$paymentIntent = \Stripe\PaymentIntent::create([
'customer' => $customer->id,
'setup_future_usage' => 'off_session',
'amount' => config('app.PRICE_TNT6WEEK') * 100, //6week program
'currency' => 'usd',
'automatic_payment_methods' => [
'enabled' => true,
],
'description' => $productID,
]);
$output = [
'clientSecret' => $paymentIntent->client_secret,
];
\Log::debug(['<pre>'.print_r($request->toArray(), true).'</pre>', $productID, $output]);
return response()->json($output);
My checkout.js:
// This is your test publishable API key.
const stripe = Stripe('{{config('app.STRIPE_KEY')}}');
// The items the customer wants to buy
const items = [{ id: "{{$productName}}"}];
let elements;
initialize();
checkStatus();
document
.querySelector("#payment-form")
.addEventListener("submit", handleSubmit);
// Fetches a payment intent and captures the client secret
async function initialize() {
const { clientSecret } = await fetch("{{route('prepare.product', [$slug, $slugVersion])}}", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ items }),
}).then((r) => r.json());
elements = stripe.elements({ clientSecret });
const paymentElementOptions = {
layout: "tabs",
};
const paymentElement = elements.create("payment", paymentElementOptions);
paymentElement.mount("#payment-element");
// Create and mount the Address Element in billing mode
const addressElement = elements.create("address", {
mode: "billing",
defaultValues: {
name: 'Your Full Name...',
address: {
line1: 'Address...',
city: 'City...',
state: 'CA',
postal_code: '',
country: 'US',
},
},
fields: {
phone: 'always',
},
});
addressElement.mount("#address-element");
}
async function handleSubmit(e) {
e.preventDefault();
setLoading(true);
//--- There we should make an additional ajax request with user data
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
// Make sure to change this to your payment completion page
return_url: "{{route('upsell.show', [$slug, $slugVersion])}}",
payment_method_data: {
billing_details: {
name: document.getElementById("full_name").value,
email: document.getElementById("email").value,
phone: document.getElementById("phone").value,
}
},
},
});
// This point will only be reached if there is an immediate error when
// confirming the payment. Otherwise, your customer will be redirected to
// your `return_url`. For some payment methods like iDEAL, your customer will
// be redirected to an intermediate site first to authorize the payment, then
// redirected to the `return_url`.
if (error.type === "card_error" || error.type === "validation_error") {
showMessage(error.message);
} else {
showMessage("An unexpected error occurred.");
}
setLoading(false);
}
// Fetches the payment intent status after payment submission
async function checkStatus() {
const clientSecret = new URLSearchParams(window.location.search).get(
"payment_intent_client_secret"
);
if (!clientSecret) {
return;
}
const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);
switch (paymentIntent.status) {
case "succeeded":
showMessage("Payment succeeded!");
break;
case "processing":
showMessage("Your payment is processing.");
break;
case "requires_payment_method":
showMessage("Your payment was not successful, please try again.");
break;
default:
showMessage("Something went wrong.");
break;
}
}
// ------- UI helpers -------
function showMessage(messageText) {
const messageContainer = document.querySelector("#payment-message");
messageContainer.classList.remove("hidden");
messageContainer.textContent = messageText;
setTimeout(function () {
messageContainer.classList.add("hidden");
messageText.textContent = "";
}, 4000);
}
// Show a spinner on payment submission
function setLoading(isLoading) {
if (isLoading) {
// Disable the button and show a spinner
document.querySelector("#submit").disabled = true;
document.querySelector("#spinner").classList.remove("hidden");
document.querySelector("#button-text").classList.add("hidden");
} else {
document.querySelector("#submit").disabled = false;
document.querySelector("#spinner").classList.add("hidden");
document.querySelector("#button-text").classList.remove("hidden");
}
}

Answer 1

After collecting billing details with either the Address Element, or supplying the payment_method_data[billing_details], that information will be available on Payment Method billing_details (API ref). You can get this by either retrieving the Payment Method, or by retrieving the associated Payment Intent and using expansion to include the full Payment Method object with expand[]=payment_method