Accepter un paiement PayPal

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 :

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

• 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 { 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

Stripe utilise un objet de paiement, appelé PaymentIntent, pour suivre et gérer tous les états du paiement jusqu’à sa finalisation. Créez un PaymentIntent sur votre serveur, en spécifiant le montant à collecter et la devise. Si vous avez déjà créé une intégration à l’aide de l’API Payment Intents, ajoutez paypal à la liste des types de moyens de paiement de votre PaymentIntent.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=eur \
  -d "payment_method_types[]"=paypal

Le PaymentIntent renvoyé contient la clé secrète du client, qui est utilisée pour finaliser le paiement de manière sécurisée au lieu de transmettre la totalité de l’objet PaymentIntent. Renvoyez la clé secrète au client pour pouvoir l’utiliser ultérieurement.

Inclure une description personnalisée

Par défaut, les détails de la commande sur la page d’activité d’achat des utilisateurs PayPal affichent le montant de la commande. Vous pouvez modifier cette configuration en saisissant une description personnalisée dans la propriété description.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=eur \
  -d description="A sample description" \
  -d "payment_method_types[]"=paypal

Personnaliser la langue préférée

Par défaut, la page d’autorisation PayPal est localisée en fonction de plusieurs variables telles que le pays du marchand. Vous pouvez définir la langue préférée de votre client à l’aide de la propriété preferred_locale. La valeur doit être un code de langue composé de deux minuscules, suivi d’un trait d’union (-), puis d’un code de pays à deux majuscules. Par exemple, la valeur pour un utilisateur francophone basé en Belgique est fr-BE. Voir langues prises en charge pour plus d’informations.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=eur \
  -d "payment_method_types[]"=paypal \
  -d "payment_method_options[paypal][preferred_locale]"=fr-BE

Libellés de relevé bancaire avec PayPal

Le libellé qui apparaît sur le relevé bancaire de l’acheteur est défini par PayPal et est par défaut PAYPAL *YOUR_BUSINESS_NAME. Si vous définissez le champ statement_descriptor lors de la création du PaymentIntent, sa valeur est ajoutée à celle définie par PayPal, dans la limite de 22 caractères.

Par exemple, si le nom de votre entreprise dans PayPal est BUSINESS et que vous configurez statement_descriptor sur order_id_1234, la mention PAYPAL *BUSINESS order apparaîtra sur le relevé de compte bancaire de vos clients.

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: 'eur',
      }),
    });
    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 à réaliser 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.

Lorsqu’un client clique pour payer avec PayPal, menez à bien le paiement en appelant confirmPayment. Une vue web s’affiche pour permettre au client de finaliser le paiement avec PayPal. La promesse se résout ensuite avec un objet paymentIntent, ou un objet error s’il y a eu une erreur 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: 'PayPal',
    });

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

Vous trouverez le nom, l’adresse e-mail, l’ID du payeur et l’ID de la transaction du payeur dans la propriété payment_method_details.

{
  "charges": {
    "data": [
      {
        "payment_method_details": {
          "paypal": {
            "payer_id": "H54KFE9XXVVYJ",
            "payer_email": "jenny@example.com",
            "payer_name": "Jenny Rosen",
            "transaction_id": "89W40396MK104212M"
          },
          "type": "paypal"
        },
        "id": "src_16xhynE8WzK49JbAs9M21jaR",
        "object": "source",
        "amount": 1099,
        "client_secret": "src_client_secret_UfwvW2WHpZ0s3QEn9g5x7waU",
        "created": 1445277809,
        "currency": "eur",
        "flow": "redirect",