Configurazione e integrazione di PayPal con Angular

In questa sezione, esamineremo il processo di integrazione di PayPal nella nostra applicazione Angular. PayPal è una delle piattaforme di pagamento più diffuse al mondo, e consente di effettuare transazioni online in modo sicuro e semplice. Vedremo come configurare PayPal nel nostro progetto Angular e implementare componenti per gestire il pagamento tramite PayPal.

Creazione di un account PayPal e ottenimento del Client ID

Il primo passo consiste nel creare un account su PayPal Developer. Una volta creato e verificato l'account, puoi ottenere il Client ID necessario per l'integrazione.

• accedi alla PayPal Developer Dashboard.
• Crea un'applicazione nella sezione "My Apps & Credentials".
• Ottieni il Client ID dalla tua app nella sezione "Sandbox" (per test) o "Live" (per produzione).

Configurazione del modulo PayPal in Angular

Dopo aver ottenuto il Client ID, possiamo configurare l'integrazione di PayPal nella nostra applicazione Angular. Aggiungi il Client ID nel file environments.ts della tua applicazione:

export const environment = {
  production: false,
  stripeKey: "pk_test_51NFAkeGEJAl10yEzK7hymQoN5MDz28Zub0yJ85M7NdQVOho3zrh6cgH1J2AxOnKE1q0KnIbUEbK9eGAxyTGYc0zk00JOKhqPbV",
  paypalClientId: 'AfZ1bzSV7-kMNtcNxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
};

Integrare PayPal SDK nel componente payment.component.ts

Aggiungi il seguente codice nel 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
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './payment.component.html',  // Puntare al file HTML del componente Payment
  styleUrls: ['./payment.component.css']
})
export class PaymentComponent {
  paymentHandler: any = null;
  stripeAPIKey: any = environment.stripeKey;
  constructor() {}
  ngOnInit() {
    this.invokeStripe();  // Carica lo script di Stripe
    this.loadPayPalScript();  // Carica lo script di PayPal
  }
  // Metodo per Stripe
  makePayment(amount: any) {
    console.log(this.stripeAPIKey)
    const paymentHandler = (window).StripeCheckout.configure({
      key: this.stripeAPIKey,
      locale: 'auto',
      token: function (stripeToken: any) {
        console.log(stripeToken);
        alert('Stripe token generated!');
      },
    });
    paymentHandler.open({
      name: 'Esempio Applicazione Angular',
      description: 'Pagamenti con Stripe',
      amount: amount * 100,  // Converti l'importo in centesimi
    });
  }
  // Metodo per caricare Stripe
  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 = (window).StripeCheckout.configure({
          key: this.stripeAPIKey,
          locale: 'auto',
          token: function (stripeToken: any) {
            console.log(stripeToken);
            alert('Payment has been successful!');
          },
        });
      };
      window.document.body.appendChild(script);
    }
  }
  // Metodo per caricare PayPal
  loadPayPalScript() {
    if (!window.document.getElementById('paypal-script')) {
      const script = window.document.createElement('script');
      script.id = 'paypal-script';
      script.src = `https://www.paypal.com/sdk/js?client-id=${environment.paypalClientId}&currency=USD`;  // Usa il client ID dall'environment
      script.onload = () => {
        (window).paypal.Buttons({
          createOrder: (data: any, actions: any) => {
            return actions.order.create({
              purchase_units: [{
                amount: {
                  value: '25.00'  // Inserisci l'importo che vuoi far pagare
                }
              }]
            });
          },
          onApprove: (data: any, actions: any) => {
            return actions.order.capture().then((details: any) => {
              alert('Transaction completed by ' + details.payer.name.given_name);
              console.log(details);  // Logga i dettagli della transazione
            });
          }
        }).render('#paypal-button-container');  // Inserisci il bottone in questo container
      };
      window.document.body.appendChild(script);  // Aggiungi lo script alla pagina
    }
  }
}

Pulsante PayPal

Quindi modifica anche il layout payment.componente.html in modo tale che possa rendere il button di paypal:

<div class="payment-container">
  <h2>Componente di Pagamento</h2>
  <p>Benvenuto nel sistema di pagamento!</p>
  <!-- Pulsante di pagamento Stripe -->
  <button (click)="makePayment(25)">Effettua Pagamento con Stripe</button>
  <!-- Contenitore per il pulsante PayPal -->
  <div style="margin-top:10px" id="paypal-button-container"></div>
</div>

Preparazione per il test

Ora il tutto è pronto per il test. In seguito miglioreremo il layout grazie al framework Bootstrap, se non sai come fare ti invito a leggerti la guida Come integrare Bootstrap in Angular. Inoltre renderemo l'applicazione dinamica, cioè simuleremo un acquisto su e-commerce.

Integrazione di Stripe e PayPal in componenti separati

Mantenere i componenti separati è essenziale in ogni logica ben strutturata. Per questo motivo, ottimizzeremo l'integrazione dei pagamenti nella nostra applicazione Angular creando componenti distinti per Stripe e PayPal. Questo approccio non solo migliora la manutenibilità del codice, ma ne aumenta anche la chiarezza, facilitando così la gestione delle funzionalità legate ai pagamenti.

