Angular e sistemi di pagamento: l'ambiente di sviluppo

Prima di poter integrare un sistema di pagamento con Angular, è essenziale configurare correttamente l'ambiente di sviluppo. In questa sezione, ti guiderò passo dopo passo nell'installazione degli strumenti necessari e nella creazione di un nuovo progetto Angular. Inoltre, vedremo come installare le dipendenze e configurare l'ambiente per l'integrazione delle API di pagamento, come Stripe e PayPal.

Installazione di Angular CLI e creazione di un nuovo progetto Angular

Per iniziare, dobbiamo installare Angular CLI, uno strumento che semplifica la creazione, la gestione e il deployment dei progetti Angular. Se non hai già installato Node.js sul tuo sistema, fallo prima di qualsiasi altro cosa. Angular CLI si basa infatti su Node.js per gestire i pacchetti e le dipendenze.

Installazione di Angular CLI

Installare Node.js:

• vai sul sito ufficiale di Node.js e scarica la versione LTS. Segui le istruzioni per l'installazione, variano a seconda del sistema operativo che stai utilizzando.
• Dopo l'installazione verifica che Node.js sia stato installato correttamente aprendo il terminale o il prompt dei comandi e digitando

  node -v

  Questo comando ti restituirà la versione di Node.js installata.

Installare Angular CLI:

• Con Node.js installato, ora possiamo procedere all'installazione di Angular CLI. Apri il terminale e digita

  npm install -g @angular/cli

  Questo installerà Angular CLI a livello globale, permettendoti di creare e gestire progetti Angular da qualsiasi cartella sul tuo computer.

Creare un nuovo progetto Angular:

• Una volta completata l'installazione di Angular CLI, possiamo creare il nostro progetto. Nel terminale, esegui il comando

  ng new Appay

• Durante la creazione del progetto, Angular CLI ti chiederà alcune opzioni, come l'inclusione di Angular Routing e il tipo di stylesheet (CSS, SCSS, ecc.). Seleziona l'opzione che meglio si adatta alle tue esigenze (per il routing, puoi scegliere "Yes" e CSS per i fogli di stile se non hai preferenze specifiche).

Avviare il progetto:

• Dopo aver creato il progetto, spostati nella cartella del progetto appena creato con

  cd Appay ng serve

• Ora apri il browser e vai su http://localhost:4200/. Se vedi la schermata di benvenuto di Angular, l'ambiente di sviluppo è pronto e funzionante.

Installazione delle dipendenze (API e moduli di pagamento)

Ora che abbiamo creato il progetto Angular, è il momento di installare le dipendenze per integrare i sistemi di pagamento. Poiché stiamo lavorando con Stripe e PayPal, avremo bisogno delle loro librerie JavaScript, oltre a qualsiasi altra libreria utile per gestire i pagamenti.

Installazione del pacchetto di Stripe

Stripe fornisce un SDK JavaScript ufficiale che ci permette di gestire pagamenti con carte di credito e altre funzioni avanzate.

Per installare la libreria Stripe, apri il terminale nella cartella del progetto e digita:

npm install @stripe/stripe-js

Questa libreria ci permetterà di interagire con l'API di Stripe direttamente dal nostro front-end Angular.

Installazione del pacchetto di PayPal

PayPal offre anche una libreria ufficiale per integrare il suo sistema di pagamento nelle applicazioni web. Installiamola con il comando:

npm install @paypal/paypal-js

Questa libreria ci consentirà di integrare il pulsante di pagamento di PayPal direttamente nelle nostre pagine.

Altre dipendenze utili

Oltre alle librerie per Stripe e PayPal, potrebbe essere utile sfruttare altre risorse per la gestione delle richieste HTTP necessarie a comunicare con le API di pagamento. Fortunatamente Angular offre il servizio HttpClient che è sufficiente per la maggior parte delle esigenze di comunicazione con le API esterne.

Da Angular 18, con l'uso dei Standalone Components, non è più necessario importare HttpClientModule come modulo separato nel file app.module.ts. Ora possiamo gestire direttamente le dipendenze all'interno dei componenti standalone.

Utilizzare HttpClient in un componente standalone

Quando lavori con componenti standalone in Angular, puoi semplicemente importare HttpClient direttamente nel componente. Ecco un esempio su come farlo:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';
@Component({
    selector: 'app-payment',
    templateUrl: './payment.component.html',
    styleUrls: ['./payment.component.css'],
    standalone: true
})
export class PaymentComponent {
    constructor(private http: HttpClient) {
        // Logica per chiamare API o gestire i pagamenti
    }
    makePayment() {
        this.http.post('https://api.example.com/payments', {
            amount: 100,
            currency: 'usd'
        }).subscribe(response => {
            console.log('Pagamento effettuato con successo', response);
        }, error => {
            console.error('Errore nel pagamento', error);
        });
    }
}
bootstrapApplication(PaymentComponent);

In questo esempio:

• HttpClient è iniettato nel costruttore del componente per eseguire richieste HTTP verso le API di pagamento (ad esempio, per connettersi a Stripe o PayPal).
• Non è necessario importare HttpClientModule nel modulo principale o nella proprietà imports del componente, poiché HttpClient è già disponibile per l'uso nei componenti standalone.

Questo approccio semplifica la configurazione del progetto, permettendoti di gestire le dipendenze e le comunicazioni API in modo più diretto e modulare all'interno dei componenti stessi.

Variabili d'ambiente per le API di pagamento

Come nelle versioni precedenti di Angular, le variabili di ambiente sono configurate nei file environment.ts e environment.prod.ts, utili per separare le configurazioni tra ambienti di sviluppo e produzione. Da Angular 18 in poi questi file non vengono generati automaticamente per cui vanno creati prima.

