{"id":3556,"date":"2022-10-06T21:28:24","date_gmt":"2022-10-06T16:28:24","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3556"},"modified":"2022-10-06T21:38:08","modified_gmt":"2022-10-06T16:38:08","slug":"stripe-angular-integration-with-node-js-express-typescript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/stripe-angular-integration-with-node-js-express-typescript\/","title":{"rendered":"Stripe Angular Integration with Node.js, Express & TypeScript"},"content":{"rendered":"\n

In this tutorial, you will learn about Stripe Angular integration<\/strong>. Basically, we will integrate the Stripe payment gateway inside a project that is built using Angular 13, Node.js, Express, and TypeScript.<\/p>\n\n\n\n

I have provided the complete source code of the Stripe Angular integration example<\/strong> in this article.<\/p>\n\n\n\n

Stripe Angular Integration Example Source Code<\/h2>\n\n\n\n

We start this project by creating a new Angular app inside the folder named “client”.<\/p>\n\n\n\n

mkdir client<\/pre><\/div>\n\n\n\n
cd client<\/pre><\/div>\n\n\n\n
ng new sampletestapp<\/pre><\/div>\n\n\n\n
Now open\u00a0app.module.ts<\/code>\u00a0file and copy\/paste the following code to import the\u00a0httpclient<\/code>\u00a0module.<\/p>\n\n\n\n
app.module.ts<\/h3>\n\n\n\n
import { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { AppComponent } from '.\/app.component';\nimport { HttpClientModule } from '@angular\/common\/http';\n\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    HttpClientModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}<\/pre><\/div>\n\n\n\n
Its time to design an HTML template<\/code>\u00a0for our Stripe Angular integration example app. So, open the app.component.html\u00a0file and copy\/paste the following code into it.<\/p>\n\n\n\n
app.component.html<\/h3>\n\n\n\n
<h2>Angular Stripe Checkout Example<\/h2>\n\n<button (click)="makePayment(15)">Pay With Stripe<\/button>\n\n<div *ngIf="success">\n  <h1>Your Payment is complete successfully<\/h1>\n<\/div>\n<div *ngIf="failure">\n    <h1>Some Error is taken place inside the payment<\/h1>\n<\/div<\/pre><\/div>\n\n\n\n
Here’s a screenshot of how the template looks.<\/p>\n\n\n\n
\"Angular
Angular Stripe Checkout Example<\/figcaption><\/figure>\n\n\n\n
Now open the app.component.ts<\/code> file and copy\/paste the following code into it.<\/p>\n\n\n\n
app.component.ts<\/h3>\n\n\n\n
Important Note: On line # 24, replace ###yourkey###<\/code> text with your actual Stripe API key.<\/p>\n\n\n\n
import { Component } from '@angular\/core';\nimport { CheckoutService } from '.\/services\/checkout.service';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: ['.\/app.component.css'],\n})\nexport class AppComponent {\n  paymentHandler: any = null;\n\n  success: boolean = false\n  \n  failure:boolean = false\n\n  constructor(private checkout: CheckoutService) {}\n\n  ngOnInit() {\n    this.invokeStripe();\n  }\n\n  makePayment(amount: number) {\n    const paymentHandler = (<any>window).StripeCheckout.configure({\n      key: '###yourkey###',\n      locale: 'auto',\n      token: function (stripeToken: any) {\n        console.log(stripeToken);\n        paymentstripe(stripeToken);\n      },\n    });\n\n    const paymentstripe = (stripeToken: any) => {\n      this.checkout.makePayment(stripeToken).subscribe((data: any) => {\n        console.log(data);\n        if (data.data === "success") {\n          this.success = true\n        }\n        else {\n          this.failure = true\n        }\n      });\n    };\n\n    paymentHandler.open({\n      name: 'Edopedia.com Payment',\n      description: 'Some sample description of product',\n      amount: amount * 100,\n    });\n  }\n\n  invokeStripe() {\n    if (!window.document.getElementById('stripe-script')) {\n      const script = window.document.createElement('script');\n      script.id = 'stripe-script';\n      script.type = 'text\/javascript';\n      script.src = 'https:\/\/checkout.stripe.com\/checkout.js';\n      script.onload = () => {\n        this.paymentHandler = (<any>window).StripeCheckout.configure({\n          key: '###yourkey###',\n          locale: 'auto',\n          token: function (stripeToken: any) {\n            console.log(stripeToken);\n          },\n        });\n      };\n\n      window.document.body.appendChild(script);\n    }\n  }\n}<\/pre><\/div>\n\n\n\n
Now we are ready to carry out the payment. So, lets make a new service using the below command which will actually make the POST<\/code> request to the backend.<\/p>\n\n\n\n
ng g s services\/checkout<\/pre><\/div>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { Observable } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class CheckoutService {\n\n  constructor(private http: HttpClient) { }\n  \n  makePayment(stripeToken: any): Observable<any>{\n    const url = "http:\/\/localhost:5000\/checkout\/"\n\n    return this.http.post<any>(url,{token:stripeToken})\n  }\n}<\/pre><\/div>\n\n\n\n
Here we are making the POST<\/code> request to the backend which does not exist yet. So, let’s create the backend for our Stripe Angular integration<\/strong> app using Node.js<\/strong> and Express<\/strong>.<\/p>\n\n\n\n
First of all, make a new directory to hold our backend files. For the sake of this tutorial, I name it “server”.<\/p>\n\n\n\n
mkdir server<\/pre><\/div>\n\n\n\n
cd server<\/pre><\/div>\n\n\n\n
Initialize the project.<\/p>\n\n\n\n
npm init -y<\/pre><\/div>\n\n\n\n
Now we will install the required packages from npm.<\/p>\n\n\n\n
npm i express<\/pre><\/div>\n\n\n\n
npm i cors<\/pre><\/div>\n\n\n\n
npm i stripe<\/pre><\/div>\n\n\n\n
index.js<\/h3>\n\n\n\n
Important Note:<\/strong><\/p>\n\n\n\n