Accéder directement au contenu
Créez un compte
 ou
connecter-vous
Logo de la documentation Stripe
/
Créez un compte
Connectez-vous
AperçuMettre votre intégration à niveau
Paiements en ligne
PrésentationTrouver votre cas d'usageManaged Payments
Moyens de paiement
Interfaces de paiement
Scénarios de paiement
Paiements par TPE
Au-delà des paiements

Accepter un paiement EPS

Découvrez comment accepter les paiements effectués à l'aide de EPS, un moyen de paiement très répandu en Autriche.

EPS est un moyen de paiement à usage unique qui nécessite l’authentification du paiement par le client. Pour effectuer un paiement avec EPS, les clients quittent votre site Web, autorisent le paiement, puis reviennent vers votre site Web. Vous recevez alors une notification immédiate indiquant si le paiement a abouti ou échoué.

Remarque

Votre utilisation d’EPS doit se conformer aux Conditions d’utilisation du service EPS.

Configurer Stripe
Côté serveur
Cô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 :

Command Line
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# 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) :

Command Line
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.

Remarque

Nous vous recommandons de suivre le guide officiel de TypeScript pour ajouter la prise en charge de TypeScript.

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

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 PaymentIntent
Côté serveur
Côté client

Un PaymentIntent représente votre intention d’encaisser un paiement auprès d’un client et suit le cycle de vie du processus de paiement.

Côté serveur

Créez un PaymentIntent sur votre serveur et précisez le montant à encaisser ainsi que la devise dans les paramètres amount et eur (EPS ne prend en charge aucune autre devise). Si vous avez déjà une intégration Payment Intents, ajoutez eps à la liste des types de moyens de paiement.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=eur \
  -d "payment_method_types[]"=eps

Côté client

Côté client, demandez un PaymentIntent depuis votre serveur et stockez sa clé secrète du client.

const fetchPaymentIntentClientSecret = async () => {
  const response = await fetch(`${API_URL}/create-payment-intent`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      currency: 'eur',
      payment_method_types: ['eps'],
    }),
  });
  const { clientSecret, error } = await response.json();

  return { clientSecret, error };
};

Recueillir les informations du moyen de paiement
Côté client

Dans votre application, recueillez le nom complet de votre client.

export default function EpsPaymentScreen() {
  const [name, setName] = useState();

  const handlePayPress = async () => {
    // ...
  };

  return (
    <Screen>
      <TextInput
        placeholder="Name"
        onChange={(value) => setName(value.nativeEvent.text)}
      />
    </Screen>
  );
}

Envoyer le paiement à Stripe
Côté client

Récupérez la clé secrète du client auprès du PaymentIntent que vous avez créé, puis appelez le confirmPayment. Une page Web s’affiche dans laquelle le client peut finaliser le paiement sur le site Web ou l’application de sa banque. L’intention de paiement est alors finalisée avec le résultat du paiement.

export default function EPSPaymentScreen() {
  const [name, setName] = useState();

  const handlePayPress = async () => {
    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
      name,
    };
  };

  const { error, paymentIntent } = await confirmPayment(clientSecret, {
    paymentMethodType: 'Eps',
    paymentMethodData: {
      billingDetails,
    }
  });

  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="Name"
        onChange={(value) => setName(value.nativeEvent.text)}
      />
    </Screen>
  );
}
Cette page vous a-t-elle été utile ?
OuiNon