How to customize credit card form in Stripe?
I am configuring the payment gateway using Stripe, I have a basic structure you can see that you can add styles in the javascript code but not something that structures the HTML form content of the following code:
Note: StackOverflow does not run does not show the results, you can see the results of the code in https://jsfiddle.net/k16mk5z1/
Its result is the following:
How can I customize the design of the form as follows:
There is a documentation giving references but I can not understand them well.
Notes:
As of version 3 of stripe, this new version generates the content of the card form by means of its javascript plugin
previously in version 2 there was an HTML structure of the form.
Answer
You can use separate fields with Elements, e.g.: http://jsfiddle.net/ywain/whj357u9/
If you want to also collect the cardholder's name, you'll need to use a regular <input> field, and provide its contents in the second parameter when calling createToken(): http://jsfiddle.net/ywain/eckhnz19/
EDIT: If you want the separate card field to show the card brand icon, you'll need to reimplement that feature yourself. It is relatively easy to do so using the change event. Here's an example: http://jsfiddle.net/ywain/L96q8uj5/