Stripe Elements with React
How to capture credit card details securely using React, and Stripe Elements
The Need
Capturing and storing payment information and credit card details involve several systems and interfaces, and any weakness at any step compromises the whole chain. In this post I will be covering how to securely capture credit card details and send them to Stripe for further processing using Stripe Elements.
End Result
For improved customer experience, I am embedding Stripe Elements within my own forms, and I will not be using Hosted forms or anything that would redirect the user to a third party website (in this case Stripe).
This is how the end result will look like:
If you’d like to see the live example, follow the registration process, and after Account Creation you would see the form in the Billing information.
Credit Card Details at Rest and InTransit
I am not willing to keep customers credit card details in my database. That’s one of the reason I am using Stripe controls to capture them, and as you will see in upcoming posts, I will use Stripe APIs to send those details directly to Strip through TLS channels. Hence these details won’t even cross my own APIs and servers.
By the way, this topic belongs to the series to set up Payments with React, Asp.NET and Stripe.
- Capturing Billing and Payment Details
- One Time Payment
- Subscriptions
- Cancel Subscription
- Switch Subscription
- Callbacks
Libraries
I am using the below npm package to access Stripe controls used in my forms:
Form Overview
As you can see I also have form validation as part of the capture process which is aligned with my own form validation in terms of style and format, although the actual validations are run by Stripe Elements.
Before we continue, I’d recommend to have a look at my post around Form Validation at form handling and input validation, where I fully explain the topic and how it is done.
Looking at the React form below and using the form manipulation technique I have used in the above post, you can see form management including all the validations is really simple. I pass a label, style and name, and that’s it.
A. Rendering and Validating Controls
Now let’s dive in and see what’s behind those render functions. Typically I use methods like renderInput, or renderCheckbox. However for credit card details I need to have some more functions like below:
- renderCardNumber
- renderCardExpiryDate
- renderCardCvc
to have a look at general form manipulation guide like renderInput, refer to here, however I will cover three credit card methods in this post.
A.1. renderCardNumber
Here is the code behind renderCardNumber. It is as simple as:
- Having a state object to hold control errors
- a function to invoke whenever there was a change and refreshing errors in state object
- Showing respective errors next to each control
And that’s it.
A.2. renderCardExpiryDate
Same applies for other render methods. Below is renderCardExpiryDate:
A.3. renderCardCvc
And here is the CVC:
A.4. Element Styling
Also if you wanted to apply any styles to those elements, you could use an object like below, and feed it to the controls as I have shown above.
A.5. Form Submission
Finally when the submit is pressed, and you want to perform the validation, you would simply check the state object if it contains any errors. If not, it is safe to proceed with the submit operation:
Note
Configuration, plumbing and troubleshooting your software foundation take a considerable amount of time in your product development. Consider using Pellerex which is a complete foundation for your enterprise software products, providing source-included Identity and Payment functions across UI (React), API (.NET), Pipeline (Azure DevOps) and Infrastructure (Kubernetes).
B. Access Credit Card Details
So far we relied on Stripe controls to perform the validations out of the box, and tell us if there are any errors. We store those errors in an object, and validate them at the time of submission. However I haven’t covered how to access credit card values and send them across.
According to the first code snippet, I have a component called BillingInformation that contains all these credit card controls. However in order to access the values inside these controls, I need an instance of Stripe library, loaded from the react-stripe-js.
To get that instance, I have wrapped BillingInformation component inside an Elements tag like below.
Now inside BillingInformation, whenever I need to access those values I just need to write:
this.props.elements.getElement('cardNumber')Please also note that I now have access to stripe object, this.props.stripe, and I can now get ready to send the credit card details to Stripe APIs.
In the next post, I will cover how to handle OneTime Payments with Stripe, now that I have captured credit card details.
Pellerex: Payment Foundation for Your Next Enterprise Software
How are you building your current software today? Build everything from scratch or use a foundation to save on development time, budget and resources? For an enterprise software MVP, which might take 8–12 months with a small team, you might indeed spend 6 months on your foundation. Things like Identity, Payment, Infrastructure, DevOps, etc. they all take time, while contributing not much to your actual product. These features are needed, but they are not your differentiators.
Pellerex does just that. It provides a foundation that save you a lot development time and effort at a fraction of the cost. It gives you source-included Identity, Payment, Infrastructure, and DevOps to build Web, Api and Mobile apps all-integrated and ready-to-go on day 1.
Check out Pellerex and talk to our team today to start building your next enterprise software fast.
