# Accepter un paiement Alipay Découvrez comment accepter des paiements par Alipay, un portefeuille électronique très répandu en Chine. # API Direct Alipay est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) qui nécessite l’[authentification](https://docs.stripe.com/payments/payment-methods.md#customer-actions) 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](https://docs.stripe.com/payments/payment-methods.md#payment-notification) indiquant si le paiement a abouti ou échoué. ## Configurer Stripe [Côté serveur] Pour commencer, il vous faut un compte Stripe. [Créez votre compte Stripe](https://dashboard.stripe.com/register). Utilisez nos bibliothèques officielles pour accéder à l’API Stripe à partir de votre application : #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Créer un PaymentIntent [Côté serveur] Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) est un objet qui représente votre intention de collecter 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 spécifiez le montant à collecter ainsi qu’une [devise prise en charge](https://docs.stripe.com/payments/alipay.md#supported-currencies). Stripe détermine automatiquement les moyens de paiement éligibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d "automatic_payment_methods[enabled]=true" \ -d amount=1099 \ -d currency=hkd ``` ### Récupérer la clé secrète du client Le PaymentIntent inclut une *clé secrète du client* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) que le côté client utilise pour finaliser en toute sécurité le processus de paiement. Vous pouvez utiliser différentes approches pour transmettre la clé secrète du client au côté client. #### Application monopage Retrieve the client secret from an endpoint on your server, using the browser’s `fetch` function. This approach is best if your client side is a single-page application, particularly one built with a modern front-end framework like React. Create the server endpoint that serves the client secret: #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end ``` Récupérez ensuite la clé secrète du client à l’aide JavaScript côté client : ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### Rendu côté serveur Transmettez la clé secrète à votre client depuis votre serveur. Cette approche fonctionne mieux si votre application génère du contenu statique sur le serveur avant de l’envoyer sur le navigateur. Ajoutez le [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) à votre formulaire de paiement. Dans votre code côté serveur, récupérez la clé secrète du client à partir du PaymentIntent : #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ## Rediriger l'utilisateur vers le portefeuille Alipay [Côté client] Lorsqu’un client clique pour payer avec Alipay, utilisez Stripe.js pour soumettre le paiement à Stripe. [Stripe.js](https://docs.stripe.com/payments/elements.md) est la bibliothèque JavaScript de base pour créer les tunnels de paiement : elle gère automatiquement les opérations complexes telles que la redirection décrite ci-dessous, et facilite l’extension de votre intégration à d’autres moyens de paiement. Incluez le script Stripe.js sur votre page de paiement en l’ajoutant à la section `head` de votre fichier HTML. ```html Checkout ``` Créez une instance de Stripe.js avec le code JavaScript suivant sur votre page de paiement. ```javascript // Set your publishable key. Remember to change this to your live publishable key in production! // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('<>'); ``` Utilisez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) du `PaymentIntent` et appelez `stripe.confirmAlipayPayment` pour gérer la redirection vers Alipay. Ajoutez une `return_url` vers laquelle Stripe redirigera votre client une fois son paiement effectué. ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async function(event) { event.preventDefault(); // Set the clientSecret of the PaymentIntent const { error } = await stripe.confirmAlipayPayment(clientSecret, { // Return URL where the customer should be redirected after the authorization return_url: `${window.location.href}`, }); if (error) { // Inform the customer that there was an error. const errorElement = document.getElementById('error-message'); errorElement.textContent = error.message; } }); ``` L’URL `return_url` correspond à une page de votre site Web qui affiche le résultat du paiement. Pour déterminer l’information à afficher, vous pouvez [vérifier l’état](https://docs.stripe.com/payments/payment-intents/verifying-status.md#checking-status) du `PaymentIntent`. Pour ce faire, la redirection de Stripe vers la page `return_url` inclut les paramètres de requête d’URL suivants. Vous pouvez également ajouter vos propres paramètres de requête à la `return_url`. Ils seront conservés pendant tout le processus de redirection. | Paramètre | Description | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent` | L’identifiant unique du `PaymentIntent`. | | `payment_intent_client_secret` | La [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’objet `PaymentIntent`. | ## Optional: Gérer la redirection manuellement [Côté serveur] Le meilleur moyen de gérer les redirections est d’utiliser Stripe.js avec `confirmAlipayPayment`. Si vous devez rediriger vos clients manuellement : 1. Indiquez l’URL vers laquelle vos clients seront redirigés une fois leur paiement terminé. ```curl curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/confirm \ -u "<>:" \ -d "payment_method={{PAYMENTMETHOD_ID}}" \ --data-urlencode "return_url=https://shop.example.com/crtA6B28E1" ``` 1. Vérifiez que l’état du `PaymentIntent` est bien `requires_action`. Le type de `next_action` sera `alipay_handle_redirect`. ```json "next_action": { "type": "alipay_handle_redirect", "alipay_handle_redirect": { "url": "https://hooks.stripe.com/...", "return_url": "https://example.com/checkout/complete" } } ``` 1. Redirigez le client vers l’URL indiquée dans la propriété `next_action`. À l’issue du processus de paiement, le client est redirigé vers la destination `return_url`. Les paramètres de requête d’URL `payment_intent` et `payment_intent_client_secret` sont inclus et vous pouvez par ailleurs transmettre vos propres paramètres de requête, comme indiqué plus haut. ## Optional: Gérer les événements post-paiement Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) 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](https://stripe.com/payments/payment-methods-guide). ### Recevoir des événements et exécuter des actions métier Plusieurs options s’offrent à vous pour recevoir et exécuter des actions métier. #### Manuellement Utilisez le Dashboard pour consulter tous vos paiements Stripe, envoyer des reçus par e-mail, gérer les virements et relancer les paiements ayant échoué. - [Afficher vos paiements tests dans le Dashboard](https://dashboard.stripe.com/test/payments) #### Code personnalisé Créez un gestionnaire de webhooks pour écouter des événements et créer des tunnels de paiement asynchrones personnalisés. Testez et déboguez votre intégration de webhooks en local, grâce à la CLI Stripe. - [Créer un webhook personnalisé](https://docs.stripe.com/events/set-up-events.md#create-event-handler) #### Applications préconfigurées Intégrez une application partenaire pour gérer les événements métier courants, comme l’[automatisation](https://stripe.partners/?f_category=automation), le [marketing ou les ventes](https://stripe.partners/?f_category=marketing-and-sales). ## Devises prises en charge Votre compte doit disposer d’un compte bancaire dans l’une des devises suivantes. Vous pouvez créer des paiements Alipay dans les devises correspondant à votre pays. La devise locale par défaut pour Alipay est `cny` et les clients voient également le montant de leur achat en `cny`. | Devise | Pays | | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `cny` | Tous les pays | | `aud` | Australie | | `cad` | Canada | | `chf` | Suisse | | `eur` | Autriche, Belgique, Bulgarie, Croatie, Chypre, République tchèque, Danemark, Estonie, Finlande, France, Allemagne, Grèce, Irlande, Italie, Lettonie, Liechtenstein, Lituanie, Luxembourg, Malte, Pays-Bas, Norvège, Portugal, Roumanie, Slovaquie, Slovénie, Espagne, Suède, Suisse | | `gbp` | Gibraltar, Royaume-Uni | | `hkd` | Hong Kong | | `jpy` | Japon | | `myr` | Malaisie | | `nzd` | Nouvelle-Zélande | | `sgd` | Singapour | | `usd` | Autriche, Belgique, Bulgarie, Canada, Croatie, Chypre, République tchèque, Danemark, Estonie, Finlande, France, Allemagne, Gibraltar, Grèce, Hong Kong, Hongrie, Irlande, Italie, Lettonie, Liechtenstein, Lituanie, Luxembourg, Malte, Pays-Bas, Norvège, Portugal, Roumanie, Singapour, Slovaquie, Slovénie, Espagne, Suède, Royaume-Uni, États-Unis |