Collecter des informations de compte pour créer des produits basés sur des données

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

Créez un objet Customer lorsque les utilisateurs créent un compte auprès de votre entreprise. En fournissant une adresse email, vous permettez à Financial Connections d’optimiser le flux d’authentification en présentant de manière dynamique une interface utilisateur simplifiée, pour les utilisateurs existants de Link.

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d email={{CUSTOMER_EMAIL}} \
  -d name={{CUSTOMER_NAME}}

Pour que vous puissiez récupérer des données sur le compte bancaire d’un utilisateur avec Financial Connections, votre utilisateur doit au préalable authentifier son compte avec le flux d’authentification.

L’utilisateur lance le flux d’authentification lorsqu’il souhaite connecter son compte à votre site ou votre application. Insérez un bouton ou un lien sur votre site ou dans votre application pour permettre à l’utilisateur d’associer ses comptes : par exemple, « Associer votre compte bancaire ».

Créez une session Financial Connections en envoyant une requête POST à /v1/financial_connections/sessions :

curl https://api.stripe.com/v1/financial_connections/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "account_holder[type]"=customer \
  -d "account_holder[customer]"=
{{CUSTOMER_ID}} \
  -d "permissions[]"=balances \
  -d "permissions[]"=ownership \
  -d "permissions[]"=payment_method \
  -d "permissions[]"=transactions

1. Définissez account_holder[customer] sur l’id du client.
2. Définissez le paramètre de données permissions afin d’inclure les données nécessaires à votre cas d’usage.
3. (Facultatif) Définissez le paramètreprefetch pour récupérer les données lors de la création du compte.

Le paramètre permissions détermine les données du compte auxquelles vous pouvez accéder. Vous devez demander au moins une autorisation. Après s’être soumis au flux d’authentification, votre utilisateur peut voir les données auxquelles vous avez demandé l’accès et donner son accord pour qu’elles soient partagées.

Réfléchissez aux données dont vous aurez besoin pour votre cas d’usage, et demandez uniquement l’accès aux données nécessaires. Le fait de demander des autorisations dont vous n’avez pas besoin pour votre application risque d’éroder la confiance que vous accordent vos utilisateurs quant à la manière dont vous utilisez leurs données. Par exemple, si vous créez une application de gestion financière personnelle ou un produit de location, vous pouvez demander les données transactions d’un utilisateur. Si vous cherchez à réduire les risques de fraude et à empêcher les usurpations de comptes, vous pouvez demander les données ownership.

Une fois que l’utilisateur a authentifié son compte, vous ne pouvez étendre les autorisations d’accès aux données qu’en créant une nouvelle session Financial Connections et en spécifiant une nouvelle valeur pour le paramètre permissions. Votre utilisateur doit se soumettre à nouveau au flux d’authentification dans lequel il peut consulter les données supplémentaires auxquelles vous souhaitez accéder et autoriser le partage de ses données.

Le paramètre prefetch facultatif contrôle les données que vous récupérez immédiatement après que l’utilisateur s’est connecté à son compte. Utilisez cette option si vous savez que vous voulez toujours un certain type de données. Il n’est pas nécessaire d’effectuer un appel supplémentaire à l’API pour lancer une actualisation des données.

Pour conserver la possibilité d’accepter les paiements par prélèvement automatique ACH, demandez l’autorisation payment_method.

Importez la fonction collectFinancialConnectionsAccounts à partir du SDK React Native de Stripe.

import {collectFinancialConnectionsAccounts} from '@stripe/stripe-react-native';

Utilisez le paramètre collectFinancialConnectionsAccounts pour recueillir le compte bancaire en transmettant la clé secrète du client (client_secret) indiquée plus haut, puis traitez le résultat de manière appropriée :

// Assume you have a <Button /> to collect payout accounts, whose onPress is handleCollectPress
const handleCollectPress = async () => {
  // Fetch the clientSecret you created above and pass it to collectFinancialConnectionsAccounts
  const {session, error} = await collectFinancialConnectionsAccounts(
    clientSecret,
  );

  if (error) {
    Alert.alert(`Error code: ${error.code}`, error.message);
  } else {
    Alert.alert('Success');
    console.log(
      'Successfully obtained session: ',
      JSON.stringify(session, null, 2),
    );
  }
};

Le paramètre collectFinancialConnectionsAccounts renvoie une promesse (Promise). Lorsque votre utilisateur termine le flux contextuel, le paramètre Promise aboutit à :

• Une session représentant la session Financial Connections terminée, si l’utilisateur est parvenu à associer son compte. Cette session comporte un tableau accounts, qui contient la liste des comptes connectés.
• Une erreur (error) si la session échoue ou est annulée.

Par défaut, vos comptes connectés peuvent uniquement ajouter certains types de comptes au flux d’authentification, comme un compte courant ou un compte d’épargne, car Stripe ne peut effectuer des virements que vers un compte sur lequel ACH est activé.

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 :

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.

Une fois que votre utilisateur a terminé le flux d’authentification, mettez à jour ou accédez aux données du compte que vous avez précisé dans le paramètre permissions de la session Financial Connections.

Pour protéger la confidentialité des données de votre utilisateur, vous n’avez accès qu’aux données indiquées dans le paramètre permissions.

Suivez les instructions des guides consacrés aux soldes, à la propriété et aux transactions pour commencer à récupérer les données d’un compte.