Angular 13 Stripe Payment Integration Example

Hi Dev,

Today, I would like to show you angular 13 stripe payment integration example. In this article, we will implement a stripe payment gateway integration in angular 13. you will learn angular 13 stripe payment example. you’ll learn stripe payment gateway angular 13. So, let’s follow few step to create example of angular 13 stripe card checkout payment integration.

In this example, we will add three buttons for “$15”, “$25” and “$35” for quick payment. When you click on it, it will open a stripe payment card and you can enter card information and make a payment. So let’s follow the bellow step to do this example.

Preview:

Angular 13 Stripe Payment Integration Example

Step 1: Create New App.medrectangle-3-multi-157{border:none!important;display:block!important;float:none;line-height:0;margin-bottom:15px!important;margin-left:0!important;margin-right:0!important;margin-top:15px!important;max-width:100%!important;min-height:250px;min-width:300px;padding:0;text-align:center!important}

This step is not required; however, if you have not created the angular app, then you may go ahead and execute the below command:

ng new myNewApp

Step 2: Create Stripe App

Here you need to create stripe api key. so let’s go to Go to Stripe Account.

Register to create a stripe developer account.

Click on the “Get your test API keys” section..medrectangle-4-multi-155{border:none!important;display:block!important;float:none;line-height:0;margin-bottom:15px!important;margin-left:0!important;margin-right:0!important;margin-top:15px!important;max-width:100%!important;min-height:250px;min-width:300px;padding:0;text-align:center!important}

You will find api key as like below i showed you, This api key we need 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>

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

ng serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

Output:

Angular 13 Stripe Payment Integration Example

You can use following stripe testing cards:

.large-leaderboard-2-multi-158{border:none!important;display:block!important;float:none;line-height:0;margin-bottom:15px!important;margin-left:0!important;margin-right:0!important;margin-top:15px!important;max-width:100%!important;min-height:250px;min-width:300px;padding:0;text-align:center!important}

Number Brand CVC Date
4242424242424242 Visa Any 3 digits Any future date
5555555555554444 Mastercard Any 3 digits Any future date

I hope it can help you…

1 thought on “Angular 13 Stripe Payment Integration Example”

Leave a Comment