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}¤cy=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 StripePaymentComponentCodice 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 PayPalPaymentComponentCodice 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}¤cy=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.jsQuindi 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.