Skip to main content
More in Learn

Stripe Payment Integration

Stripe is an American financial services and software as a service (SaaS) the company offers payment processing software and application programming interfaces (APIs) for e-commerce websites and mobile applications. Follow the steps of this guide to set up Stripe payments in our Service API and connect it your frontend.

Getting Stripe credentials

To get started with Stripe, you need to sign up for their services, create an account. After getting an account, you need to use API keys, stripe use two API keys the publishable key and secret key,  which you need to store in your .env file:

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your-stripe-public-key
STRIPE_SECRET_KEY=your-stripe-secret-key

Note: you have to generate a Crystallize secret token and secret token id to your project follow the steps to generate Crystallize access tokens and add the variables to your .env file:

CRYSTALLIZE_SECRET_TOKEN_ID=your-secret-token-id
CRYSTALLIZE_SECRET_TOKEN=your-secret-token

Initiating payment

In the init payment endpoint default in the NextJS eCommerce boilerplate is src/pages/api/payment-providers/stripe/create-payment-intent.js, this is the typical flow you want to follow:

  • Create a Crystallize order for the customer and the basket contents.
  • Select Stripe as the payment option in the checkout.
  • Receive an URL back from Stripe for where to redirect the user to approve the payment.

User payment confirmation

Once you click Stripe as payment in the checkout you will see empty card fields to fulfill the fields with correct data you have to use the Stripe test credit cards, then click pay now you will be redirected to the order confirmation page.

stripe credit card checkout from Crystallize Nextjs Boilerplate

Order confirmation

After the customer has confirmed the purchase, they will be redirected back to the shop for a confirmation. The default in the NextJS eCommerce boilerplate is src/pages/confirmation/stripe/[orderId].js.

stripe order confirmation from Crystallize Nextjs Boilerplate

By default, the payment information can be used to update the order in Crystallize under src/pages/api/payment-providers/stripe/order-persistence.js. Here you can choose if you would like to store extra information.

Next steps

What happens now is totally up to how you run your business. We advise you to set up proper fulfilment pipelines to orchestrate the orders, which you can use to manage the order fulfilment in a structured and automated way.

Read more about orders and fulfilment or watch our live stream where we demonstrate how Vipps payments (another payment method) work in our boilerplate.

People showing thumbs up

Need further assistance?

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

Join our slack community