Scoprite come incorporare un modulo di pagamento WooshPay personalizzato nel vostro sito web o nella vostra applicazione. Il codice lato client e server crea un modulo di pagamento con elementi per completare il pagamento con vari metodi di pagamento.

Flusso di pagamento #

Le fasi di utilizzo dell'SDK WooshPay sono poche:

Creare un Intento di pagamento #

Aggiungere un endpoint sul server che crei un PaymentIntent. Un PaymentIntent segue il ciclo di vita del pagamento del cliente, tenendo traccia di tutti i tentativi di pagamento falliti e assicurando che il cliente venga addebitato una sola volta. Restituire il segreto del cliente del PaymentIntent (il numero del PaymentIntent in questo caso) nella risposta per terminare il pagamento sul cliente. Abilitiamo le carte per impostazione predefinita.

Caricare wooshpay.js #

Utilizzate wooshpay.js per rimanere conformi alla normativa PCI, assicurando che i dati di pagamento siano inviati direttamente a WooshPay senza toccare il vostro server. Caricare sempre wooshpay.js da js.wooshpay.com per rimanere conformi. Non includete lo script in un bundle o ospitatelo voi stessi.

Inizializzare gli elementi WooshPay #

Inizializzare la libreria WooshPay Elements UI con il segreto del cliente. Elements gestisce i componenti dell'interfaccia utente necessari per raccogliere i dati di pagamento.

Completare il pagamento sul cliente #

Completare il pagamento
Chiamata confermaPagamento()passando il PaymentElement e un return_url per indicare dove WooshPay deve reindirizzare l'utente dopo aver completato il pagamento. Per i pagamenti che richiedono l'autenticazione, WooshPay visualizza un modale per l'autenticazione 3D Secure o reindirizza il cliente a una pagina di autenticazione, a seconda del metodo di pagamento. Dopo che il cliente ha completato il processo di autenticazione, viene reindirizzato alla pagina indirizzo_di_ritorno.

Gestire gli errori #

Se si verificano errori immediati (ad esempio, la carta del cliente viene rifiutata), wooshpay.js restituisce un errore. Mostrate il messaggio di errore al cliente, in modo che possa riprovare.

Mostra un messaggio sullo stato del pagamento #

Quando l'WooshPay reindirizza il cliente all'indirizzo indirizzo_di_ritorno, il segreto_intento_di_pagamento_del_clienteè aggiunto da wooshpay.js. Utilizzarlo per recuperare il PaymentIntent e determinare cosa mostrare al cliente.

Richiedi una demo #

Si può scaricare da qui JS SDK Demo scaricare