Zahlungen für digitale Waren auf iOS mit benutzerdefiniertem Bezahlvorgang akzeptieren

Registrieren Sie sich zunächst für ein Stripe-Konto.

Fügen Sie dann die Stripe API-Bibliothek Ihrem Backend hinzu:

# Available as a gem
sudo gem install stripe

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

Installieren Sie als Nächstes die Stripe CLI. Die CLI bietet die erforderlichen Webhook-Tests und kann zum Erstellen Ihrer Produkte und Preise ausgeführt werden.

# Install Homebrew to run this command: https://brew.sh/
brew install stripe/stripe-cli/stripe

# Connect the CLI to your dashboard
stripe login

Weitere Installationsoptionen finden Sie unter Mit der Stripe-CLI loslegen.

Erstellen Sie Ihre Produkte und ihre Preise im Dashboard oder mit der Stripe CLI. Dieses Beispiel verwendet ein Produkt und einen Preis, um ein Abo-Produkt mit einem monatlichen Preis von 9,99 USD darzustellen.

1. Navigieren Sie zur Seite Produkt hinzufügen und erstellen Sie ein Abonnementprodukt mit einem monatlichen Preis von 9,99 USD.

2. Zeichnen Sie nach Erstellung des Preises die Preis-ID auf, sodass diese in nachfolgenden Schritten verwendet werden kann. Preis-IDs sehen in etwa wie folgt aus: price_G0FvDp6vZvdwRZ.

3. Klicken Sie als Nächstes auf In Live-Modus kopieren, um Ihr Produkt aus einer Testumgebung in den Live-Modus zu klonen.

Jedes Mal, wenn Ihre Kundin/Ihre Kunde Ihre Bezahlseite aufruft, erstellen Sie ein Customer-Objekt für ihn/sie, sofern noch keines existiert.

Ihr Server muss Folgendes verarbeiten:

• Kundenerstellung (falls es noch keine/n passende/n Stripe-Kunden/-Kundin gibt)
• Die Abonnementerstellung befindet sich im Status incomplete.
• Das Client-Geheimnis des PaymentIntent an das Frontend zurückgeben.
• Webhook-Verarbeitung, damit Sie den Abonnementstatus Ihrer Kundinnen/Kunden in Ihrer eigenen Datenbank aktualisieren können.

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')(
'sk_test_BQokikJOvBiI2HlWgH4olfQ2');

// This assumes your app has an existing user database, which we'll call `myUserDB`.
const user = myUserDB.getUser("jennyrosen");

if (!user.stripeCustomerID) {
 const customer = await stripe.customers.create({
   name: user.name,
   email: user.email,
 });


 // Set the user's Stripe Customer ID for later retrieval.
 user.stripeCustomerID = customer.id;
}

Beim Erstellen eines Abonnements zur Verwendung des Payment Element übergeben Sie üblicherweise payment_behavior: 'default_incomplete'. Hierdurch wird Stripe angewiesen, ein Abonnement mit dem Status incomplete zu erstellen und einen Payment Intent für die erste Zahlung zu generieren.

// This example sets up an endpoint using the Express framework.

const express = require('express');
const app = express();
const stripe = require('stripe')(
'sk_test_BQokikJOvBiI2HlWgH4olfQ2')

app.post('/create-subscription', async (req, res) => {
 const { priceId, customerId } = req.body;

 // Create the subscription
 // setting payment_behavior to "default_incomplete" ensures we get a Payment Intent
 // that we can confirm on the client using the Payment Element
 const subscription = await stripe.subscriptions.create({
   customer: customerId,
   items: [{ price: priceId }],
   payment_behavior: 'default_incomplete',
   expand: ['latest_invoice.payment_intent'],
 });

 // Make sure you associate the subscription ID with the user in your database!
 myUserDB.addUserSubscription("jennyrosen", subscription.id);

 // Get the Payment Intent client secret
 const paymentIntent = subscription.latest_invoice.payment_intent;
 const clientSecret = paymentIntent.client_secret;

 return res.json({
   subscriptionId: subscription.id,
   clientSecret: clientSecret,
 });
});

app.post('/login', async (req, res) => {
 // This assumes your app has an existing user database, which we'll call `myUserDB`.
 const token = myUserDB.login(req.body.login_details)
 res.json({token: token})
});

app.listen(4242, () => console.log(`Listening on port ${4242}!`));

Universelle Links ermöglichen es Ihrer Bezahlseite einen Deep Link zu Ihrer App zu erstellen. So konfigurieren Sie einen universellen Link:

• Fügen Sie Ihrer Domain eine apple-app-site-association-Datei hinzu.
• Fügen Sie Ihrer App eine Berechtigung für die zugewiesenen Domains (“Associated Domains”) hinzu.
• Fügen Sie eine Fallbackseite für Ihre Checkout-Umleitungs-URL hinzu.

Definieren Sie die zugewiesenen Domains

Fügen Sie Ihrer Domain eine Datei unter .well-known/apple-app-site-association hinzu, um die URLs zu definieren, die Ihre App verarbeitet. Stellen Sie Ihrer App-ID die Team-ID voran, die Sie auf der Mitgliedschafts-Seite des Apple Developer Portals finden.

{
 "applinks": {


     "apps": [],
     "details": [
          {
            "appIDs": [ "A28BC3DEF9.com.example.MyApp1",
                        "A28BC3DEF9.com.example.MyApp1-Debug" ],
            "components": [
              {
                 "/": "/checkout_redirect*",
                 "comment": "Matches any URL whose path starts with /checkout_redirect"
              }
            ]
          }
      ]
  }
}