Il primo passo è creare un componente dedicato per gestire i pagamenti tramite Stripe. Questo componente si occuperà esclusivamente della logica di pagamento, caricando dinamicamente lo script di Stripe e gestendo le transazioni. Da terminale digita:

ng generate component StripePaymentComponent

Codice per StripePaymentComponent

// stripe-payment.component.ts
import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environments';
@Component({
  selector: 'app-stripe-payment',
  templateUrl: './stripe-payment.component.html',
  styleUrls: ['./stripe-payment.component.css']
})
export class StripePaymentComponent implements OnInit {
  paymentHandler: any = null;
  stripeAPIKey: string = environment.stripeKey;  // Chiave pubblica di Stripe
  constructor() { }
  ngOnInit(): void {
    this.loadStripeScript();  // Carica lo script di Stripe all'inizio
  }
  makePayment(amount: number): void {
    const paymentHandler = (window).StripeCheckout.configure({
      key: this.stripeAPIKey,
      locale: 'auto',
      token: (stripeToken: any) => {
        console.log(stripeToken);
        alert('Stripe token generated!');
      },
    });
    paymentHandler.open({
      name: 'Esempio Applicazione Angular',
      description: 'Pagamenti con Stripe',
      amount: amount * 100,  // Importo in centesimi
    });
  }
  loadStripeScript(): void {
    if (!window.document.getElementById('stripe-script')) {
      const script = window.document.createElement('script');
      script.id = 'stripe-script';
      script.src = 'https://checkout.stripe.com/checkout.js';
      window.document.body.appendChild(script);
    }
  }
}

Template HTML per StripePaymentComponent

<div class="stripe-payment-container">
  <h2>Pagamento con Stripe</h2>
  <button (click)="makePayment(25)">Effettua Pagamento di $25</button>
</div>

Creazione del componente PayPalPaymentComponent

Analogamente, creiamo un componente per gestire i pagamenti tramite PayPal. Questo componente si occuperà di caricare lo script di PayPal e gestire le transazioni:

ng generate c PayPalPaymentComponent

Codice per PayPalPaymentComponent

// paypal-payment.component.ts
import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environments';
@Component({
  selector: 'app-paypal-payment',
  templateUrl: './paypal-payment.component.html',
  styleUrls: ['./paypal-payment.component.css']
})
export class PayPalPaymentComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
    this.loadPayPalScript();  // Carica lo script di PayPal all'inizio
  }
  loadPayPalScript(): void {
    if (!window.document.getElementById('paypal-script')) {
      const script = window.document.createElement('script');
      script.id = 'paypal-script';
      script.src = `https://www.paypal.com/sdk/js?client-id=${environment.paypalClientId}&currency=USD`;
      script.onload = () => {
        this.renderPayPalButton();  // Rendi il pulsante PayPal dopo il caricamento dello script
      };
      window.document.body.appendChild(script);
    }
  }
  renderPayPalButton(): void {
    (window).paypal.Buttons({
      createOrder: (data: any, actions: any) => {
        return actions.order.create({
          purchase_units: [{
            amount: {
              value: '25.00'  // Inserisci l'importo
            }
          }]
        });
      },
      onApprove: (data: any, actions: any) => {
        return actions.order.capture().then((details: any) => {
          alert('Transaction completed by ' + details.payer.name.given_name);
          console.log(details);
        });
      }
    }).render('#paypal-button-container');  // Rendi il pulsante PayPal in questo container
  }
}

Template HTML per PayPalPaymentComponent

Crea il file paypal-payment.component.html per il tuo componente PayPal:

<div id="paypal-button-container"></div>

Ora aggiorna app.component.html:

<main class="main">
  <div class="content">
    <app-stripe-payment></app-stripe-payment>
    <app-paypal-payment></app-paypal-payment>
  </div>
</main>
<router-outlet />

Integrare di Bootstrap nell'applicazione

Prima di proseguire miglioriamo il layout della nostra applicazione, a tal proposito utilizzeremo il framework Bootstrap, ultima versione. Da terminale digita:

npm install bootstrap@5.3.3 popper.js

Quindi nel file style.css aggiungi la seguente riga:

@import 'bootstrap/dist/css/bootstrap.min.css';

Modifichiamo poi i layout di conseguenza:

<main class="main">
  <div class="content">
    <app-stripe-payment></app-stripe-payment>
    <app-paypal-payment></app-paypal-payment>
  </div>
</main>
<router-outlet />

Conclusioni

In questo articolo, abbiamo esplorato l'integrazione di PayPal e Stripe in un'applicazione Angular. Abbiamo iniziato creando un account su PayPal Developer per ottenere il Client ID, essenziale per l'integrazione. Abbiamo poi configurato l'ambiente aggiungendo il Client ID nel file environments.ts. Garantendo un accesso semplice alle credenziali.

Successivamente, abbiamo implementato metodi per caricare dinamicamente gli SDK di PayPal e Stripe. Assicurandoci che le librerie fossero pronte per l'uso. Abbiamo quindi strutturato il codice in componenti separati per ciascun sistema di pagamento, migliorando la manutenibilità e la chiarezza.

Infine, siamo passatti alla pianificazione del layout dell'applicazione utilizzando Bootstrap, per render la UI più accattivante e intuitiva. Con queste integrazioni, l'app è pronta per simulare un'esperienza di e-commerce, con solide basi per ulteriori miglioramenti.