Stripe Payment Integration
Stripe is an American financial services and software as a service (SaaS) firm. The company offers payment processing software and application programming interfaces (APIs) for e-commerce websites and mobile applications. Follow the steps in this guide to set up Stripe payments and connect it to your frontend.
Getting Stripe Credentials
Most likely with Stripe, you will need a minimum of 3 keys that you can retrieve after you sign up for their services. After getting an account, you need to use API keys to get access to them.
- a public key: this key is shareable and will be exposed on your frontend. It is useful for rendering the UI.
- a secret key: per nature, this should be kept secret server-side. It will allow your service layer to communicate with Stripe servers.
- a signing secret: per nature, it should be kept secret server-side. It will help verify the signature.
Stripe has its own flow and concepts that you can read about within Stripe’s documentation.
Remix Run - Furniture Boilerplate - Example
The Remix Run Furniture v2 boilerplate includes a full Stripe Integration, including a confirmation webhook.
On the checkout page, we render the Stripe component, which does 3 things:
- makes the cart immutable
- creates a payment intent (server-to-server) via the service layer
- uses the public key to render the UI (the Stripe JS client is doing that for us)
In this boilerplate, we decided to save the cart in our own service layer, so we push the order to Crystallize only when the payment is successful.
Upon Stripe confirmation (client-side), we redirect to the `/order/cart/${cartId}` page. This page is actually waiting for the cart to be saved as an order in Crystallize.
Indeed, while everything is happening, Stripe (with a correctly configured webhook) will be triggered and the endpoint will be called.
The endpoint, when the event is a `payment_intent.succeeded` event:
- creates a customer in Crystallize, if one does not exist yet
- creates the order in Crystallize
- updates the cart from placed to paid, allowing the waiting page to update to the order confirmation
This boilerplate is also using our Node Service API Request Handlers that include 2 handlers to speed up your Stripe integration.
Next JS eCommerce Boilerplate - Example
This NextJS eCommerce boilerplate includes Stripe Integration.
The most interesting parts are:
: As mentioned in the code, this boilerplate does not rely on webhooks.
