Aceptar un pago con Klarna

Lado del servidor

Esta integración necesita puntos de conexión en tu servidor que se comuniquen con la API de Stripe. Usa nuestras librerías oficiales para acceder a la API de Stripe desde tu servidor:

# Available as a gem
sudo gem install stripe

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

Lado del cliente

El SDK para React Native es de código abierto y está plenamente documentado. Internamente, utiliza el SDK de iOS nativo y Android. Para instalar el SDK para React Native de Stripe, ejecuta uno de los siguientes comandos en el directorio del proyecto (en función del administrador de paquetes que utilices):

yarn add @stripe/stripe-react-native

A continuación, instala otras dependencias necesarias:

• Para iOS, navega hasta el directorio de ios y ejecuta pod install para asegurarte de instalar también las dependencias nativas necesarias.
• Para Android, no hay más dependencias para instalar.

Inicialización de Stripe

Para inicializar Stripe en tu aplicación React Native, ajusta tu pantalla de pago con el componente StripeProvider o usa el método de inicialización initStripe. Solo se requiere la clave publicable de la API en publishableKey. El siguiente ejemplo muestra cómo inicializar Stripe mediante el 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 utiliza un objeto PaymentIntent para representar tu intención de cobrarle a un cliente y hace el seguimiento de los intentos de cobro y de los cambios en el estado del pago a lo largo del proceso de pago.

Lado del servidor

Primero, crea un PaymentIntent en tu servidor y especifica el importe que hay que cobrar y la divisa. Si ya tienes una integración con la API Payment Intents, añade klarna a la lista de tipos de métodos de pago para tu PaymentIntent.

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

Lado del cliente

Un PaymentIntent incluye un client secret. Puedes utilizar el secreto de cliente en tu aplicación React Native para completar el proceso de pago de forma segura en lugar de especificar el objeto PaymentIntent completo. En tu aplicación, solicita un PaymentIntent desde tu servidor y guarda el secreto de cliente.

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

Para enviar el pago a Stripe se necesita el secreto de cliente del PaymentIntent que creaste. Inclúyelo en tu llamada 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!`);
    }
  };

A continuación, tenemos datos de prueba especialmente elegidos para los países de los clientes actualmente aceptados. En un entorno de prueba, Klarna aprueba o rechaza una transacción en función de la dirección de correo electrónico proporcionada.

Autenticación en dos pasos

Cualquier número de seis dígitos es un código válido de autenticación en dos pasos. Utiliza 999999 para que la autenticación no se complete.

Método de reembolso

En el flujo de Klarna, puedes usar los siguientes valores de prueba para probar varios tipos de reembolso: