Akzeptieren Sie Zahlungen für digitale Waren in iOS mit einer vorgefertigten Zahlungsseite

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. Mit der CLI können Sie die erforderlichen Webhook-Tests durchführen und Ihre Produkte und Preise erstellen.

# 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 die zugehörigen Preise im Dashboard oder mit der Stripe-CLI. Sie können digitale Produkte mit einmaligen Preisen und Abonnements mit wiederkehrenden Preisen modellieren. Sie können Ihre Kundinnen und Kunden auch so viel bezahlen lassen, wie sie möchten (z. B. um zu entscheiden, wie viele Credits sie kaufen möchten), indem Sie Kundinnen/Kunden entscheiden, was sie bezahlen möchten auswählen.

In diesem Beispiel wird ein einzelnes Produkt und ein einzelner Preis verwendet, um ein Bundle mit 100 Münzen darzustellen.

Erstellen Sie jedes Mal, wenn Sie eine Checkout-Sitzung erstellen auch ein KundenObjekt für Ihre/n Nutzer/in, sofern noch keines besteht.

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

Verwenden Sie das Argument customer, um die Kunden-ID beim Erstellen einer Checkout-Sitzung zu übergeben. Dadurch wird sichergestellt, dass alle während der Sitzung erstellten Objekte dem richtigen Kundenobjekt zugeordnet werden.

Im payment-Modus verwenden wir die letzte Kartenzahlungsmethode der/s Kund/in, um die E-Mail-Adresse, den Namen, die Kartendetails und die Rechnungsadresse auf der Checkout-Seite vorab anzugeben. Checkout erfordert eine gültige Rechnungsadresse, um die Kartendaten der/s Kund/in vorauszufüllen.

Sie können Angaben zur Zahlungsmethode speichern, damit Checkout die Zahlungsmethode automatisch den Kundinnen/Kunden zur zukünftigen Verwendung zuordnet.

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

1. Fügen Sie Ihrer Domain eine apple-app-site-association-Datei hinzu.
2. Fügen Sie Ihrer App eine Berechtigung für die zugewiesenen Domains (“Associated Domains”) hinzu.
3. 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"
               }
             ]
           }
       ]
   }
}

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 für Entwickler 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 daher eine Fallback-Seite auf Ihren success- und cancel-URLs.

Eine Checkout-Sitzung ist eine programmgesteuerte Darstellung dessen, was Ihren Kund/innen bei der Weiterleitung zum Zahlungsformular angezeigt wird. Es gibt folgende Konfigurationsoptionen:

• Die Kunden-ID
• Die Produkt-ID (entweder eine einmalige Zahlung oder ein Abonnement)
• Eine success_url, ein universeller Link, der Ihre Kund/innen an Ihre App weiterleitet, um die Zahlung abzuschließen.
• Eine cancel_url, ein universeller Link, der Ihre Kund/innen zurück an Ihre App weiterleitet, wenn Sie in Checkout auf Ihr Logo klicken.

Geben Sie die URL aus der Antwort an Ihre App zurück, nachdem Sie eine Checkout-Sitzung erstellt haben.

// 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-checkout-session', async (req, res) => {
  // Fetch the Stripe customer ID for the customer associated with this request.
  // This assumes your app has an existing user database, which we'll call `myUserDB`.
  const user = myUserDB.getUserFromToken(req.query.token);
  const customerId = user.stripeCustomerID;

  // The price ID from the previous step
  const priceId = '{{PRICE_ID}}';

  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price: priceId,
        quantity: 1,
      },
    ],
    mode: 'payment',
    customer: customerId,
    success_url: 'https://example.com/checkout_redirect/success',
    cancel_url: 'https://example.com/checkout_redirect/cancel',
  });

  res.json({url: session.url});
});

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

Fügen Sie Ihrer App eine Checkout-Schaltfläche hinzu:

1. Ruft einen serverseitigen Endpoint auf, der die Checkout-Sitzung erstellt.
2. Gibt die Checkout-Sitzung an den Client zurück.
3. Öffnet die Sitzungs-URL in Safari.

import Foundation
import SwiftUI
import StoreKit

struct BuyCoinsView: View {
    @EnvironmentObject var myBackend: MyServer
    @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 {
                    myBackend.createCheckoutSession { url in
                        UIApplication.shared.open(url, options: [:], completionHandler: nil)
                    }
                } label: {
                    Text("Buy 100 coins")
                }.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
                    }
                }
            }
        }
    }
}

