Proposez la gestion des abonnements sur iOS à l’aide d’une page de portail client

Tout d’abord, vous devez créer un compte Stripe.

Avant d’intégrer le portail client, utilisez le Dashboard pour définir les actions que vos utilisateurs peuvent y effectuer. Choisissez vos paramètres pour les environnements de test et le mode production, en fonction de votre catalogue de produits et de tarifs.

Si vous souhaitez créer plusieurs configurations de portail pour différents ensembles de clients, ou si vous êtes une plateforme Connect et souhaitez gérer les configurations de vos comptes connectés, vous pouvez le faire en utilisant l’API :

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

Définir un catalogue de produits

Si vous autorisez les clients à passer à un abonnement supérieur ou inférieur, ou à modifier les quantités relatives à leurs abonnements, vous devez définir un catalogue de produits. Celui-ci inclut les produits et tarifs pour lesquels vos clients peuvent opter, ainsi que les abonnements dont ils peuvent ajuster les quantités. Consultez la section dédiée à la création d’un produit pour en savoir plus sur la création de produits et de tarifs. Si vous utilisez le portail client uniquement à des fins de facturation, vous n’avez pas besoin de définir un catalogue de produits.

Le portail affiche les attributs suivants de votre catalogue de produits :

• Nom et description du produit : ces attributs sont modifiables dans le Dashboard et l’API.
• Restrictions de quantité par produit : ces attributs sont modifiables dans le Dashboard.
• Devise, période de facturation et montant du tarif : ces attributs sont immuables et peuvent uniquement être définis au moment de leur création dans le Dashboard ou l’API.

Activer la collecte du numéro fiscal

Si vous utilisez Stripe Tax pour collecter automatiquement les taxes sur les abonnements ou factures, vous pouvez laisser vos clients définir et modifier leurs numéros fiscaux sur le portail client. Stripe Billing ajoute les numéros fiscaux aux factures des clients. Pour autoriser les clients à définir leur numéro fiscal, accédez aux paramètres du portail client et activez Numéro fiscal. Pour en savoir plus, consultez la page sur le fonctionnement des numéros fiscaux pour les abonnements et les factures.

Découvrez comment configurer Stripe Tax, collecter les taxes sur les paiements récurrents, collecter des taxes dans vos tunnels de paiement personnalisés et définir les taux de taxe des factures et postes de facture.

Prévisualiser et tester

Lorsque vous configurez vos paramètres, cliquez sur Prévisualiser pour prévisualiser le portail. Cela lancera une version en lecture seule du portail vous permettant de visualiser la manière dont vos clients peuvent gérer leurs abonnements et informations de facturation.

Après avoir enregistré vos paramètres, vous pouvez lancer le portail et le tester avec un client du environnement de test. Accédez à un client dans le Dashboard et cliquez sur le bouton Actions, puis sélectionnez Ouvrir le portail client.

La prévisualisation du portail en lecture seule n’est disponible que lorsque votre Dashboard se trouve dans un environnement de test. Si vous ne parvenez pas à prévisualiser et tester le portail, vérifiez vos paramètres pour vous assurer que votre configuration est enregistrée dans un environnement de test. Pour que la prévisualisation et les tests fonctionnent, vous devez également disposer d’autorisations en écriture dans le Dashboard.

Côté serveur

# Available as a gem
sudo gem install stripe

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

Installez ensuite l’interface de ligne de commande Stripe. L’interface de ligne de commande vous permet d’exécuter les tests de webhook dont vous avez besoin.

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

# Connect the CLI to your dashboard
stripe login

Pour davantage d’options d’installation, consultez la page consacrée à l’interface de ligne de commande Stripe.

Côté client

Le SDK iOS de Stripe est disponible en open source et fait l’objet d’une documentation complète. Il est également compatible avec les applications prenant en charge iOS 13 et les versions ultérieures.

Vous devez également définir votre clé publiable afin que le SDK puisse effectuer des appels à l’API vers Stripe. Pour commencer rapidement, vous pouvez coder cela en dur côté client pendant l’intégration, mais récupérer la clé publiable sur votre serveur en mode production.

// 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"

Lorsqu’un client souhaite apporter des changements à son abonnement, générez une URL pour la page du portail à l’aide de son ID client Stripe via l’API de session du portail.

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

Les liens universels permettent au portail client d’établir un lien profond vers votre application. Pour configurer un lien universel :

1. Ajoutez un fichier apple-app-site-association à votre domaine.
2. Ajoutez un droit de domaine associé à votre application.
3. Ajoutez une page de renvoi pour les URL de redirection de votre portail.

Définissez les domaines associés

Ajoutez un fichier à votre domaine sur .well-known/apple-app-site-association pour définir les URL que votre application peut gérer. Ajoutez l’ID d’application avec votre ID d’équipe que vous pourrez trouver sur la page d’abonnement du portail développeur d’Apple.

{
  "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

Pour en savoir plus, consultez la page d’Apple relative aux domaines associés pris en charge.

Ajouter un droit de domaine associé à votre application

1. Ouvrez le volet Signatures et fonctionnalités de la cible de votre application.
2. Cliquez sur + Fonctionnalité, puis sélectionnez Domaines associés.
3. Ajoutez une entrée pour applinks:example.com à la liste Domaines associés.

Pour en savoir plus sur les liens universels, consultez la page d’Apple sur les liens universels pour les développeurs.

Bien qu’iOS intercepte les liens vers les URL définies dans votre fichier apple-app-site-association, il se peut que la redirection ne parvienne pas à ouvrir votre application.

Veillez à créer une page de renvoi au niveau de votre return_url. Par exemple, vous pouvez définir un schéma d’URL personnalisé pour votre application et l’utiliser pour créer un lien de retour en cas d’échec du lien universel.

Ajoutez un bouton pour ouvrir le portail client dans votre application. Ce bouton :

1. Appelle votre endpoint côté serveur pour créer une session de portail.
2. Renvoyez l’URL de la page du portail au client.
3. Ouvrez l’URL dans 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.
            }
        }
    }
}

Lorsque les clients modifient l’état de leur abonnement via le portail client, Stripe vous envoie des webhooks, tels que customer.subscription.created, customer.subscription.deleted et customer.subscription.updated. Pour obtenir la liste complète des événements et les informations les concernant, consultez la page Utiliser des webhooks avec des abonnements. Assurez-vous de gérer tous les événements nécessaires pour surveiller avec précision les états des abonnements que vous avez configurés.

Pour tester votre intégration, vous pouvez surveiller les événements dans le Dashboard ou utiliser l’interface de ligne de commande Stripe. En production, configurez un endpoint de webhook et abonnez-vous aux types d’événements pertinents. Si vous ne connaissez pas votre clé STRIPE_WEBHOOK_SECRET, cliquez sur le lien du webhook dans le Dashboard pour l’afficher.

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