Stripe est une plateforme de traitement des paiements qui permet aux entreprises d'accepter des paiements en ligne et en personne. C'est un choix populaire pour les entreprises de toutes tailles, des startups aux grandes entreprises.
Dans ce didacticiel, vous apprendrez à intégrer la passerelle de paiement par carte à bande dans les applications Angular 14. Pour intégrer la passerelle de paiement par carte à bande dans les applications Angular 14, nous suivons les étapes suivantes
Utilisez la commande suivante pour installer une nouvelle application angulaire, mais assurez-vous que la CLI angulaire est installée sur notre système.
ng new angualr-stripe-example
Ensuite, déplacez-vous à l'intérieur de la racine du projet :
cd angualr-stripe-example
Créez un compte de test Stripe, l'intégration de la passerelle de paiement Stripe nécessite d'obtenir des clés Stripe publiables, et plus tard vous l'utiliserez pour effectuer les paiements via Stripe dans un modèle de script dactylographié angulaire :
Ajoutez maintenant le code suivant dans app.component.ts :
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
paymentHandler:any = null;
constructor() { }
ngOnInit() {
this.invokeStripe();
}
makePayment(amount) {
const paymentHandler = (<any>window).StripeCheckout.configure({
key: 'pk_test_51H7bbSE2RcKvfXD4DZhu',
locale: 'auto',
token: function (stripeToken: any) {
console.log(stripeToken)
alert('Stripe token generated!');
}
});
paymentHandler.open({
name: 'Positronx',
description: '3 widgets',
amount: amount * 100
});
}
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: 'pk_test_51H7bbSE2RcKvfXD4DZhu',
locale: 'auto',
token: function (stripeToken: any) {
console.log(stripeToken)
alert('Payment has been successfull!');
}
});
}
window.document.body.appendChild(script);
}
}
}
Ajoutez le code html suivant dans app.component.html :
<div class="container">
<h2 class="mt-5 mb-4">Angular Stripe Checkout 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>
Enfin, nous avons terminé l'intégration de la passerelle de paiement par bande dans angular, testez maintenant l'application :
ng serve --open
La commande ci-dessus manifeste l'application de bande angulaire sur le navigateur à l'URL suivante :
http://localhost:4200
Merci d'avoir lu !!!