Zahlungen per Przelewy24 akzeptieren

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 { 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 stellt Ihre Absicht dar, Zahlungen von Kundinnen und Kunden einzuziehen, und dokumentiert den gesamten Zahlungsvorgang.

Serverseitig

Erstellen Sie einen PaymentIntent auf Ihrem Server und geben Sie den einzuziehenden amount und die Währung eur oder pln an. Wenn Sie über einen bestehenden Payment Intents-Integration verfügen, fügen Sie p24 der Liste der Arten von Zahlungsmethoden hinzu.

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

Statt das gesamte PaymentIntent-Objekt an Ihre App zu übergeben, übergeben Sie nur das Client-Geheimnis. Das Client-Geheimnis des PaymentIntent ist ein eindeutiger Schlüssel, mit dem Sie die Zahlung bestätigen und Zahlungsdetails auf dem Client aktualisieren können, ohne dass eine Manipulation vertraulicher Daten, wie beispielsweise des Zahlungsbetrags, möglich ist.

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: 'pln',
      payment_method_types: ['p24'],
    }),
  });
  const { clientSecret, error } = await response.json();

  return { clientSecret, error };
};

Zahlungsbeschreibungen bei Przelewy24

Sie können eine nutzerdefinierte Zahlungsbeschreibung festlegen, bevor Sie den PaymentIntent bestätigen. Bei Przelewy24 darf die Zahlungsbeschreibung in der Abrechnung maximal 14 Zeichen enthalten. Sie wird auf den Bankbelegen Ihrer Kundinnen/Kunden in der Zahlungsbeschreibung im Format /OPT/X/////P24-XXX-XXX-XXX {statement_descriptor} angezeigt, wobei /OPT/X/////P24-XXX-XXX-XXX eine eindeutige Referenz für die von Przelewy24 generierte Zahlung ist.

Erfassen Sie in Ihrer App die E-Mail-Adresse Ihrer Kund/innen.

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

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

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

Rufen Sie das Client-Geheimnis von der erstellten PaymentIntent ab und rufen Sie confirmPayment auf. Dies entspricht einer Webansicht, in der die Kund/innen die Zahlung auf der Website oder in der App ihrer Bank durchführen können. Anschließend wird das Promise mit dem Ergebnis der Zahlung aufgelöst.

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