How to add custom fields to popup form of Stripe Checkout

Ahmad picture Ahmad · Jun 2, 2015 · Viewed 20.2k times · Source

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

Answer

koopajah picture koopajah · Jun 2, 2015

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.