Apple Pay

Beantragen Sie eine Apple-Händler-ID, indem Sie sich auf der Apple Developer-Website für eine neue Kennung registrieren.

Tragen Sie eine Beschreibung und eine Kennung in das Formular ein. Die Beschreibung ist nur für Ihre internen Zwecke bestimmt und kann später geändert werden. Stripe empfiehlt, dass Sie den Namen Ihrer App als Kennung verwenden, zum Beispiel merchant.com.{{YOUR_APP_NAME}}.

Erstellen Sie ein Zertifikat für Ihre App, um Zahlungsdaten zu verschlüsseln.

Gehen Sie zu den iOS-Zertifikateinstellungen im Dashboard, klicken Sie auf Neue Anwendung hinzufügen und befolgen Sie die Anleitung.

Laden Sie eine Certificate Signing Request (CSR)-Datei herunter, um ein sicheres Zertifikat von Apple zu erhalten, mit dem Sie Apple Pay verwenden können.

Eine CSR-Datei muss verwendet werden, um genau ein Zertifikat auszustellen. Wenn Sie Ihre Apple-Händler-ID wechseln, müssen Sie zu den iOS-Zertifikateinstellungen im Dashboard gehen, um eine neue CSR und ein Zertifikat zu erhalten.

Fügen Sie Ihrer App die Apple Pay-Funktion hinzu. Öffnen Sie in Xcode Ihre Projekteinstellungen, klicken Sie auf die Registerkarte Signing & Capabilities (Anmeldung und Funktionen) und fügen Sie die Apple Pay-Funktion hinzu. Möglicherweise werden Sie an dieser Stelle aufgefordert, sich bei Ihrem Entwicklerkonto anzumelden. Wählen Sie die zuvor erstellte Händler-ID aus. Ihre App sollte nun Apple Pay unterstützen.

Apple Pay-Funktion in Xcode aktivieren

Geben Sie in der Komponente StripeProvider die Apple-Händler-ID an, für die Sie sich erfolgreich registriert haben:

import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  return (
    <StripeProvider
      publishableKey="
pk_test_TYooMQauvdEDq54NiTphI7jx"
      merchantIdentifier="merchant.com.{{YOUR_APP_NAME}}"
    >
      // Your app code here
    </StripeProvider>
  );
}

Bevor Sie Apple Pay als Zahlungsoption in Ihrer App anzeigen, sollten Sie prüfen, ob die Geräte der Nutzer/innen Apple Pay unterstützen und ob im Wallet eine Karte hinterlegt ist:

import { PlatformPayButton, isPlatformPaySupported } from '@stripe/stripe-react-native';

function PaymentScreen() {
  const [isApplePaySupported, setIsApplePaySupported] = useState(false);

  useEffect(() => {
    (async function () {
      setIsApplePaySupported(await isPlatformPaySupported());
    })();
  }, [isPlatformPaySupported]);

  // ...

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

  // ...

  return (
    <View>
      {isApplePaySupported && (
        <PlatformPayButton
          onPress={pay}
          type={PlatformPay.ButtonType.Order}
          appearance={PlatformPay.ButtonStyle.Black}
          borderRadius={4}
          style={{
            width: '100%',
            height: 50,
          }}
        />
      )}
    </View>
  );
}

Serverseitig

Erstellen Sie einen Endpoint, der einen PaymentIntent mit einem Betrag und einer Währung generiert. Legen Sie den zu bezahlenden Betrag immer serverseitig fest, also in einer vertrauenswürdigen Umgebung, und nicht clientseitig. So wird verhindert, dass böswillige Kund/innen ihre eigenen Preise festlegen können.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "amount"=1099 \
  -d "currency"="usd"

Clientseitig

Erstellen Sie eine Methode, die einen PaymentIntent von Ihrem Server anfordert:

function PaymentScreen() {
  // ...
  const fetchPaymentIntentClientSecret = async () => {
    const response = await fetch(`${API_URL}/create-payment-intent`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        some: 'value',
      }),
    });
    const { clientSecret } = await response.json();

    return clientSecret;
  };
  // ...
}

Fehlerbehebung

Wenn bei der Tokenerstellung Fehler mit der Stripe-API auftreten, liegt höchstwahrscheinlich ein Problem mit Ihrem Apple Pay-Zertifikat vor. In diesem Fall müssen Sie ein neues Zertifikat generieren und bei Stripe hochladen, wie auf dieser Seite beschrieben. Stellen Sie dabei sicher, dass Sie einen CSR verwenden, den Sie vom Dashboard abgerufen und nicht selbst generiert haben. Xcode legt alte Zertifikate oft fälschlicherweise im Zwischenspeicher ab. Stripe empfiehlt daher, zusätzlich zur Erstellung eines neuen Zertifikats auch eine neue Apple-Händler-ID zu erstellen.

Wenn Sie den Fehler erhalten, hat das folgenden Grund:

Sie haben Ihr Apple-Händler-Konto nicht bei Stripe hinterlegt.

Wahrscheinlich sendet Ihre App Daten, die mit einem früheren (nicht von Stripe stammenden) CSR/Zertifikat verschlüsselt wurden. Stellen Sie sicher, dass alle Zertifikate widerrufen werden, die durch nicht von Stripe stammende CSRs generiert wurden und Ihre Apple-Händler-ID aufweisen. Wenn dadurch das Problem nicht behoben wird, löschen Sie die Händler-ID in Ihrem Apple-Konto und legen Sie eine neue an. Erstellen Sie dann ein neues Zertifikat basierend auf dem zuvor verwendeten (von Stripe bereitgestellten) CSR. Sie müssen dieses neue Zertifikat nicht bei Stripe hochladen. Aktivieren und deaktivieren Sie die Apple Pay-Anmeldedaten in Ihrer App, um sicherzustellen, dass sie korrekt aktualisiert werden.

Rufen Sie in der onPress-Eigenschaft von PlatformPayButton confirmPlatformPayPayment auf, um ein Apple Pay-Formular zu öffnen. Um die Artikel des Warenkorbs der Kundin/des Kunden auf dem Zahlungsformular anzuzeigen, übergeben Sie die Artikel als Argument.

import { confirmPlatformPayPayment } from '@stripe/stripe-react-native';

function PaymentScreen() {
  // ... see above

  const pay = async () => {
    const clientSecret = await fetchPaymentIntentClientSecret()
    const { error } = await confirmPlatformPayPayment(
      clientSecret,
      {
        applePay: {
          cartItems: [
            {
              label: 'Example item name',
              amount: '14.00',
              paymentType: PlatformPay.PaymentType.Immediate,
            },
            {
              label: 'Total',
              amount: '12.75',
              paymentType: PlatformPay.PaymentType.Immediate,
            },
          ],
          merchantCountryCode: 'US',
          currencyCode: 'USD',
          requiredShippingAddressFields: [
            PlatformPay.ContactField.PostalAddress,
          ],
          requiredBillingContactFields: [PlatformPay.ContactField.PhoneNumber],
        },
      }
    );
    if (error) {
      // handle error
    } else {
      Alert.alert('Success', 'Check the logs for payment intent details.');
      console.log(JSON.stringify(paymentIntent, null, 2));
    }
  };

  // ... see above
}