Sotto src crea poi la folder environmentscome da immagine:

Quindi crea i file environments.ts ed aggiungi:

export const environment = {
    production: false,
    stripeKey: 'la-tua-chiave-pubblica-stripe',
    paypalClientId: 'il-tuo-client-id-paypal'
};

Ora genera environments.prod.ts ed aggiungi:

export const environment = {
    production: true,
    stripeKey: 'la-tua-chiave-pubblica-stripe-per-produzione',
    paypalClientId: 'il-tuo-client-id-paypal-per-produzione'
};

Modificare angular.json per gestire gli ambienti

Il passo successivo è configurare angular.json per utilizzare questi file quando si compila il progetto in modalità produzione o sviluppo. Apri il file nella radice del progetto e cerca le configurazioni di build. Aggiungi il riferimento ai file environment.ts e environment.prod.ts in modo che Angular sappia quale usare durante la build:

...
"configurations": {
    "production": {
        "fileReplacements": [
            {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
            }
        ],
        "budgets": [
            {
                "type": "initial",
                "maximumWarning": "500kB",
                "maximumError": "1MB"
            },
            {
                "type": "anyComponentStyle",
                "maximumWarning": "2kB",
                "maximumError": "4kB"
            }
        ],
        "outputHashing": "all"
    },
    "development": {
        "optimization": false,
        "extractLicenses": false,
        "sourceMap": true
    }
},
...

Questa configurazione comunica ad Angular di sostituire environment.ts con environment.prod.ts durante la build in modalità di produzione.

Creare il componente standalone

Da terminale digita:

ng generate component payment --standalone

Questo comando creerà un componente che non ha bisogno di essere dichiarato in un modulo principale. La CLI genererà un file payment.component.ts che conterrà la logica del componente.

Struttura del componente

Il file payment.component.ts apparirà in questo modo:

import { Component } from '@angular/core';
@Component({
    selector: 'app-payment',
    standalone: true,
    imports: [],
    templateUrl: './payment.component.html',
    styleUrl: './payment.component.css'
})
export class PaymentComponent {
}

Questo è un semplice componente standalone. Non contiene logica di pagamento ma ci servirà come punto di partenza.

Modifica del template HTML

Modifichiamo il template del componente payment.component.html per aggiungere un'interfaccia utente di base per il sistema di pagamento. Ecco un esempio:

<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()">Effettua Pagamento</button>
</div>

Questo template contiene un pulsante per simulare un pagamento, al quale aggiungeremo in seguito la logica.

Stili del componente

Nel file payment.component.css, puoi aggiungere alcuni stili di base per migliorare l'interfaccia:

.payment-container {
    padding: 20px;
    border: 1px solid &#ccc;
    border-radius: 10px;
    width: 300px;
    margin: 0 auto;
    text-align: center;
}
button {
    background-color: bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
button:hover {
    background-color: 8b3;
}

La logica di pagamento

Nel file payment.component.ts possiamo aggiungere una funzione che simula l'esecuzione di un pagamento. Successivamente integreremo le API di Stripe e PayPal:

import { Component } from '@angular/core';
@Component({
    selector: 'app-payment',
    templateUrl: './payment.component.html',
    styleUrls: ['./payment.component.css'],
    standalone: true
})
export class PaymentComponent {
    constructor() {}
    makePayment() {
        console.log('Simulazione di un pagamento!');
        // Aggiungeremo la logica per Stripe e PayPal qui
    }
}

In questo esempio, quando l'utente clicca il pulsante "Effettua Pagamento", viene invocata la funzione makePayment()che per ora effettua solo un log nel console. Più avanti in questa funzione inseriremo le chiamate per Stripe e PayPal.

Integrazione del componente nel progetto

Per rendere questo componente visibile nell'App modifica il file app.component.html e aggiungi il componente app-payment:

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

Devi prima assicurarti che i componenti che utilizzi siano inclusi nella proprietà imports dei componenti che li utilizzano.

Nel caso specifico, se stai utilizzando RouterOutlet e altri componenti nel tuo app.component.ts, devi aggiungere PaymentComponent all'array imports.

Ecco un esempio di come dovresti configurare app.component.ts per includere PaymentComponent:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PaymentComponent } from './payment/payment.component';
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, PaymentComponent],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css',
})
export class AppComponent {
    title = 'Appay';
}

Prova quindi a servire il progetto:

ng serve -o

se non ci sono errori dovresti vedere:

Facendo click nella console vedrai il risultato: "Simulazione di un pagamento!"

Utilizzo delle variabili di ambiente

Infine, per accedere alle variabili d'ambiente fai come segue:

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { environment } from '../../environments/environments';
@Component({
    selector: 'app-payment',
    templateUrl: './payment.component.html',
    styleUrls: ['./payment.component.css'],
    standalone: true
})
export class PaymentComponent {
    stripeKey = environment.stripeKey;
    paypalClientId = environment.paypalClientId;
    constructor(private http: HttpClient) {
        console.log('Chiave Stripe:', this.stripeKey);
        console.log('Client ID PayPal:', this.paypalClientId);
    }
    makePayment() {
        console.log('Simulazione di un pagamento!');
        // Aggiungeremo la logica per Stripe e PayPal qui
    }
}

Conclusioni

Abbiamo configurato con successo l'ambiente di sviluppo Angular e preparato il progetto per l'integrazione di sistemi di pagamento come Stripe e PayPal.

Abbiamo poi installato Angular CLI, creato un nuovo progetto, aggiunte le dipendenze necessarie e configurato le variabili d'ambiente.

Infine, abbiamo creato un componente standalone per gestire i pagamenti e verificato che tutto funzioni correttamente. Ora siamo pronti ad aggiungere la logica di pagamento reale e integrare le API di Stripe e PayPal.