Comment intégrer la passerelle de paiement Stripe dans Angular

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

Étape 1 : créer une application Angular

Étape 2 : Obtenir la clé publiable Stripe

Étape 3 : Mettre à jour le fichier Typescript

Étape 4 : Mettre à jour le fichier HTML Angular

Étape 5 : Exécuter le serveur de développement

Étape 1 : créer une application Angular

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

Étape 2 : Obtenir la clé publiable Stripe

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 :

• Rendez-vous sur  le site Web de Stripe  .
• Inscrivez-vous pour créer un compte de développeur Stripe.
• Cliquez sur la section "Obtenez vos clés API de test".
• Copiez les clés publiables à partir du tableau de bord Stripe.

Étape 3 : Mettre à jour le fichier Typescript

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);
    }
  }
 
}

Étape 4 : Mettre à jour le fichier HTML Angular

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>

Étape 5 : Exécuter le serveur de développement

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 !!!