Accettare un pagamento Afterpay o Clearpay
Scopri come accettare Afterpay (nota anche come Clearpay nel Regno Unito), una modalità di pagamento utilizzata in Stati Uniti, Canada, Regno Unito, Australia e Nuova Zelanda.
Attenzione
Il contenuto di questa sezione fa riferimento a un prodotto precedente. Per conoscere il percorso di integrazione più recente, consulta la guida Accettare un pagamento. Sebbene Stripe supporti ancora questo prodotto, qualora il prodotto dovesse diventare obsoleto questo tipo di assistenza potrebbe terminare.
Gli utenti Stripe possono usare l’API Payment Intents con un percorso di integrazione unico per creare pagamenti utilizzando qualsiasi modalità supportata per accettare pagamenti Afterpay da clienti nei seguenti Paesi:
- Australia
- Canada
- Nuova Zelanda
- Regno Unito
- Stati Uniti
Afterpay è un metodo di pagamento monouso con notifica immediata che richiede ai clienti di autenticare il pagamento. I clienti vengono reindirizzati al sito Afterpay dove possono accettare i termini di un piano di rateizzazione. Quando il cliente accetta i termini, i fondi vengono garantiti e trasferiti sul tuo account Stripe. Il cliente ripaga direttamente Afterpay nel tempo.
Nota
Prima di avviare l’integrazione, assicurati che il tuo account sia idoneo per Afterpay accedendo alle impostazioni dei metodi di pagamento.
Configurare StripeLato serverLato client
Lato server
Per questa integrazione sono necessari endpoint sul server che parlano con l’API Stripe. Utilizza le nostre librerie ufficiali per accedere all’API Stripe dal tuo server:
Lato client
L’SDK React Native è open source e completamente documentato. Internamente, utilizza SDK iOS nativi e Android. Per installare l’SDK React Native di Stripe, esegui uno dei seguenti comandi nella directory del progetto (a seconda del gestore di pacchetti utilizzato):
Poi, installa alcune altre dipendenze necessarie:
- Per iOS, vai alla directory ios ed esegui
pod install
per garantire che vengano installate anche le dipendenze native necessarie. - Per Android, non ci sono più dipendenze da installare.
Nota
Per aggiungere l’assistenza di TypeScript, ti consigliamo di consultare e seguire le indicazioni incluse nella guida ufficiale di TypeScript.
Inizializzazione di Stripe
Per inizializzare Stripe nell’app React Native, esegui il wrapping della schermata di pagamento con il componente StripeProvider
oppure utilizza il metodo di inizializzazione initStripe
. È richiesta solo la chiave pubblicabile dell’API in publishableKey
. L’esempio seguente spiega come inizializzare Stripe utilizzando il componente StripeProvider
.
import { useState, useEffect } from 'react'; import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( <StripeProvider publishableKey={publishableKey} merchantIdentifier="merchant.identifier" // required for Apple Pay urlScheme="your-url-scheme" // required for 3D Secure and bank redirects > {/* Your app code here */} </StripeProvider> ); }
Nota
Usa le chiavi di test dell’API durante i test e le attività di sviluppo e le chiavi della modalità live quando pubblichi l’app.
Creare un PaymentIntentLato serverLato client
Un PaymentIntent è un oggetto che rappresenta la tua intenzione di riscuotere un pagamento da un cliente e traccia il ciclo di vita del processo di pagamento in ogni sua fase.
Lato server
Innanzitutto crea un PaymentIntent
sul tuo server e specifica l’importo da riscuotere e la valuta. Se hai già un’integrazione che utilizza l’API Payment Intents, aggiungi afterpay_
all’elenco dei tipi di metodi di pagamento per il tuo PaymentIntent
.
Lato client
Nel PaymentIntent restituito è presente una chiave privata client, che il client può utilizzare per completare la procedura di pagamento in modo sicuro anziché specificare tutto l’oggetto PaymentIntent. Sul lato client, richiedi un PaymentIntent dal tuo server e memorizza la chiave privata client.
const fetchPaymentIntentClientSecret = async () => { const response = await fetch(`${API_URL}/create-payment-intent`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ currency: 'usd', payment_method_types: ['afterpay_clearpay'], }), }); const {clientSecret, error} = await response.json(); return {clientSecret, error}; };
Raccogliere i dati relativi alla modalità di pagamentoLato client
Perché il pagamento vada a buon fine, Afterpay ha bisogno che siano presenti i dati di fatturazione. Nella tua app, acquisisci dal cliente i dati di fatturazione necessari:
- Nome e cognome
- Indirizzo email
- Indirizzo di fatturazione completo
Inoltre, anche se i dettagli di spedizione non sono obbligatori, possono aiutare a migliorare i tassi di autenticazione. Per raccogliere i dettagli di spedizione, acquisisci dal cliente quanto segue:
- Nome completo
- Indirizzo di spedizione completo
export default function AfterpayClearpayPaymentScreen() { const [email, setEmail] = useState(''); const handlePayPress = async () => { const billingDetails: PaymentMethodCreateParams.BillingDetails = { email, phone: '+48888000888', addressCity: 'Houston', addressCountry: 'US', addressLine1: '1459 Circle Drive', addressLine2: 'Texas', addressPostalCode: '77063', name: 'Jenny Rosen', }; // Shipping details are optional but recommended to pass in. const shippingDetails: PaymentMethodCreateParams.ShippingDetails = { addressLine1: '1459 Circle Drive', addressCountry: 'US', addressPostalCode: '77063', name: 'Jenny Rosen', }; // ... }; return ( <Screen> <TextInput placeholder="E-mail" onChange={(value) => setEmail(value.nativeEvent.text)} /> </Screen> ); }
Inviare il pagamento a StripeLato client
Recupera la chiave privata client dal PaymentIntent che hai creato e chiama confirmPayment
. La chiave privata client deve essere gestita con cura in quanto può effettuare l’addebito. Non registrarla, non inserirla negli URL e mostrala solo al cliente.
export default function AfterpayClearpayPaymentScreen() { const [email, setEmail] = useState(''); const handlePayPress = async () => { // ... const {error, paymentIntent} = await confirmPayment(clientSecret, { paymentMethodType: 'AfterpayClearpay', paymentMethodData: { billingDetails, // Shipping details are optional but recommended to pass in. shippingDetails, }, }); if (error) { Alert.alert(`Error code: ${error.code}`, error.message); } else if (paymentIntent) { Alert.alert( 'Success', `The payment was confirmed successfully! currency: ${paymentIntent.currency}`, ); } }; return <Screen>{/* ... */}</Screen>; }
Pagamenti non riusciti
Afterpay decide se accettare o rifiutare una transazione in base a diversi fattori, ad esempio da quanto tempo l’acquirente utilizza Afterpay, l’importo in sospeso che il cliente deve rimborsare o il valore dell’ordine corrente.
Dato che i pagamenti Afterpay hanno un tasso di rifiuto più elevato rispetto a molti metodi di pagamento, dovresti sempre includere opzioni di pagamento aggiuntive nel tuo flusso di pagamento, come ad esempio card
. In questi casi, il PaymentMethod viene scollegato e lo stato dell’oggetto PaymentIntent diventa automaticamente a requires_
.
Per un PaymentIntent Afterpay con stato requires_
, i clienti devono completare il pagamento entro tre ore dal reindirizzamento al sito Afterpay (ciò non riguarda i pagamenti rifiutati). In caso contrario, l’oggetto PaymentMethod verrà scollegato e lo stato dell’oggetto PaymentIntent passerà automaticamente a requires_
In questi casi, invita il cliente a riprovare con una diversa opzione di pagamento presente nel tuo flusso di completamento della transazione.
Codici di errore
Questi sono i codici di errore più diffusi e le corrispondenti azioni consigliate:
Codice di errore | Azione consigliata |
---|---|
payment_ | Errore generico che indica che il pagamento Afterpay non è riuscito. Può trattarsi anche di un rifiuto che non appare come un codice di errore di rifiuto. |
payment_ | Afterpay ha rifiutato il pagamento del cliente. Successivamente, il cliente dovrà contattare Afterpay per richiedere ulteriori informazioni. |
payment_ | Il cliente non ha mai completato il pagamento nella pagina di pagamento di Afterpay e la sessione di pagamento è scaduta. Stripe fa scadere automaticamente i Payment Intent non autorizzati 3 ore dopo la creazione del pagamento iniziale. |
payment_ | Afterpay ha riscontrato un errore relativo al servizio e non è in grado di completare la richiesta. Riprova più tardi. |
amount_ | Inserisci un importo compreso nei limiti di transazione predefiniti di Afterpay per il Paese. |
amount_ | Inserisci un importo compreso nei limiti di transazione predefiniti di Afterpay per il Paese. |