Accepter un paiement Afterpay ou Clearpay
Comment accepter Afterpay (aussi connu sous le nom de Clearpay au Royaume-Uni), un moyen de paiement utilisé aux États-Unis, au Canada, au Royaume-Uni, en Australie, et en Nouvelle-Zélande.
Mise en garde
Le contenu de cette section fait référence à un produit antérieur. Vous devez plutôt consulter le guide relatif à l’acceptation d’un paiement pour en savoir plus sur le chemin d’intégration le plus récent. Stripe prend toujours en charge ce produit, néanmoins cette prise en charge peut prendre fin si le produit devient obsolète.
Les utilisateurs de Stripe peuvent utiliser l’API Payment Intents, un chemin d’intégration unique pour la création de paiements à l’aide de tout moyen pris en charge, pour accepter les paiements avec Afterpay des clients dans les pays suivants :
- Australie
- Canada
- Nouvelle-Zélande
- Royaume-Uni
- États-Unis
Afterpay est un moyen de paiement à usage unique et à notification immédiate pour lequel le client doit authentifier son paiement. Les clients sont redirigés vers le site d’Afterpay, sur lequel ils acceptent les conditions d’un plan de versements échelonnés. Une fois que le client a accepté les conditions, les fonds sont garantis et transférés vers votre compte Stripe. Le client rembourse directement Afterpay au fil du temps.
Remarque
Avant de commencer l’intégration, assurez-vous que votre compte est admissible à Afterpay en vous rendant dans vos paramètres des moyens de paiement.
Configurer StripeCôté serveurCôté client
Côté serveur
Pour cette intégration, votre serveur doit être doté d’endpoints qui communiquent avec l’API Stripe. Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur :
Côté client
Le SDK React Native est disponible en open source et fait l’objet d’une documentation complète. En interne, il utilise des SDK Android et iOS natifs. Pour installer le SDK React Native de Stripe, exécutez l’une des commandes suivantes dans le répertoire de votre projet (selon le gestionnaire de paquets que vous utilisez) :
Ensuite, installez les autres dépendances nécessaires :
- Pour iOS, accédez au répertoire ** ios** et exécutez
pod install
pour vous assurer d’installer également les dépendances natives requises. - Pour Android, il n’y a plus de dépendances à installer.
Remarque
Nous vous recommandons de suivre le guide officiel de TypeScript pour ajouter la prise en charge de TypeScript.
Initialisation de Stripe
Pour initialiser Stripe dans votre application React Native, wrappez votre écran de paiement avec le composant StripeProvider
ou utilisez la méthode d’initialisation initStripe
. Seule la clé publiable de l’API dans publishableKey
est nécessaire. L’exemple suivant montre comment initialiser Stripe à l’aide du composant 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> ); }
Remarque
Utilisez vos clés de test d’API lors de vos activités de test et de développement, et vos clés du mode production pour la publication de votre application.
Créez un PaymentIntentCôté serveurCôté client
Un PaymentIntent est un objet qui représente votre intention de collecter un paiement auprès d’un client et qui suit le cycle de vie du processus de paiement à chaque étape.
Côté serveur
Créez tout d’abord un PaymentIntent
sur votre serveur, puis indiquez le montant à encaisser ainsi que la devise. Si votre intégration inclut déjà l’API Payment Intents, ajoutez afterpay_
à la liste des types de moyens de paiement valides pour votre PaymentIntent
.
Côté client
Le PaymentIntent renvoyé contient une clé secrète du client, que vous pouvez envoyer au client pour une exécution sécurisée du processus de paiement au lieu de lui transmettre la totalité de l’objet PaymentIntent. Côté client, demandez un PaymentIntent auprès de votre serveur et sauvegardez la clé secrète du 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}; };
Collectez les informations du moyen de paiementCôté client
Afterpay exige que les données de facturation soient présentes pour que le paiement aboutisse. Dans votre application, recueillez les informations de facturation requises auprès du client :
- Nom complet (nom et prénom)
- Adresse e-mail
- Adresse de facturation complète
De plus, bien que les informations de livraison ne soient pas obligatoires, elles peuvent contribuer à améliorer les taux d’authentification. Pour collecter les informations de livraison, recueillez les renseignements suivants auprès du client :
- Nom complet
- Adresse de livraison complète
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> ); }
Envoyez le paiement à StripeCôté client
Récupérez la clé secrète du client à partir du PaymentIntent créé et appelez le paramètre confirmPayment
. Utilisez la clé secrète du client avec prudence, car elle peut servir à finaliser le paiement. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne la dévoilez à personne d’autre que votre client.
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>; }
Échecs de paiement
Afterpay prend en compte de nombreux facteurs pour accepter ou décliner une transaction (par exemple, la durée d’utilisation d’Afterpay par le client, le montant restant que le client doit rembourser, ou encore la valeur de la commande actuelle).
Vous devez toujours présenter des options de paiement supplémentaires telles que card
dans votre tunnel de paiement, car les paiements Afterpay ont un taux de refus supérieur aux autres moyens de paiement. Dans ces cas, le PaymentMethod est dissocié et l’état de l’objet PaymentIntent passe automatiquement à requires_
.
Pour un PaymentIntent Afterpay portant l’état requires_
, les clients doivent effectuer le paiement dans les 3 heures suivant leur redirection vers le site d’Afterpay (ceci ne s’applique pas aux paiements refusés). Si aucune action n’est effectuée dans ce délai de 3 heures, le PaymentMethod est dissocié et l’état de l’objet PaymentIntent passe automatiquement à requires_
.
Dans ces cas, informez votre client pour réessayer avec une option de paiement différente présentée dans votre tunnel de paiement.
Codes d’erreur
Voici les codes d’erreur courants et les actions recommandées correspondantes :
Code d’erreur | Action recommandée |
---|---|
payment_ | Erreur générique indiquant l’échec du paiement Afterpay. Il peut également s’agir d’un refus qui n’apparaît pas sous la forme d’un code d’erreur de refus. |
payment_ | Afterpay a refusé le paiement du client. Le client doit désormais contacter Afterpay pour obtenir plus d’informations. |
payment_ | Le client n’a jamais effectué le paiement sur la page de paiement d’Afterpay et la session a expiré. Stripe fait automatiquement expirer les Payment Intents qui n’ont pas été autorisés 3 heures après la création de la session de paiement. |
payment_ | Afterpay a rencontré une erreur liée au service et n’est pas en mesure de répondre à la demande. Réessayez ultérieurement. |
amount_ | Saisissez un montant compris dans les limites de transaction par défaut d’Afterpay pour chaque pays. |
amount_ | Saisissez un montant compris dans les limites de transaction par défaut d’Afterpay pour chaque pays. |