CODEWITHSUNDEEP
node.jsreactjsstripe-payments
LoF10
LoF10

Reputation: 2127

Stripe - Using the right react frontend component for credit card storage?

I am working on a stripe backend in node and a react frontend, the idea being to create a platform for buyers and sellers. I have created the seller's side where users create connect accounts and add a bank to that account.

Now I want to set up the buyer's side. I want to be able to have a customer store their credit/debit card information to use to pay in the future. Below are my questions, they're a bit broad but I just want some basic guidance, not looking for code answers:

  1. Should I aim to have users enter information and then have stripe create a customer object with all their information as a way of storing credit card info?

  2. Can I use the react-stripe-elementslibrary to facilitate this process as it seems to be made to be secure? I've been looking at the examples but they seem to revolve around paying directly by inputting information to pay right away. Unless I am misunderstanding?

Upvotes: 0

Views: 963

Answers (1)

ttmarek
ttmarek

Reputation: 3260

Should I aim to have users enter information and then have stripe create a customer object with all their information as a way of storing credit card info?

Yes, the main approach is to collect the card details which will produce a PaymentMethod object that you can then save to a Customer. The easiest way to do this is by using the SetupIntents API as described here:

https://stripe.com/docs/payments/save-and-reuse

If you follow that guide a PaymentMethod will be created automatically when you confirm the SetupIntent, and since you provide a Customer when creating the SetupIntent, Stripe will automatically save the PaymentMethod to the Customer.

Can I use the react-stripe-elementslibrary to facilitate this process as it seems to be made to be secure? I've been looking at the examples but they seem to revolve around paying directly by inputting information to pay right away. Unless I am misunderstanding?

You should use the new React library from Stripe instead (assuming you're on React v16.8 and above):

https://github.com/stripe/react-stripe-js

The library is a simple wrapper around Stripe Elements which exposes an input field for your users to enter in their credit card details. When you use that pre-built input field from Stripe, they will automatically create PCI compliant forms for you: https://stripe.com/docs/security/guide. Otherwise, you would need to prove your business's PCI compliance annually which is a lot of work.

The client-side steps in the Save and Reuse guide all have a "React" tab that you can click on to show the React version (that uses the new react-stripe-js library):

https://stripe.com/docs/payments/save-and-reuse#web-collect-card-details

Upvotes: 1

Related Questions