Accepter un paiement Alipay
Découvrez comment accepter des paiements par Alipay, un portefeuille électronique très répandu en Chine.
Alipay est un moyen de paiement à usage unique qui nécessite l’authentification du paiement par le client. Pour effectuer un paiement, les clients sont redirigés depuis votre site Web ou application, autorisent le paiement via Alipay, puis reviennent vers votre site Web ou application. Vous recevez alors une notification immédiate indiquant si le paiement a abouti ou échoué.
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.
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 React, { 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é serveur
Un PaymentIntent est un objet qui représente votre intention d’encaisser un paiement auprès de votre client et suit le cycle de vie du processus de paiement. Créez un PaymentIntent
sur votre serveur et précisez le montant à encaisser ainsi qu’une devise prise en charge. Si vous avez une intégration Payment Intents existante, ajoutez alipay
à la liste des types de moyens de paiement.
Rediriger l'utilisateur vers le portefeuille AlipayCôté client
Pour les moyens de paiement par prélèvement bancaire authentifié ou par portefeuille numérique, le SDK React Native de Stripe spécifie safepay/
comme hôte de l’URL de redirection. Une fois que le client a effectué son paiement par Alipay, il est redirigé vers myapp://safepay/
où myapp
correspond à votre schéma d’URL personnalisé.
Lorsqu’un client quitte votre application, par exemple pour s’identifier sur Safari ou dans son application bancaire, faites en sorte qu’il puisse revenir automatiquement à votre application par la suite. De nombreux types de moyens de paiement imposent une URL de redirection. Si vous ne la fournissez pas, ces moyens de paiement ne seront pas présentés à votre utilisateur, 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 React, { 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 paiementCôté client
Lorsque votre client appuie sur le bouton pour payer via Alipay, appelez confirmPayment
pour afficher une vue Web lui permettant d’effectuer son paiement.
export default function AlipayPaymentScreen() { const [email, setEmail] = useState(''); const { confirmPayment, loading } = useConfirmPayment(); const handlePayPress = async () => { const { clientSecret } = await fetchPaymentIntentClientSecret(); const { error, paymentIntent } = await confirmPayment(clientSecret, { paymentMethodType: 'Alipay', }); 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> <TextInput placeholder="E-mail" keyboardType="email-address" onChange={(value) => setEmail(value.nativeEvent.text)} /> <Button variant="primary" onPress={handlePayPress} title="Pay" loading={loading} /> </Screen> ); }
Devises prises en charge
Vous pouvez créer des paiements Alipay dans les devises correspondant à votre pays. La devise locale par défaut pour Alipay est le cny
. Les clients voient également le montant de leurs achats s’afficher en cny
.
Devise | Pays |
---|---|
cny | Tous les pays |
aud | Australie |
cad | Canada |
eur | Allemagne, Autriche, Belgique, Bulgarie, Chypre, Danemark, Espagne, Estonie, Finlande, France, Grèce, Irlande, Italie, Lettonie, Lituanie, Luxembourg, Malte, Norvège, Pays-Bas, Portugal, République tchèque, Roumanie, Slovaquie, Slovénie, Suède, Suisse |
gbp | Royaume-Uni |
hkd | Hong Kong |
jpy | Japon |
myr | Malaisie |
nzd | Nouvelle-Zélande |
sgd | Singapour |
usd | États-Unis |
Si vous détenez un compte bancaire dans une autre devise et souhaitez créer un paiement Alipay dans cette devise, veuillez contacter le service Support. Les devises supplémentaires sont prises en charge au cas par cas.