Salvare una carta senza autenticazione dell'istituto bancario
Stripe ti consente di acquisire i dati della carta ed effettuare gli addebiti al cliente in un secondo momento. In alcuni paesi le banche richiedono una seconda forma di autenticazione, come l’inserimento di un codice inviato a un telefono. Questo passaggio supplementare riduce la conversione. Infatti, se un cliente non usa attivamente il tuo sito web o la tua applicazione, non è disponibile ad autenticare l’acquisto.
Se svolgi la tua attività principalmente negli Stati Uniti e in Canada, le banche non richiedono l’autenticazione, quindi puoi adottare questa integrazione più semplice. Questa integrazione non sarà conforme nei paesi che richiedono l’autenticazione per il salvataggio delle carte (ad esempio, l’India), pertanto sarà necessario apportare modifiche importanti se deciderai di espanderti in altri paesi o aggiungere altre modalità di pagamento. Scopri come salvare le carte che richiedono l’autenticazione.
Conformità
Quando salvi i dati di pagamento di un cliente, sei responsabili della conformità a tutte le leggi, i regolamenti e le regole del circuito applicabili, ad esempio nei casi in cui vuoi salvare la modalità di pagamento del cliente per uso futuro per effettuare addebiti quando il cliente non utilizza attivamente il tuo sito web o la tua app. Aggiungi al tuo sito web o alla tua app delle condizioni che indichino come intendi salvare i dettagli della modalità di pagamento e permetti ai clienti di accettare o meno queste condizioni. Se vuoi addebitare l’importo quando i clienti sono offline, accertati che i termini includano quanto segue:
- Il consenso del cliente a disporre un pagamento o una serie di pagamenti per suo conto per determinate transazioni.
- La tempistica e la frequenza dei pagamenti previste (ad esempio, se gli addebiti sono per rate programmate, pagamenti di abbonamenti o ricariche non programmate).
- Il modo in cui determini l’importo del pagamento.
- I tuoi termini di cancellazione, se la modalità di pagamento è per un servizio in abbonamento.
Assicurati di conservare una copia scritta del consenso fornito dal cliente relativamente a questi termini.
Acquisisci i dati della cartaLato client
Prima di iniziare questa guida, devi creare un account Stripe. Registrati ora.
Crea una pagina di pagamento per acquisire i dati della carta del cliente. Usa Stripe Elements, una libreria di interfaccia utente che ti consente di creare moduli di pagamento personalizzati. Per iniziare a utilizzare Elements, includi la libreria Stripe.js con il seguente script sulla pagina di pagamento.
<script src="https://js.stripe.com/v3/"></script>
Carica sempre Stripe.js direttamente da js.stripe.com per garantire la conformità alle norme PCI. Non includere lo script in un pacchetto e non utilizzarne una copia in self-hosting.
Per sfruttare al massimo la funzionalità avanzata contro le frodi di Stripe, includi questo script in ogni pagina del sito, non solo in quella di pagamento. Se includi lo script in ogni pagina, Stripe può rilevare comportamenti sospetti che potrebbero essere indicativi di frodi mentre gli utenti navigano sul tuo sito web.
Aggiungere Elements alla pagina
Per acquisire in modo sicuro i dati delle carte dai tuoi clienti, Elements crea per te dei componenti di interfaccia utente ospitati da Stripe, che vengono quindi inseriti nel tuo modulo di pagamento, anziché essere creati direttamente da te. Per definire il punto di inserimento di questi componenti, crea elementi DOM (contenitori) vuoti con ID univoci nel tuo modulo di pagamento.
<input id="cardholder-name" type="text"> <!-- placeholder for Elements --> <div id="card-element"></div> <div id="card-result"></div> <button id="card-button">Save Card</button>
Poi, per creare un’istanza dell’oggetto Stripe, specifica come primo parametro la tua chiave API pubblicabile. Quindi, crea un’istanza dell’oggetto Elements e usala per montare un elemento card
nel DOM.
card
Element semplifica il modulo di pagamento e riduce al minimo il numero di campi obbligatori inserendo un unico campo di immissione flessibile che acquisisce in modo sicuro tutti i dati relativi alla carta.
In alternativa, combina cardNumber
Element, cardExpiry
Element e cardCvc
Element per creare un modulo flessibile con più campi di immissione per la carta.
Nota
Acquisisci sempre il codice postale per aumentare i tassi di accettazione delle carte e ridurre le frodi.
Card Element a inserimento unico acquisisce automaticamente il codice postale del cliente e lo invia a Stripe. Se crei un modulo di pagamento con il (numero di carta, la scadenza e il CVC) di Elements, aggiungi un campo di inserimento distinto per il codice postale del cliente.
const stripe = Stripe(
); const elements = stripe.elements(); const cardElement = elements.create('card'); cardElement.mount('#card-element');'pk_test_TYooMQauvdEDq54NiTphI7jx'
Un componente di Stripe Elements contiene un iframe che invia in modo sicuro a Stripe le informazioni sul pagamento tramite una connessione HTTPS. Affinché l’integrazione funzioni, anche l’indirizzo della pagina di completamento del pagamento deve iniziare con https://
anziché http://
.
Puoi eseguire il test dell’integrazione senza utilizzare HTTPS. Abilitalo quando è tutto pronto per accettare i pagamenti in modalità live.
const cardholderName = document.getElementById('cardholder-name'); const cardButton = document.getElementById('card-button'); const resultContainer = document.getElementById('card-result'); cardButton.addEventListener('click', async (ev) => { const {paymentMethod, error} = await stripe.createPaymentMethod({ type: 'card', card: cardElement, billing_details: { name: cardholderName.value, }, } ); if (error) { // Display error.message in your UI. resultContainer.textContent = error.message; } else { // You have successfully created a new PaymentMethod resultContainer.textContent = "Created payment method: " + paymentMethod.id; } });
Invia l’ID del PaymentMethod risultante al tuo server.
Configurare StripeLato server
Utilizza le nostre librerie ufficiali per accedere all’API Stripe dalla tua applicazione:
Salva la cartaLato server
Salva la carta associando il PaymentMethod a un cliente. Puoi utilizzare l’oggetto Customer per memorizzare altre informazioni sul cliente, ad esempio i dati di spedizione e l’indirizzo email.
Se hai un oggetto Customer esistente, puoi associarvi il PaymentMethod.
A questo punto, associa l’ID del cliente e l’ID del PaymentMethod alla tua rappresentazione interna di un cliente, se ne hai una.
Addebita un importo sulla carta salvataLato server
Quando è tutto pronto, recupera gli ID del PaymentMethod e del cliente a cui addebitare il pagamento. Puoi farlo salvando gli ID di entrambi nel database o utilizzando l’ID del cliente per cercare tutti i PaymentMethods disponibili del cliente.
Usa l’ID del PaymentMethod e l’ID del cliente per creare un nuovo PaymentIntent. Imposta error_on_requires_action su true per rifiutare i pagamenti che richiedono azioni da parte del cliente, come l’autenticazione a due fattori.
Quando un tentativo di pagamento non va a buon fine, anche la richiesta non riesce. Viene visualizzato un codice di stato HTTP 402 e Stripe restituisce un errore. Devi chiedere al cliente di tornare all’applicazione (ad esempio inviando un’email) per completare il pagamento. Per determinare il motivo del rifiuto del pagamento da parte della società emittente della carta, verifica il codice di errore generato dalla libreria dell’API Stripe o il codice last_payment_error.decline_code del PaymentIntent.
Gestisci eventuali errori delle carte
Informa il cliente che il pagamento non è riuscito e indirizzalo al modulo di pagamento creato al passaggio 1, dove potrà inserire i dati di una nuova carta. Invia questo nuovo ID PaymentMethod al server da associare all’oggetto Customer ed esegui nuovamente il pagamento.
In alternativa, puoi creare un PaymentIntent e salvare una carta in un’unica chiamata API se hai già creato un oggetto Customer.
L’impostazione di setup_future_usage su on_session
indica a Stripe che vuoi salvare la carta per utilizzarla in seguito, senza attivare autenticazioni inutili.
Testare l'integrazione
Stripe fornisce carte di test che puoi utilizzare in modalità di test per simulare il comportamento di carte diverse. Utilizza queste carte con un CVC, un codice postale e una data di scadenza futura qualsiasi.
Numero | Descrizione |
---|---|
La transazione ha esito positivo e il pagamento viene elaborato immediatamente. | |
La transazione ha sempre esito negativo con un codice di rifiuto insufficient_funds . | |
Richiede l’autenticazione, che in questa integrazione non andrà a buon fine restituendo il codice authentication_required . |
Aggiornare l’integrazione per gestire l’autenticazione delle carte
Questa integrazione rifiuta le carte che richiedono l’autenticazione durante il pagamento. Se nella Dashboard sono presenti molti pagamenti contrassegnati come Failed
, è il momento di aggiornare l’integrazione. L’integrazione globale di Stripe gestisce questi pagamenti invece di rifiutarli automaticamente.