Die Checkout-URL auf dem Client abrufen

Verwenden Sie Ihren Server-Endpoint, um die Checkout-Sitzung aufzurufen.

class MyServer: ObservableObject {
  // The cached login token
  var token: String?

  func createCheckoutSession(completion: @escaping (URL) -> Void) {
    // Send the login token to the `/create_checkout_session` endpoint
    let request = URLRequest(url: URL(string: "https://example.com/create-checkout-session?token=\(self.token)")!)

    let task = URLSession.shared.dataTask(with: request, completionHandler: { (data, response, error) in
      guard let unwrappedData = data,
            let json = try? JSONSerialization.jsonObject(with: unwrappedData, options: []) as? [String : Any],
            let urlString = json["url"] as? String,
            let url = URL(string: urlString) else {
        // Handle error
        return
      }

      DispatchQueue.main.async {
        // Call the completion block with the Checkout session URL returned from the backend
        completion(url)
      }
    })
    task.resume()
  }

  func login() {
    // Login using the server and set the login token.
    let request = URLRequest(url: URL(string: "https://example.com/login")!)

    let task = URLSession.shared.dataTask(with: request, completionHandler: { (data, response, error) in
      guard let unwrappedData = data,
            let json = try? JSONSerialization.jsonObject(with: unwrappedData, options: []) as? [String : Any],
            let token = json["token"] as? String else {
        // Handle error
        return
      }
      self.token = token
    })
    task.resume()
  }
}

Nach erfolgreicher Kaufabwicklung sendet Stripe Ihnen einen checkout.session.completed Webhook. Wenn Sie das Ereignis empfangen, können Sie der/dem Kund/in die Münzen auf Ihrem Server zuweisen.

Checkout leitet Ihre Kundinnen und Kunden an die success_url weiter, wenn Sie bestätigen, dass Sie das Ereignis erhalten haben. In Szenarien, in denen Ihr Endpoint nicht funktionsfähig ist oder das Ereignis nicht ordnungsgemäß bestätigt wurde, leitet Checkout den Kunden/die Kundin 10 Sekunden nach einer erfolgreichen Zahlung an die success_url weiter.

Zu Testzwecken können Sie Ereignisse im Dashboard überwachen oder die Stripe-CLI verwenden. Für die Produktion richten Sie einen Webhook-Endpoint ein und abonnieren Sie die entsprechenden Ereignistypen. Wenn Sie Ihren STRIPE_WEBHOOK_SECRET-Schlüssel nicht kennen, klicken Sie im Dashboard auf den Webhook, um ihn anzuzeigen.

// 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');

app.post("/webhook", async (req, res) => {
  let data;
  let eventType;
  // Check if webhook signing is configured.
  const webhookSecret = 
"{{STRIPE_WEBHOOK_SECRET}}"
  if (webhookSecret) {
    // Retrieve the event by verifying the signature using the raw body and secret.
    let event;
    let signature = req.headers["stripe-signature"];

    try {
      event = stripe.webhooks.constructEvent(
        req.body,
        signature,
        webhookSecret
      );
    } catch (err) {
      console.log(`⚠️  Webhook signature verification failed.`);
      return res.sendStatus(400);
    }
    // Extract the object from the event.
    data = event.data;
    eventType = event.type;
  } else {
    // Webhook signing is recommended, but if the secret is not configured in `config.js`,
    // retrieve the event data directly from the request body.
    data = req.body.data;
    eventType = req.body.type;
  }

  switch (eventType) {
      case 'checkout.session.completed':
        const session = event.data.object;
        // Payment is successful.
        // Update the customer in your database to reflect this purchase.
        const user = myUserDB.userForStripeCustomerID(session.customer);
        user.addCoinsTransaction(100, session.id);
        break;
      default:
      // Unhandled event type
    }

  res.sendStatus(200);
});

Testen

Sie sollten jetzt eine funktionierende Checkout-Schaltfläche haben, über die Ihre Kund/innen zu Stripe Checkout weitergeleitet werden.

1. Klicken Sie auf die Schaltfläche Bezahlvorgang, die Sie dann zum Checkout-Zahlungsformular 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 checkout.session.completed wird ausgelöst und Stripe benachrichtigt Ihren Server über die Transaktion.
5. Sie werden zu Ihrer App zurückgeleitet.

Wenn Ihre Integration nicht funktioniert, lesen Sie bitte im Abschnitt Zusätzliche Testressourcen weiter unten nach.