Bieten Sie die Abonnementverwaltung unter iOS mit einer Kundenportalseite

Zunächst müssen Sie sich für ein Stripe-Konto registrieren.

Bevor Sie das Kundenportal integrieren, definieren Sie im Dashboard, was Ihre Nutzer/innen mit dem Portal tun können. Wählen Sie Ihre Einstellungen für Sandboxes und den Live-Modus basierend auf Ihrem Produkt- und Preiskatalog.

Wenn Sie mehrere Portalkonfigurationen für verschiedene Kundengruppen erstellen möchten (oder wenn Sie eine Connect-Plattform haben und die Konfigurationen für Ihre verbundenen Konten verwalten möchten), können Sie dafür die API nutzen:

curl https://api.stripe.com/v1/billing_portal/configurations \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "features[invoice_history][enabled]"=true

Produktkatalog einrichten

Wenn Sie Kundinnen und Kunden gestatten, Upgrades oder Downgrades durchzuführen oder die Mengen ihrer Abonnements zu ändern, müssen Sie auch einen Produktkatalog einrichten. Dazu gehören die Produkte und Preise, auf die Ihre Kundinnen und Kunden ein Upgrade oder Downgrade durchführen können, sowie die Abonnements, für die sie Mengen aktualisieren können. Weitere Informationen zum Erstellen von Produkten und Preisen finden Sie unter Produkt erstellen. Wenn Sie das Kundenportal nur für die Rechnungsstellung verwenden, müssen Sie keinen Produktkatalog erstellen.

Das Portal zeigt die folgenden Attribute Ihres Produktkatalogs an:

• Name und Beschreibung des Produkts: Diese Attribute können im Dashboard und über die API bearbeitet werden.
• Mengenbeschränkungen pro Produkt: Diese Attribute sind im Dashboard bearbeitbar.
• Preis, Währung und Abrechnungsintervall: Diese Attribute sind fest und werden nur einmal bei der Erstellung im Dashboard und in der API festgelegt.

Erfassung von Steuer-IDs aktivieren

Wenn Sie Stripe Tax verwenden, um automatisch Steuern für Abonnements oder Rechnungen einzuziehen, können Sie Kundinnen/Kunden erlauben, ihre Steuer-IDs im Kundenportal festzulegen und zu aktualisieren. Stripe Billing fügt die Steuer-IDs zu den Rechnungen der Kundinnen/Kunden hinzu. Damit Kundinnen/Kunden ihre Steuer-IDs selbst festlegen können, gehen Sie zu den Kundenportaleinstellungen und aktivieren Sie Steuer-ID. Weitere Informationen finden Sie unter „So funktionieren Kunden-Steuer-IDs mit Abonnements und Rechnungen“.

Hier erfahren Sie, wie Sie Stripe Tax einrichten, Steuern für wiederkehrende Zahlungen erheben, Steuern in Ihren nutzerdefinierten Zahlungsabläufen einziehen und Steuersätze für Posten und Rechnungen festlegen.

Vorschau und Test

Klicken Sie beim Konfigurieren Ihrer Einstellungen auf Vorschau, um eine Vorschau des Portals anzuzeigen. Dadurch wird eine schreibgeschützte Version des Portals geöffnet, die es Ihnen ermöglicht, zu sehen, wie Ihre Kundinnen und Kunden ihre Abonnements und Rechnungsdetails verwalten können.

Nachdem Sie Ihre Einstellungen gespeichert haben, können Sie das Portal starten und es mit einer Kundin oder einem Kunden in einer Sandbox testen. Gehen Sie im Dashboard auf eine Kundin oder einen Kunden, klicken Sie auf Aktionen, und wählen Sie dann Kundenportal öffnen.

Sie können eine Vorschau des Portals nur als schreibgeschützte Version anzeigen, wenn sich Ihr Dashboard in einer Sandbox befindet. Wenn Sie keine Vorschau des Portals anzeigen und testen können, überprüfen Sie Ihre Einstellungen, um sicherzustellen, dass Ihre Konfiguration in einer Sandbox gespeichert ist. Damit die Vorschau und das Testen funktionieren, müssen Sie auch über die Berechtigung zum Bearbeiten im Dashboard verfügen.

