Accettare un pagamento Klarna

Lato server

Per questa integrazione sono necessari endpoint sul server che parlano con l’API Stripe. Utilizza le nostre librerie ufficiali per accedere all’API Stripe dal tuo server:

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Lato client

L’SDK React Native è open source e completamente documentato. Internamente, utilizza SDK iOS nativi e Android. Per installare l’SDK React Native di Stripe, esegui uno dei seguenti comandi nella directory del progetto (a seconda del gestore di pacchetti utilizzato):

yarn add @stripe/stripe-react-native

Poi, installa alcune altre dipendenze necessarie:

• Per iOS, vai alla directory ios ed esegui pod install per garantire che vengano installate anche le dipendenze native necessarie.
• Per Android, non ci sono più dipendenze da installare.

Inizializzazione di Stripe

Per inizializzare Stripe nell’app React Native, esegui il wrapping della schermata di pagamento con il componente StripeProvider oppure utilizza il metodo di inizializzazione initStripe. È richiesta solo la chiave pubblicabile dell’API in publishableKey. L’esempio seguente spiega come inizializzare Stripe utilizzando il componente 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>
  );
}

Stripe utilizza un oggetto PaymentIntent per rappresentare la tua intenzione di riscuotere un pagamento da un cliente, monitorando i tentativi di addebito e le modifiche dello stato del pagamento durante l’intera procedura.

Lato server

Innanzitutto crea un PaymentIntent sul tuo server e specifica l’importo da riscuotere e la valuta. Se hai già un’integrazione che utilizza l’API Payment Intents, aggiungi klarna all’elenco dei tipi di metodi di pagamento per il tuo PaymentIntent.

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

Lato client

Un PaymentIntent include una chiave privata client. Tale chiave può essere utilizzata nell’app React Native per completare la procedura di pagamento in sicurezza invece di specificare l’intero oggetto PaymentIntent. Nella tua app, richiedi un PaymentIntent al server e memorizza la chiave privata 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>;
}

Per inviare il pagamento a Stripe occorre la chiave privata client del PaymentIntent che hai creato. Includila nella chiamata a 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!`);
    }
  };

Di seguito abbiamo selezionato dati di test per i Paesi attualmente supportati. In una sandbox, Klarna approva o rifiuta una transazione in base all’indirizzo email fornito.

Autenticazione a due fattori

Qualsiasi numero a sei cifre è un codice valido per l’autenticazione a due fattori. Utilizza 999999 per la mancata autenticazione.

Modalità di rimborso

Nel flusso di Klarna in modalità di test, puoi utilizzare i seguenti valori di test per provare i diversi tipi di rimborso: