Angular: configurazione e integrazione con Stripe

In questa sezione, approfondiremo il processo di integrazione di Stripe nel nostro progetto Angular. Stripe è una piattaforma di pagamento molto popolare che offre una vasta gamma di strumenti per gestire pagamenti online. Con essa possiamo accettare pagamenti con carte di credito e altre opzioni direttamente dalla nostra applicazione web.

Passeremo attraverso le fasi principali di sviluppo: creazione di un account Stripe, ottenimento delle chiavi API, configurazione del modulo Stripe in Angular e implementazione dei componenti per il pagamento.

Creazione di un account Stripe e chiavi API

Il primo passo consiste nel creare un account su Stripe. Una volta completata la registrazione e confermata l'e-mail, accedi alla Dashboard del servizio. Qui potrai ottenere le chiavi API per integrare Stripe nella tua applicazione.

Sono disponibili due chiavi API:

• Chiave pubblica: utilizzata nel front-end per interagire con l'API di Stripe.
• Chiave segreta: utilizzata nel back-end per eseguire operazioni riservate.

Nella dashboard di Stripe, naviga su "Developers > API Keys" e copia la chiave pubblica per usarla nel progetto Angular.

Configurazione del modulo Stripe in Angular

Ora che hai ottenuto la chiave pubblica, è necessario configurarla nel file environments.ts dell'applicazione Angular:

export const environment = {
  production: false,
  stripeKey: 'sk_test_XXXXXXXXXXXXXXXXXXXXXX',
  paypalClientId: 'il-tuo-client-id-paypal'
};

Questa chiave verrà utilizzata nel componente payment.component.ts per configurare il sistema di pagamento. Ecco come appare il codice del componente aggiornato:

import { Component } from '@angular/core';
import { environment } from '../../environments/environments';
import { loadStripe } from '@stripe/stripe-js';
@Component({
  selector: 'app-payment',
  templateUrl: './payment.component.html',
  styleUrls: ['./payment.component.css'],
  standalone: true
})
export class PaymentComponent {
  stripePromise = loadStripe(environment.stripeKey);
  constructor() {}
  async makePayment() {
    const stripe = await this.stripePromise;
    // Altri metodi e logica per la gestione dei pagamenti
  }
}

Qui utilizziamo la funzione loadStripe per caricare la libreria di Stripe con la chiave pubblica.

Configurazione del componente Payment con StripeCheckout

Integriamo il codice per gestire un pagamento con Stripe utilizzando il modulo StripeCheckout. Prima di tutto, all'interno della classe del componente Angular, dichiaro due proprietà: paymentHandler, che gestisce l'interfaccia di pagamento, e stripeAPIKey, dove inserisco la chiave pubblicabile di Stripe. Questo è il punto cruciale poiché stiamo lavorando sul front-end e quindi utilizziamo una chiave pubblicabile per interagire con l'API di Stripe in modo sicuro.

Quando il componente viene inizializzato con ngOnInit(), eseguo la funzione invokeStripe(), che ha lo scopo di caricare dinamicamente lo script Stripe nel DOM. Questo script è essenziale per aprire la finestra di pagamento. Il controllo della presenza dello script è gestito verificando se esiste già un elemento con l'ID stripe-script. Se non esiste, viene creato un nuovo tag <script> e aggiunto al corpo del documento. Con lo src che punta al checkout di Stripe.

All'interno della funzione invokeStripe(), dopo che lo script è stato caricato, configuro l'handler di pagamento utilizzando StripeCheckout.configure(). Qui, passo la chiave pubblicabile e configuro il comportamento del token. Ciò che avviene quando Stripe genera il token di pagamento.

In questo caso, il token viene stampato nella console e mostrato un alert che indica la generazione del token.

Quando l'utente avvia il pagamento, richiamo la funzione makePayment(). Essa prende in input l'importo desiderato e apre la finestra di pagamento. Oltre alla chiave API e al comportamento del token, passo informazioni come il nome e la descrizione della transazione, e l'importo in centesimi (quindi moltiplico il valore dell'importo per 100).

In questo flusso, il front-end si occupa principalmente di raccogliere le informazioni di pagamento e inviarle a Stripe, che genera un token sicuro. Questo deve essere gestito dal back-end per completare la transazione, ma in questa fase ci concentriamo sul front-end e sull'integrazione diretta con Stripe.js.

Il componente payment.component.ts

Ecco il componente payment.component.ts:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { environment } from '../../environments/environments';
@Component({
  selector: 'app-payment', // Il selettore del componente è stato aggiornato
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './payment.component.html', // Aggiornato per puntare al file HTML del componente Payment
  styleUrls: ['./payment.component.css']
})
export class PaymentComponent { // Il nome della classe è ora "PaymentComponent"
  paymentHandler: any = null;
  stripeAPIKey: any = environment.stripeKey; // Qui va inserita la chiave pubblicabile di Stripe
  constructor() {}
  ngOnInit() {
    this.invokeStripe(); // Richiamo della funzione per caricare Stripe quando il componente viene inizializzato
  }
  makePayment(amount: any) {
    console.log(this.stripeAPIKey);
    const paymentHandler = (window as any).StripeCheckout.configure({
      key: this.stripeAPIKey,
      locale: 'auto',
      token: function (stripeToken: any) {
        console.log(stripeToken); // Stampa il token generato da Stripe per confermare il pagamento
        alert('Stripe token generated!');
      },
    });
    paymentHandler.open({
      name: 'Esempio Applicazione Angular',
      description: 'Pagamenti con Stripe',
      amount: amount * 100, // Importo convertito in centesimi poiché Stripe lavora in centesimi
    });
  }
  invokeStripe() {
    if (!window.document.getElementById('stripe-script')) {
      const script = window.document.createElement('script'); // Creazione dinamica dello script Stripe
      script.id = 'stripe-script';
      script.type = 'text/javascript';
      script.src = 'https://checkout.stripe.com/checkout.js'; // Caricamento del widget di checkout di Stripe
      script.onload = () => {
        this.paymentHandler = (window as any).StripeCheckout.configure({
          key: this.stripeAPIKey,
          locale: 'auto',
          token: function (stripeToken: any) {
            console.log(stripeToken); // Conferma del pagamento avvenuto
            alert('Payment has been successful!');
          },
        });
      };
      window.document.body.appendChild(script); // Aggiunta dello script alla pagina
    }
  }
}

Modifica dell'HTML del componente Payment

Ora, aggiungiamo un pulsante che consente all'utente di effettuare un pagamento. Modifica quindi il file payment.component.html in questo modo:

<div class="payment-container">
<h2>Payment Component</h2>
<p>Benvenuto nel sistema di pagamento!</p>
<!-- In futuro qui aggiungeremo le integrazioni con Stripe e PayPal -->
<button (click)="makePayment(25)">Effettua Pagamento</button>
</div>

Questo codice genera un'interfaccia semplice con un pulsante che, una volta cliccato, attiva il processo di pagamento con Stripe per un importo di 25 unità.

A questo punto, il componente è configurato per gestire i pagamenti utilizzando Stripe Checkout. Dovrai solo collegare la logica del back-end per gestire i token di pagamento e completare le transazioni in modo sicuro.

Testa l'applicazione

Per effettuare il test di pagamento con Stripe, visita questo indirizzo e consulta la guida. Noterai che il sistema fornisce numeri di carta di credito di test, ai quali potrai abbinare una data di scadenza e un codice di sicurezza qualsiasi.

Procedi cliccando sul pulsante "Effettua Pagamento", inserisci la tua email di registrazione su Stripe, il numero di carta fornito dal servizio, la data consigliata e il codice CVC:

Clicca su "Paga". Se tutto dovesse andare per il verso giusto apri la console e noterai che il sistema ha generato un token.

Conclusioni: integrazione tra Angular e Stripe

In questo articolo abbiamo integrato Stripe in un'applicazione Angular per gestire pagamenti online. Abbiamo visto come creare un account su Stripe e ottenere le chiavi API, configurare il modulo Stripe nell'ambiente Angular e implementare un componente di pagamento.

Con il componente PaymentComponent abbiamo aggiunto la logica per aprire una finestra di pagamento tramite Stripe Checkout e gestire i token di pagamento. Infine, abbiamo parlato di come testare l'integrazione utilizzando numeri di carta di credito di test forniti da Stripe.