How to add custom fields to popup form of Stripe Checkout

Question

How can i add custom fields to Stripe Checkout form such as First Name, Last Name and maybe even a checkbox with a custom button? So far i\'ve come up with this;

Answer 1

You can try add own filed by pass as clientReferenceId ie. => extrauserid::option2::option2 but unfortunately you don't get this in in payment_intent.succeeded same as missing SKUs.

clientReferenceId string

A unique string to reference the Checkout session. This can be a customer ID, a cart ID, or similar. It is included in the checkout.session.completed webhook and can be used to fulfill the purchase.

var data = {
    customerEmail: eml,
    successUrl: 'https://...',
    cancelUrl: 'https://...',
    clientReferenceId: user + '::' + option1,
    items: [{  
       sku: sku, 
       quantity: 1
    }],
}
stripe.redirectToCheckout(data);

checkout.session.completed

"cancel_url": "https://....",
"client_reference_id": "user123::somevalue",
"customer": "cus_H1vFYbxY2XMAz6",

Answer 2

There is no way to tweak Stripe Checkout unfortunately to add a custom field or a checkbox. The solution here is to use Custom Checkout and add those extra fields to your own form. You would for example collect the customer's name and ask him to accept your own Terms of Service and only allow them to click on the Pay button once they do.

Then, once the customer fills Checkout with their card details and Stripe sends you back the token you would send it to your server along with the extra details you collected on your end.

Answer 3

Stripe now recommends using the stripe.js method versus the deprecated checkout modal method (not to be confused with the new Stripe Checkout).

To that end, in order to add custom fields (such as name, package type, custom tags, etc), what I found works is tweaking the stripe.js function stripeTokenHandler() by adding:

var customInput = document.createElement('input');
customInput.setAttribute('type', 'hidden');
customInput.setAttribute('name', 'customInput');
customInput.setAttribute('value', $("input[name=customInput]:checked").val());
form.appendChild(customInput);

So if I had a radio button group called "customInput", it would attach the value of whatever radio button was selected to the "customInput" $_POST field. This way the target script can retrieve it and use it.

Hope this helps someone.