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 directeur ios et exécutez pod installpour vous assurer que vous installez é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>; }
FacultatifGérez les liens profonds
Lorsqu’un client quitte votre application (par exemple, pour s’authentifier dans Safari ou dans son application bancaire), donnez-lui un moyen de revenir automatiquement dans votre application. De nombreux types de moyens de paiement nécessitent une URL de redirection. Si vous n’en fournissez pas, nous ne pourrons pas présenter à vos utilisateurs les moyens de paiement nécessitant une URL de redirection, même si vous les avez activés.
Pour fournir une URL de redirection :
- Enregistrez une URL personnalisée. Les liens universels ne sont pas pris en charge.
- Configurez votre URL personnalisée.
- Configurez votre composant racine pour qu’il transfère l’URL au SDK de Stripe, comme illustré ci-dessous.
Remarque
Si vous utilisez Expo, définissez votre schéma dans le fichier app..
import { useEffect, useCallback } from 'react'; import { Linking } from 'react-native'; import { useStripe } from '@stripe/stripe-react-native'; export default function MyApp() { const { handleURLCallback } = useStripe(); const handleDeepLink = useCallback( async (url: string | null) => { if (url) { const stripeHandled = await handleURLCallback(url); if (stripeHandled) { // This was a Stripe URL - you can return or add extra handling here as you see fit } else { // This was NOT a Stripe URL – handle as you normally would } } }, [handleURLCallback] ); useEffect(() => { const getUrlAsync = async () => { const initialUrl = await Linking.getInitialURL(); handleDeepLink(initialUrl); }; getUrlAsync(); const deepLinkListener = Linking.addEventListener( 'url', (event: { url: string }) => { handleDeepLink(event.url); } ); return () => deepLinkListener.remove(); }, [handleDeepLink]); return ( <View> <AwesomeAppComponent /> </View> ); }
Pour plus d’informations sur les schémas d’URL natifs, consultez la documentation Android et iOS.
FacultatifAjoutez des postes de facture au Paymentintent
Vous pouvez, à titre facultatif, accepter des données de postes de facture afin de fournir à Afterpay davantage d’indicateurs de risque. Cette fonctionnalité est actuellement disponible en version bêta privée. Pour y accéder, veuillez nous contacter.
FacultatifSéparez l'autorisation et la capture
Contrairement à l’autorisation et à la capture distinctes pour les paiements par carte, Afterpay débite le client du montant du premier versement au moment de l’autorisation. Vous disposez ensuite d’un maximum de 13 jours après l’autorisation pour capturer le reste du paiement. Si vous ne capturez pas le paiement dans le délai imparti, le premier versement échelonné est remboursé au client, et ce dernier ne sera pas débité pour les autres versements. Dans ce cas, Stripe annule également le PaymentIntent et envoie un événement payment_intent.canceled.
Si vous savez que vous ne pouvez pas capturer le paiement, nous vous recommandons d’annuler le PaymentIntent plutôt que d’attendre la fin de la période de 13 jours. L’annulation proactive du PaymentIntent déclenche le remboursement immédiat du premier versement échelonné à votre client, ce qui permet d’éviter toute confusion éventuelle concernant les paiements sur son relevé.
Indiquer à Stripe d’uniquement autoriser 
Pour indiquer que vous voulez séparer l’autorisation de la capture, définissez la valeur de l’option capture_method sur manual lorsque vous créez le PaymentIntent. Ce paramètre indique à Stripe d’autoriser uniquement le montant sur le compte Afterpay du client.
Une fois l’autorisation accordée, Stripe envoie un événement payment_intent.amount_capturable_updated. Consultez notre guide des événements pour de plus amples informations utiles.
Capturer les fonds 
Une fois l’autorisation réussie, l’état du PaymentIntent passe à requires_. Pour capturer les fonds autorisés, faites une demande de capture du PaymentIntent. Le montant total autorisé est capturé par défaut. Vous ne pouvez pas capturer un montant supérieur à cette valeur, mais vous pouvez capturer un montant inférieur.
Facultatif Annuler l’autorisation
Si vous devez annuler une autorisation, vous pouvez annuler le PaymentIntent correspondant.
FacultatifGérer les événements post-paiement
Stripe envoie un événement payment_intent.succeeded à l’issue du paiement. Utilisez le Dashboard, un webhook personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison.
Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les différences entre les différents moyens de paiement pris en charge.
- Gérer les événements manuellement dans le Dashboard - Utilisez le Dashboard pour afficher vos paiements de test dans le Dashboard, envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués. 
- Créer un webhook personnalisé - Créez un gestionnaire de webhook personnalisé pour écouter les événements et créer des tunnels de paiement asynchrones personnalisés. Testez et déboguez votre intégration de webhook localement avec la CLI Stripe. 
- Intégrer une application prédéfinie - Gérez les événements commerciaux courants, tels que l’automatisation ou le marketing et les ventes, en intégrant une application partenaire. 
FacultatifTestez l'intégration Afterpay
Testez votre intégration Afterpay en affichant la page de redirection à l’aide de vos clés API de test. Vous pouvez tester la réussite de paiement en l’authentifiant sur la page de redirection. Le PaymentIntent passera alors de l’état requires_ à succeeded.
Pour tester un échec d’authentification de l’utilisateur, utilisez vos clés API de test et accédez à la page de redirection. Sur cette page, cliquez sur Échec du paiement test. Votre PaymentIntent bascule alors de l’état requires_ à requires_.
Pour les PaymentIntents à capture manuelle en mode test, le PaymentIntent non capturé expirera automatiquement 10 minutes après l’aboutissement de l’autorisation.
É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 finalisé le paiement sur la page de paiement Afterpay, et la session de paiement a expiré. Stripe abandonne automatiquement les PaymentIntents qui n’ont pas été autorisés avec succès 3 heures après la création initiale du 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. |