Home AngularJs How To Stripe Card Checkout Payment Gateway In Angular 14?

How To Stripe Card Checkout Payment Gateway In Angular 14?

by Shahriar Sagor

Hello Dev, today now in this post i will show you How To Stripe Card Checkout Payment Gateway In Angular 14 ? Now In this short guide, i will show you angular 14 stripe payment integration example.

In this example, i will add three buttons for the “$15”, “$25” and “$35” for the quick payment. When we click on it, then it will open a stripe payment card and then we can enter the card information and then make a payment.

Step 1: Create New App

Now this step will not required; however, if we have not created the angular application, then we may go ahead and then execute the below command:

ng new myNewApp
Step 2: Create Stripe App

Now here we have to create the stripe api key. so let’s go to Go to Stripe Account.

Register for create a stripe developer account.

Click on the “Get your test API keys” section.

We will find the api key as like as below i was showed you here, Now in this api key we have to use in our code:

pk_test_09GJJuNx4ScHIcoML69tx2aa

Step 3: app/app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  paymentHandler: any = null;
  stripeAPIKey: any = 'pk_test_09GJJuNx4ScHIcoML69tx2aa';
  
  constructor() {}
  
  /*------------------------------------------
  --------------------------------------------
  ngOnInit() Function
  --------------------------------------------
  --------------------------------------------*/
  ngOnInit() {
    this.invokeStripe();
  }
  
  /*------------------------------------------
  --------------------------------------------
  makePayment() Function
  --------------------------------------------
  --------------------------------------------*/
  makePayment(amount: any) {
    const paymentHandler = (<any>window).StripeCheckout.configure({
      key: this.stripeAPIKey,
      locale: 'auto',
      token: function (stripeToken: any) {
        console.log(stripeToken);
        alert('Stripe token generated!');
      },
    });
    paymentHandler.open({
      name: 'ItSolutionStuff.com',
      description: '3 widgets',
      amount: amount * 100,
    });
  }
  
  /*------------------------------------------
  --------------------------------------------
  invokeStripe() Function
  --------------------------------------------
  --------------------------------------------*/
  invokeStripe() {
    if (!window.document.getElementById('stripe-script')) {
      const script = window.document.createElement('script');
  
      script.id = 'stripe-script';
      script.type = 'text/javascript';
      script.src = 'https://checkout.stripe.com/checkout.js';
      script.onload = () => {
        this.paymentHandler = (<any>window).StripeCheckout.configure({
          key: this.stripeAPIKey,
          locale: 'auto',
          token: function (stripeToken: any) {
            console.log(stripeToken);
            alert('Payment has been successfull!');
          },
        });
      };
  
      window.document.body.appendChild(script);
    }
  }
}
Step 4: app/app.component.html
<div class="container">
  <h2 class="mt-5 mb-4">Angular 13 Stripe Payment Gateway Example</h2>
  <div class="col-md-5 mb-2">
    <button (click)="makePayment(15)" class="btn btn-danger btn-block">Pay $15</button>
  </div>
  <div class="col-md-5 mb-2">
    <button (click)="makePayment(25)" class="btn btn-primary btn-block">Pay $25</button>
  </div>
  <div class="col-md-5">
    <button (click)="makePayment(35)" class="btn btn-success btn-block">Pay $35</button>
  </div>
</div>

Read Also: php artisan serve not working in Laravel

Thanks for read. I hope it help you. For more you can follow us on facebook

close

You may also like