Paiements MobilePay

Dans un premier temps, vous devez créer un compte Stripe. S’inscrire 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 :

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

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) :

yarn add @stripe/stripe-react-native

Ensuite, installez les autres dépendances nécessaires :

• For iOS, go to the ios directory and run pod install to ensure that you also install the required native dependencies.
• 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 { 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>
  );
}

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 :

• Spécifiez le montant à collecter et une devise prise en charge (eur, dkk, sek ou nok).
• Ajoutez mobilepay à la liste des types de moyens de paiement. Assurez-vous d’activer MobilePay dans le Dashboard.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=dkk \
  -d "payment_method_types[]"=mobilepay \
  --data-urlencode return_url="payments-example://stripe-redirect"

Le PaymentIntent inclut une clé secrète du client. Envoyez la clé secrète du client au client pour confirmer le PaymentIntent à 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 :

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: 'dkk',
      }),
    });
    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.

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 :

1. Enregistrez une URL personnalisée. Les liens universels ne sont pas pris en charge.
2. Configurez votre URL personnalisée.
3. Configurez votre composant racine pour qu’il transfère l’URL au SDK de Stripe, comme illustré ci-dessous.

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.

Lorsque votre client presse le bouton de paiement avec MobilePay, appelez confirmPayment. Une vue web s’affiche pour permettre au client d’autoriser le paiement dans l’application MobilePay. Une fois que le client a autorisé le paiement, la promesse aboutit avec un objet contenant soit un champ paymentIntent, soit un champ error si le paiement a généré une erreur.

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: 'MobilePay',
    });

    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>
  );
}

Votre client dispose de 5 minutes pour autoriser le paiement dans l’application MobilePay. Si le paiement par carte sous-jacent échoue, votre client peut choisir une autre carte et réessayer dans l’application MobilePay.

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.

Manuellement

Utilisez le Dashboard Stripe 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

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é

Applications préconfigurées

Intégrez une application partenaire pour gérer les événements métier courants, comme l’automatisation, le marketing ou les ventes.

Créez un PaymentIntent à l’aide de vos clés API de test. Après avoir confirmé le PaymentIntent, suivez l’URL de redirection next_action qui vous mènera vers une page de test avec des options permettant de valider ou non le paiement.

• Cliquez sur Autorisation du paiement test pour simuler la réussite du paiement. L’état du PaymentIntent passe de requires_action à succeeded.
• Cliquez sur Échec du paiement test pour simuler un échec d’authentification du client. L’état du PaymentIntent passe de requires_action à requires_payment_method.