Angular 8 – Esempio di gateway di pagamento Stripe

Blog

Angular 8 – Esempio di gateway di pagamento Stripe

L'integrazione del gateway di pagamento Stripe con l'applicazione angular 8 è molto semplice. Ci sono molti pacchetti disponibili per stripe e angular ma, ti mostreremo, quanto facilmente puoi gestire il gateway di pagamento stripe nell'applicazione Angular 8 senza una libreria Angular 8 aggiuntiva per il gateway di pagamento Stripe .



Prima di iniziare l'integrazione di Stripe in Angular 8. Abbiamo bisogno di un |_+_|. Se non sai come creare un nuovo progetto angolare 8. Seguire questo tutorial.

Stripe offre due modi per interagire con il server Stripe utilizzando JS.



guarda le foto private di twitter
  • Modulo Stripe predefinito.
  • Modulo a strisce personalizzato.

|_+_| ci offre il modo più semplice e sicuro per creare un token.

Quindi, iniziamo con 'Modulo a strisce predefinito'



Prima di tutto, dobbiamo aggiungere uno script di stripe checkout che evidenzierà la variabile globale stripecheckout.

Angular 8 Project

Il secondo modo per includerlo tramite componente.

Preferirò il secondo metodo perché in questo metodo la striscia verrà caricata quando ne abbiamo davvero bisogno.

Apri il |_+_| file e aggiungi il metodo seguente su di esso

Default Stripe Form

Quindi, chiama il metodo sopra da |_+_| metodo come di seguito

Il |_+_| il metodo aggiungerà lo script in modo dinamico quando il componente verrà caricato.

Quindi, crea un nuovo metodo chiamato|_+_|che aprirà il modulo di pagamento stripe.

app.component.ts

Successivamente, dobbiamo aggiungere il pulsante al modello del nostro componente. Apri il |_+_| file e inserisci l'HTML di seguito Abbiamo due modi per caricare questo file JS.

Nel primo metodo dobbiamo aggiungere il tag script al file|_+_|.

loadStripe() { if(!window.document.getElementById('stripe-script')) { var s = window.document.createElement('script'); s.id = 'stripe-script'; s.type = 'text/javascript'; s.src = 'https://checkout.stripe.com/checkout.js'; window.document.body.appendChild(s); } }

Dopo le modifiche di cui sopra il nostro |_+_| il file sarà simile a questo

ngOnInit

Hai integrato con successo la striscia con angolare. Con l'integrazione di cui sopra, sarai in grado di generare token. Ora devi codificare un codice lato server per catturare questo pagamento.

Per l'acquisizione dei pagamenti lato server, visita https://stripe.com/docs/api/charges/create

transizione di navigazione-reazione

Applicazione in esecuzione:

Esegui l'applicazione usando|_+_| e dovresti vedere tre pulsanti di pagamento, fai clic su uno qualsiasi apparirà il popup di pagamento a strisce. Congratulazioni!! Vedi, è stato facile.

La nostra applicazione sarà simile a questa

Dimostrazione dal vivo

Lettura consigliata

? Implementazione di flag di funzionalità in un'angolare

? Tabella materiale angolare con paginazione, ordinamento e filtraggio

? Moduli reattivi basati su modelli con Angular

☞ Programmazione in forma reattiva in Angular 7

☞ Test NgRx - La guida completa

? Ascolta le modifiche nei controlli della forma reattiva usando valueChanges in Angular

☞ 7 modi per rendere la tua app angolare più accessibile

? Angular RxJS: Osservabili, Osservatori e Operatori Introduzione

☞ I pro ei contro dello sviluppo angolare

se il mio twitter è privato e rispondo

#angular #angular-js #javascript