Accepter les paiements Klarna

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

Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise un objet PaymentIntent qui suit vos tentatives de débit et les changements d’état du paiement tout au long du processus de paiement.

Côté serveur

Créez tout d’abord un PaymentIntent sur votre serveur, puis indiquez le montant à encaisser ainsi que la devise. Si votre intégration inclut déjà l’API Payment Intents, ajoutez klarna à la liste des types de moyens de paiement valides pour votre PaymentIntent.

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

Côté client

Un PaymentIntent contient une clé secrète du client. Au lieu de transmettre la totalité de l’objet PaymentIntent, vous pouvez utiliser la clé secrète du client dans votre application React Native pour finaliser le processus de paiement en toute sécurité. Dans votre application, demandez un PaymentIntent auprès de votre serveur et sauvegardez sa 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: 'eur',
      }),
    });
    const {clientSecret} = await response.json();

    return clientSecret;
  };

  return <View>...</View>;
}

Pour soumettre le paiement à Stripe, vous devez utiliser la clé secrète client à partir du PaymentIntent que vous avez créé. Incluez-la dans votre appel à confirmPayment :

import {Picker} from '@react-native-picker/picker';
import {confirmPayment} from '@stripe/stripe-react-native';

export default function MyPaymentScreen() {

  const handlePayPress = async () => {
    // Fetch the intent client secret from the backend.
    // See `fetchPaymentIntentClientSecret()`'s implementation above.
    const clientSecret = await fetchPaymentIntentClientSecret();

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

    if (error) {
      console.log('Payment confirmation error', error.message);
      // Update UI to prompt user to retry payment (and possibly another payment method)
    } else if (paymentIntent) {
      Alert.alert('Success', `The payment was confirmed successfully!`);
    }
  };

Nous avons réuni ci-dessous des données de test pour les pays pris en charge. Dans un environnement de test, Klarna s’appuie sur l’adresse e-mail fournie pour approuver ou refuser une transaction.

Authentification à deux facteurs

Tout numéro à six chiffres forme un code d’authentification à deux facteurs valide. Utilisez 999999pour que l’authentification échoue.

Mode de remboursement

Dans le flux Klarna, vous pouvez utiliser les valeurs de test suivantes pour essayer divers types de remboursements :