Paiements SwishSur invitation uniquement
Comment accepter Swish, un moyen de paiement populaire en Suède.
Swish est un moyen de paiement à usage unique utilisé en Suède. Il permet aux clients d’authentifier et approuver leurs paiements via l’application mobile Swish et l’application mobile suédoise BankID.
Vous recevez une notification immédiate indiquant si le paiement a abouti ou échoué.
Déclarations obligatoires
Pour respecter les règles de Swish, vous devez afficher le texte suivant dans votre tunnel de paiement à l’écran avant que le client n’autorise le paiement Swish :
- Pour les localisations en anglais : « Stripe Technology Europe Limited (“Stripe”) has acquired the claim for payment. Therefore your payment will be made to Stripe. »
- Pour les localisations en suédois : « Stripe Technology Europe Limited (“Stripe”) har övertagit fordran på betalning. Din betalning görs därför till Stripe ».
- Pour les autres langues, une traduction équivalente du texte ci-dessus.
Si vous intégrez Swish via un formulaire de paiement ou un composant d’interface utilisateur hébergé par Stripe, tel que Checkout ou le Payment Element, Stripe affiche cet avis pour vous.
Configurer StripeCôté serveurCôté client
Pour commencer, vous devez créer un compte Stripe. Inscrivez-vous maintenant.
Côté serveur
Cette intégration exige des endpoints sur votre serveur 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
We recommend following the official TypeScript guide to add TypeScript support.
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éer un PaymentIntentCôté serveurCôté client
Côté serveur
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.
Pour créer et confirmer un PaymentIntent
sur votre serveur :
- Indiquez le montant à encaisser et la devise.
- Ajoutez
swish
à la liste des types de moyens de paiement pour votrePaymentIntent
. Assurez-vous que Swish est activé dans le Dashboard.
Le PaymentIntent renvoyé contient la clé secrète du client, que vous utiliserez pour confirmer le PaymentIntent. Renvoyez cette clé secrète côté client pour permettre son utilisation à l’étape suivante.
Côté client
Côté client, demandez un PaymentIntent auprès de votre serveur et sauvegardez la clé secrète du client qu’il contient :
function PaymentScreen() { const fetchPaymentIntentClientSecret = async () => { const response = await fetch(`${API_URL}/create-payment-intent`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ currency: 'sek', }), }); const {clientSecret} = await response.json(); return clientSecret; }; const handlePayPress = async () => { // See below }; return ( <View> <Button onPress={handlePayPress} title="Pay" /> </View> ); }
La clé secrète du client est différente de vos clés API qui servent à authentifier les requêtes de l’API Stripe. Elle doit être utilisée avec prudence, car elle peut servir à mener à bien 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.
Configurer une URL de redirection (iOS uniquement)Côté client
When a customer exits your app (for example to authenticate in Safari or their banking app), provide a way for them to automatically return to your app. Many payment method types require a return URL. If you don’t provide one, we can’t present payment methods that require a return URL to your users, even if you’ve enabled them.
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.
Confirmer le paiement SwishCôté client
Lorsqu’un client clique pour payer avec Swish, menez à bien le paiement en appelant confirmPayment. Une vue Web s’affiche pour permettre au client de finaliser le paiement avec Swish. La promesse se résout ensuite avec un objet contenant soit un champ paymentIntent
, soit un champ error
si une erreur s’est produite durant le paiement.
import {useConfirmPayment} from '@stripe/stripe-react-native'; function PaymentScreen() { const {confirmPayment, loading} = useConfirmPayment(); const fetchPaymentIntentClientSecret = async () => { // See above }; const handlePayPress = async () => { // Fetch the client secret from the backend. const clientSecret = await fetchPaymentIntentClientSecret(); const {error, paymentIntent} = await confirmPayment(clientSecret, { paymentMethodType: 'Swish', }); if (error) { console.log('Payment confirmation error: ', error); } else if (paymentIntent) { console.log('Successfully confirmed payment: ', paymentIntent); } }; return ( <View> <Button onPress={handlePayPress} title="Pay" disabled={loading} /> </View> ); }
Échecs de paiement
Swish utilise plusieurs données pour décider du refus d’une transaction (par exemple, s’il n’y a pas assez de fonds sur le compte bancaire du client ou si ce dernier a cliqué sur Annuler dans l’application).
Dans ce cas, le PaymentMethod est détaché et le statut de l’objet PaymentIntent passe automatiquement à requires_
Hormis le refus d’un paiement, dans le cas d’un PaymentIntent Swish à l’état requires_
, les clients doivent effectuer le paiement sous 3 minutes. En l’absence d’action sous 3 minutes, le PaymentMethod est détaché et l’état de l’objet PaymentIntent passe automatiquement à requires_
.