Serverseitig

# 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.

# 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.

Clientseitig

Das Stripe iOS SDK ist Open Source, vollständig dokumentiert und kompatibel mit Apps, die iOS 13 oder höher unterstützen.

Sie müssen auch Ihren veröffentlichbaren Schlüssel festlegen, damit das SDK API Aufrufe an Stripe tätigen kann. Um schnell loszulegen, können Sie dies während der Integration auf dem Client fest codieren, aber den veröffentlichbaren Schlüssel von Ihrem Server in der Produktionsumgebung abrufen.

// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
STPAPIClient.shared.publishableKey = 
"pk_test_TYooMQauvdEDq54NiTphI7jx"

Wenn Kundinnen/Kunden Änderungen an ihrem Abonnement vornehmen möchten, generieren Sie eine URL für die Portalseite unter Verwendung ihrer Stripe-Kunden-ID über die Portal Session API.

// 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.get('/customer_portal_url', async (req, res) => {

  // Replace this with your actual customer lookup logic
  const customerId = 'cus_...'; // Get this from your database

  const billingSession = await stripe.billingPortal.sessions.create({
    customer: customerId,
    return_url: 'https://example.com/portal_redirect',
  });

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

Universelle Links ermöglichen es dem Kundenportal, einen Deep-Link zu Ihrer App herzustellen. 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 Portal-Umleitungs-URLs 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 einen Eintrag für applinks:example.com zur Liste der Zugewiesenen Domains 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 in Ihrem return_url eine Fallback-Seite. Sie können beispielsweise ein benutzerdefiniertes URL-Schema für Ihre App definieren und es verwenden, um eine Verknüpfung herzustellen, falls der universelle Link fehlschlägt.

Fügen Sie eine Schaltfläche hinzu, um das Kundenportal in Ihrer App zu öffnen. Diese Schaltfläche:

1. Ruft Ihren serverseitigen Endpoint auf, um eine Portalsitzung zu erstellen.
2. Gibt die URL der Portalseite an den Client zurück.
3. Öffnet die URL in Safari.

import Foundation
import SwiftUI
import StoreKit

struct SubscriptionManagementView: View {

    @EnvironmentObject var myBackend: MyServer

    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 {
            Button {
                myBackend.createCustomerPortalSession { url in
                    UIApplication.shared.open(url, options: [:], completionHandler: nil)
                }
            } label: {
                Text("Manage subscriptions")
            }.onOpenURL { url in
                // Handle the universal link from the customer portal.
                // Implement any necessary behavior, such as refreshing the customer's subscription status.
            }
        }
    }
}

Wenn Kundinnen/Kunden über das Kundenportal Änderungen an ihrem Abonnementstatus vornehmen, sendet Stripe Ihnen Webhooks wie customer.subscription.created, customer.subscription.deleted und customer.subscription.updated. Eine vollständige Liste der Ereignisse und Informationen dazu finden Sie unter Webhooks mit Abonnements verwenden. Stellen Sie sicher, dass Sie alle Ereignisse verarbeiten, die erforderlich sind, um den Status der von Ihnen konfigurierten Abonnements genau zu überwachen.

Zu Testzwecken können Sie Ereignisse im Dashboard überwachen oder die Stripe-CLI verwenden. Richten Sie 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-Link im Dashboard, um ihn anzuzeigen.

const express = require('express');
const app = express();
// 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')('<secret key>')

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 'customer.subscription.created': {
      const subscription = event.data.object;
      const customerId = subscription.customer;
      myUserDB.setUserSubscriptionIsActive(customerId, true);
      break;
    }
    case 'customer.subscription.deleted': {
      const subscription = event.data.object;
      const customerId = subscription.customer;
      myUserDB.setUserSubscriptionIsActive(customerId, false);
      break;
    }
    // Add other relevant event types as needed
  }

  res.sendStatus(200); // Acknowledge receipt of the webhook
})