OXXO-Zahlung annehmen

Serverseitig

Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe-API kommunizieren können. Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus:

# Available as a gem
sudo gem install stripe

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

Clientseitig

Das React Native SDK ist Open Source und vollständig dokumentiert. Intern werden native iOS und Android SDKs verwendet. Um das React Native SDK von Stripe zu installieren, führen Sie einen der folgenden Befehle im Verzeichnis Ihres Projekts aus (je nachdem, welchen Paket-Manager Sie verwenden):

yarn add @stripe/stripe-react-native

Installieren Sie als Nächstes einige weitere erforderliche Abhängigkeiten:

• Navigieren Sie für iOS zum Verzeichnis ios und führen Sie pod install aus, um sicherzustellen, dass Sie auch die erforderlichen nativen Abhängigkeiten installieren.
• Für Android müssen keine Abhängigkeiten mehr installiert werden.

Stripe Initialisierung

Um Stripe in Ihrer React Native-App zu initialisieren, umschließen Sie entweder Ihren Zahlungsbildschirm mit der Komponente StripeProvider oder verwenden Sie die Initialisierungsmethode initStripe. Nur der veröffentlichbare API-Schlüssel in publishableKey ist erforderlich. Das folgende Beispiel zeigt, wie Stripe mithilfe der Komponente StripeProvider initialisiert wird.

import React, { 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>
  );
}

Ein PaymentIntent ist ein Objekt, das Ihre Absicht, eine Kundenzahlung einzuziehen, darstellt und den gesamten Zahlungsvorgang dokumentiert.

Serverseitig

Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem Betrag und der Währung mxn (OXXO unterstützt keine anderen Währungen). Falls Sie bereits über eine Integration verfügen, die die Payment Intents API verwendet, fügen Sie der Liste der Zahlungsmethoden für Ihren PaymentIntent die Zahlungsmethode oxxo hinzu.

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

Zusätzliche Optionen für Zahlungsmethoden

Sie können für Ihren PaymentIntent den optionalen Parameter expires_after_days in den Optionen für Zahlungsmethoden nutzen, um die Gültigkeit eines OXXO-Gutscheins in Kalendertagen anzugeben. Wenn Sie beispielsweise einen OXXO-Gutschein am Montag erstellen und expires_after_days auf 2 setzen, läuft der OXXO-Gutschein am Mittwoch um 23:59 Uhr amerikanischer/mexikanischer Zeit (UTC-6) ab. Der Parameter expires_after_days kann Werte zwischen 1 und 7 aufweisen. Der Standardwert ist 3 Tage.

Clientseitig

Fordern Sie auf dem Client einen PaymentIntent von Ihrem Server an und speichern Sie sein Client-Geheimnis.

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

  return {clientSecret, error};
};

Erfassen Sie in Ihrer App den vollständigen Namen und die E-Mail-Adresse Ihrer Kund/innen.

export default function OxxoPaymentScreen() {
  const [name, setName] = useState();
  const [email, setEmail] = useState();

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

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

Rufen Sie das Client-Geheimnis aus dem von Ihnen erstellten PaymentIntent ab und rufen Sie confirmPayment auf. Nun wird eine Webansicht präsentiert, in der der OXXO-Gutschein angezeigt wird.

export default function OxxoPaymentScreen() {
  const [name, setName] = useState();
  const [email, setEmail] = useState();

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

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

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
      console.log('Payment confirmation error', error.message);
    } else if (paymentIntent) {
      if (paymentIntent.status === PaymentIntents.Status.RequiresAction) {
        Alert.alert(
          'Success',
          `The OXXO voucher was created successfully. Awaiting payment from customer.`
        );
      } else {
        Alert.alert('Payment intent status:', paymentIntent.status);
      }
    }
  };

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

Optional: Gutschein-Link per E-Mail an Kund/innen senden

Stripe sendet ein payment_intent.requires_action-Ereignis, wenn ein OXXO-Gutschein erfolgreich erstellt wurde. Wenn Sie Ihren Kundinnen/Kunden den Gutschein-Link per E-Mail zusenden möchten, können Sie den PaymentIntent abrufen, um den Link beim Empfang des Ereignisses zu erhalten. Das Feld hosted_voucher_url in payment_intent.next_action.oxxo_display_details enthält den Link zum Gutschein.

Optional: Gutschein anpassen

Auf der Seite mit den Branding-Einstellungen können Sie die Nutzeroberfläche für Ihre Kund/innen anpassen.

Folgende Branding-Einstellungen können auf den Gutschein angewendet werden:

• Symbol – Ihr Markenlogo und Ihr offizieller Firmenname
• Akzentfarbe: Farbe für die Schaltfläche „Nummer kopieren“
• Markenfarbe – Die Hintergrundfarbe

OXXO ist eine Zahlungsmethode mit verzögerter Benachrichtigung, bei der Gelder nicht sofort verfügbar sind. Kundinnen/Kunden bezahlen den OXXO-Gutschein eventuell nicht sofort nach dem Abschluss des Bestellvorgangs in einem OXXO Convenience Store.

Für jeden bezahlten OXXO-Gutschein übermittelt Stripe am nächsten Werktag (Montag bis Freitag außer an mexikanischen Feiertagen) das Ereignis payment_intent.succeeded. Verwenden Sie das Dashboard oder erstellen Sie einen Webhook-Handler, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kundinnen/Kunden, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs).

Nach Ablauf der Gültigkeit geht der Status des PaymentIntent in processing über, und die Kundinnen/Kunden können nicht mehr mit den abgelaufenen OXXO-Gutschein bezahlen. Wenn der OXXO-Gutschein nicht vor 23:59 Uhr amerikanischer/mexikanischer Zeit (UTC-6) am Ablaufdatum bezahlt wird, sendet Stripe innerhalb von 10 Kalendertagen nach dem Ablaufdatum ein payment_intent.payment_failed-Ereignis (in den meisten Fällen wird es innerhalb von 7 Kalendertagen gesendet). Wenn der OXXO-Gutschein z. B. am 1. September abgelaufen ist, wird das Ereignis spätestens am 10. September gesendet.

Ereignisse empfangen und Geschäftsaktionen ausführen

Manuell

Im Stripe-Dashboard können Sie alle Stripe-Zahlungen anzeigen, Zahlungsbelege per E-Mail versenden, Auszahlungen abwickeln oder fehlgeschlagene Zahlungen erneut durchführen.

• Testzahlungen im Dashboard anzeigen

Nutzerdefinierter Code

Erstellen Sie einen Webhook-Handler, um Ereignisse zu überwachen und nutzerdefinierte asynchrone Zahlungsabläufe zu erstellen. Mit der Stripe-CLI können Sie Ihre Webhook-Integration lokal testen und Fehler beheben.

• Nutzerdefinierten Webhook erstellen

Verwenden Sie in einer Sandbox die folgenden E-Mail-Adressen, wenn Sie confirmPayment aufrufen, um verschiedene Szenarien zu testen.