DEV Community

loading...
Cover image for Stripe for online payments

Stripe for online payments

bekbrace profile image Bek Brace ・2 min read

Stripe, a toolkit that can monetize virtually any online business model, its APIs can be used to accept payments, manage customers, handle subscriptions and more.

Alt Text

It's extremely popular for startups because of its developer approach, instead of worrying about things like compliance, security, and fraud detection you can focus on the user experience and implement your payment system with just a few API calls.

Alt Text

So, how does the the credit card payment work ?

1- Create a payment intent
When a user is ready to make a payment in your app, you'll first need to create a payment intent on your server.
The payment intent is kind of like a session that manages the payment process, currently it's in a state of requires a payment method.

{"id"    : "bek2$..",
 "amount":  500,
 "status": "requires_payment",
 "client_secret":"..."
}
Enter fullscreen mode Exit fullscreen mode

2- Collect Card Details

Next, we need to obtain the credit card details from the customer,
you can handle this process securely using stripe.js.
Stripe.js is able to mount a customizable credit card form directly in your application; it will provide an automatic validation for the users 'input.

3- Send it to Stripe

When the form is submitted by the user, you will write a function that takes the payment intent from your server, combines it with credit card details entered by the user in the browser, then calls stripe confirmed card payment to send this data to stripe servers, it will attempt to finalize the payment.

But now, many parts of the world have regulations that require additional authorization for the payment.
The payment intent now has a status of "requires action", and Stripe will handle this process for you in the frontend and once done, the payment intent will move to a status of succeeded.

{"id"    : "bek2$..",
 "amount":  500,
 "status": "requires_action",
 "client_secret":"..."
}
Enter fullscreen mode Exit fullscreen mode

Thank you fireship

Discussion (0)

pic
Editor guide