Difference Between Using Stripe Elements In React And Generating Your Own React Elements To Get The Tokenised Card

- 1 answer

This is more of a concept question, rather than the coding one. This is about the implementation of Stripe in the React app, and take the user's card details and save it in the stripe and get the tokenized card and save that in DB.

So recently I have implemented Stripe in my react app and I went with the instructions here: Meaning I used their Stripe React Element to get card number, expiry date, etc.

Later on, I tried and created React elements myself instead of using their library and sent the request to Stripe with the card details to get the tokenized card response.

Now, both of the above processes work fine. I just don't get which one is better and why?

The process of tokenizing the card is exactly the same in both cases. The only difference is when I show the card form to the user, it's either with their library elements or with custom React Elements made by myself and I don't see what is the preferred way or if there is at all.

Or both ways are exactly the same. Does stripe just provide React Element for those who don't know how to make one for themselves?



I just don't get which one is better and why?

Functionally, they are the same. You're going to be going through the same processes flow to accept a card. There are a few benefits to using their library though.

1: It's easier. Why would you want to build a credit card interface when you can import their components and accept payments in less than 30 minutes?

2: It's stronger. The components you build to handle the workflow have been developed and tested by just 1 person or team. react-stripe-elements is being used by 5,000 different projects on github. Many bugs, problems, and caveats that you'll encounter will already addressed.

3: Consistent branding and UX. This is a two parter - Stripe would love for you to use their styling and UX because it trains users (and developers) to associate payment processing with Stripe, so they make more money.
It also makes it easier for you to show the user that they should input their card information. They already know what the interface looks like and what it does. The last thing you want to do is provide something unfamiliar in the checkout stage.