Sie müssen der Datei den MIME-Typ application/json hinzufügen. Mit curl -I bestätigen Sie den Inhaltstyp.

curl -I https://example.com/.well-known/apple-app-site-association

Auf der Seite Zugewiesene Domains unterstützen von Apple finden Sie weitere Einzelheiten hierzu.

Fügen Sie Ihrer App eine Berechtigung für die zugewiesenen Domains (“Associated Domains”) hinzu.

1. Öffnen Sie den Bereich Signierung & Kapazitäten der Zielanwendung Ihrer App.
2. Klicken Sie auf + Funktion und wählen Sie dann Zugewiesene Domains aus.
3. Fügen Sie der Liste der zugewiesenen Domains einen Eintrag für applinks:example.com hinzu.

Weitere Informationen zu universellen Links finden Sie auf der Seite Universelle Links von Apple.

Obgleich iOS Links an die in Ihrer apple-app-site-association-Datei definierten URLs abruft, kann es zu Situationen kommen, in denen die Umleitung Ihre App nicht öffnen kann.

Erstellen Sie eine Fallback-Seite auf Ihren success- und cancel-URLs. Sie können zum Beispiel eine /checkout_redirect/success-Seite und eine /checkout_redirect/cancel-Seite haben.

Fügen Sie Ihrer App eine Checkout-Schaltfläche hinzu. Mit dieser Schaltfläche wird Ihre nutzerdefinierte Bezahlseite in Safari geöffnet.

import Foundation
import SwiftUI
import StoreKit

struct BuySubscriptionsView: View {
   @EnvironmentObject var myBackend: MyBackend
   @State var paymentComplete = false


   var body: some View {
       // Check if payments are blocked by Parental Controls on this device.
       if !SKPaymentQueue.canMakePayments() {
           Text("Payments are disabled on this device.")
       } else {
           if paymentComplete {
               Text("Payment complete!")
           } else {
               Button {
                   UIApplication.shared.open("https://example.com/checkout", options: [:], completionHandler: nil)
               } label: {
                   Text("Subscribe")
               }.onOpenURL { url in
                   // Handle the universal link from Checkout.
                   if url.absoluteString.contains("success") {
                       // The payment was completed. Show a success
                       // page and fetch the latest customer entitlements
                       // from your server.
                       paymentComplete = true
                   }
               }
           }
       }
   }
}

Stellen Sie bei Verwendung von Elements sicher, dass Sie Nutzer/innen nach einer erfolgreichen Zahlungsbestätigung (über den registrierten universellen Link) zurück zu Ihrer App leiten.

stripe.confirmPayment({
  elements,
  confirmParams: {
    // Return URL where the customer should be redirected after the PaymentIntent is confirmed.
    return_url: 'https://example.com/checkout_redirect/success',
  },
})
.then(function(result) {
  if (result.error) {
    // Inform the customer that there was an error.
  }
});

Wenn der/die Nutzer/in die erste Zahlung abschließt oder wenn nachfolgende wiederkehrende Zahlungen erfolgen, sendet Stripe beispielsweise folgende Ereignisse:

• invoice.payment_succeeded
• customer.subscription.updated
• invoice.payment_failed

Überwachen Sie diese Ereignisse in Ihrem Webhook-Endpoint. Zum Beispiel:

app.post('/webhook', express.raw({ type: 'application/json' }), (req, res) => {
 const sig = req.headers['stripe-signature'];
 let event;


 try {
   event = stripe.webhooks.constructEvent(req.body, sig, process.env.STRIPE_WEBHOOK_SECRET);
 } catch (err) {
   console.error('Webhook signature verification failed.', err.message);
   return res.sendStatus(400);
 }

 switch (event.type) {
   case 'invoice.payment_succeeded': {
     const invoice = event.data.object;
     // Mark subscription as active in your database
     // For example, invoice.subscription -> "sub_abc123"
     console.log('Payment succeeded');
     break;
   }
   case 'invoice.payment_failed': {
     const invoice = event.data.object;
     console.log('Payment failed - notify the user to update their payment methods');
     break;
   }
   case 'customer.subscription.updated': {
     const subscription = event.data.object;
     // For example, handle pause, cancellation, or other changes
     console.log(`Subscription updated: ${subscription.id}`);
     break;
   }
   default:
     console.log(`Unhandled event type ${event.type}`);
 }
  res.json({ received: true });
});

Um Ihre Integration zu testen, können Sie Ereignisse im Dashboard überwachen oder die Stripe CLI verwenden. Richten Sie bei der Entwicklung in der Produktion einen Webhook-Endpoint ein und abonnieren Sie die entsprechenden Ereignistypen. Wenn Sie Ihren STRIPE_WEBHOOK_SECRET-Schlüssel nicht kennen, klicken Sie auf den Webhook im Dashboard, um ihn anzuzeigen.

Tests

So testen Sie, ob Ihre Checkout-Schaltfläche funktioniert:

1. Klicken Sie auf die Schaltfläche zum Bezahlen, die Sie zu Ihrem Bezahlvorgang mit dem Payment Element von Stripe weiterleitet.
2. Geben Sie die Testnummer 4242424242424242
   , einen dreistelligen CVC, ein Ablaufdatum und eine gültige Postleitzahl.
3. Tippen Sie auf Bezahlen.
4. Der Webhook invoice.payment_succeeded wird ausgelöst und Stripe benachrichtigt Ihren Server über die Transaktion.
5. Sie werden zu Ihrer App zurückgeleitet.

Wenn Ihre Integration nicht funktioniert, sehen Sie sich die zusätzlichen Testressourcen an.