Skip to main content
More in Learn

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:

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:

Note: As mentioned in the code, this boilerplate does not rely on webhooks.

People showing thumbs up

Need further assistance?

Ask the Crystallize team or other enthusiasts in our slack community.

Join our slack community