CODEWITHSUNDEEP
javascripthtmlstripe-payments
Ahmad
Ahmad

Reputation: 359

How to add custom fields to popup form of Stripe Checkout

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;

<script src="https://checkout.stripe.com/checkout.js"></script>

<form action="/charge" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_i2txBI2jUjSQIMoqFz3Fo326"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-name="Matt's Widgets and Gizmos"
    data-description="2 widgets ($20.00)"
    data-amount="2000"
    data-billingAddress="true"
    data-shippingAddress="true">
  </script>
</form>

And i found that Stripe Checkout can only include the following custom values which are as under;

stripeBillingName: 
stripeBillingAddressLine1: 
stripeBillingAddressApt:
stripeBillingAddressZip: 
stripeBillingAddressCity: 
stripeBillingAddressState: 
stripeBillingAddressCountry: 
stripeBillingAddressCountryCode:

Is there any way around this? Please let me know Thank you

Upvotes: 19

Views: 28847

Answers (3)

user956584
user956584

Reputation: 5558

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",

Upvotes: 0

Chris Simmons
Chris Simmons

Reputation: 19

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.

Upvotes: 0

koopajah
koopajah

Reputation: 25552

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.

Upvotes: 14

Related Questions