Accepter un paiement Przelewy24

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

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 et la devise dans les paramètres amount, eur ou pln. Si vous avez déjà une intégration Payment Intents, ajoutez p24 à la liste des types de moyens de paiement.

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

Au lieu de transmettre à l’application la totalité de l’objet PaymentIntent, renvoyez sa clé secrète du client. Il s’agit d’une clé unique qui vous permet de confirmer le paiement et d’actualiser les informations de paiement côté client, le tout sans autoriser la manipulation d’informations sensibles comme le montant du paiement.

Côté client

Côté client, demandez un PaymentIntent depuis votre serveur et sauvegardez 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({
      email,
      currency: 'pln',
      payment_method_types: ['p24'],
    }),
  });
  const { clientSecret, error } = await response.json();

  return { clientSecret, error };
};

Libellés de relevé bancaire avec Przelewy24

Vous pouvez définir un libellé de relevé bancaire personnalisé avant de confirmer le PaymentIntent. Pour Przelewy24, le libellé de relevé bancaire est limité à 14 caractères. Il apparaît dans les documents bancaires de votre client dans la description du paiement, au format /OPT/X/////P24-XXX-XXX-XXX {statement_descriptor}, où /OPT/X/////P24-XXX-XXX-XXX constitue la référence unique du paiement généré par Przelewy24.

Dans votre application, recueillez l’adresse e-mail de votre client.

export default function P24PaymentScreen() {
  const [email, setEmail] = useState();

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

  return (
    <Screen>
      <TextInput
        placeholder="E-mail"
        onChange={(value) => setEmail(value.nativeEvent.text)}
      />
    </Screen>
  );
}

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 P24PaymentScreen() {
  const [email, setEmail] = useState();

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

  const { error, paymentIntent } = await confirmPayment(clientSecret, {
    paymentMethodType: 'P24',
    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="E-mail"
        onChange={(value) => setEmail(value.nativeEvent.text)}
      />
    </Screen>
  );
}