Stripe Checkout Integration with Angular

Stripe integration with Angular
Integrate Checkout with Stripe and Angular

Table of Contents

In this article, we are going to learn how to integrate “Checkout with Stripe” in latest version of Angular (currently 10.1.4)

What is Stripe?

Stripe is software and APIs to accept payments, send payouts, and manage their business online


We are going to learn,

  1. how to create a product in Stripe
  2. integrate that product in Angular for hassle free checkout experience for our users.


Remember that, All the product related data & keys in stripe we have to create in “Test Mode”


  • angular-cli version 10.1.3 or later
  • Nodejs version 10 or later
  • Basic knowledge of Angular is required

1. Create an account on Stripe and Sign in and go to dashboard for the next step:

Stripe Dashboard

2. Create a product & save the priceId for later use in Angular

Create a product

Copy Price ID

3. Create an Angular starter application using Angular CLI

ng new angular-stripe --style=scss

4. Install Stripe js using NPM:

npm i @stripe/stripe-js

5. Create components => Product and Successful Transaction and Failed Transaction

ng generate component product
ng generate component success
ng generate component failure

ProductComponent: Where we show product details

SuccessComponent: Where we show success message

FailureComponent: Where we show failure message

6. Now, we will add the routes for components that has been created

File: app.module.ts

File: app.component.html

7. Generate Publishable Key for fetching the stripe interface

Generate the Publishable Key from Stripe Dashboard => Developers => keys

8. Set the generated API keys as environment variables for later use

File: environment.ts

9. Create Product Data Variables in ProductComponent to use them in Product UI

product object will be used in the product template for UI

priceId will be used while redirecting user for the checkout

title = "angular-stripe";
priceId = "price_1HSxpTFHabj9XRH6DMA8pC7l";
product = {
  title: "Classic Peace Lily",
  subTitle: "Popular House Plant",
    "Classic Peace Lily is a spathiphyllum floor plant arranged in a bamboo planter with a blue & red ribbom and butterfly pick.",
  price: 18.0,
quantity = 1;
stripePromise = loadStripe(environment.stripe_key);

File: product.component.html

10. Create checkout method for redirecting user to Stripe checkout page

async checkout() {
  // Call your backend to create the Checkout session.
  // When the customer clicks on the button, redirect them to Checkout.
  const stripe = await this.stripePromise;
  const { error } = await stripe.redirectToCheckout({
    mode: "payment",
    lineItems: [{ price: this.priceId, quantity: this.quantity }],
    successUrl: `${window.location.href}/success`,
    cancelUrl: `${window.location.href}/failure`,
  // If `redirectToCheckout` fails due to a browser or network
  // error, display the localized error message to your customer
  // using `error.message`.
  if (error) {


Full Code is available here for the reference.

Click here to see the demo to try.

Unimedia Technology

Here at Unimedia Technology we have a team of Angular Developers that can develop your most challenging Web Dashboards and Web apps.

Remember that at Unimedia, we are experts in emerging technologies, so feel free to contact us if you need advice or services. We’ll be happy to assist you.

Unimedia Technology

Your software development partner

We are a cutting-edge technology consultancy specialising in custom software architecture and development.

Our Services

Sign up for our updates

Stay updated, stay informed, and let’s shape the future of tech together!

Related Reads

Dive Deeper with These Articles

Explore more of Unimedia’s expert insights and in-depth analyses in the realm of software development and technology.

Let’s make your vision a reality!

Simply fill out this form to begin your journey towards innovation and efficiency.