Accepter des paiements pour des biens numériques sur iOS avec une page de paiement personnalisée

Tout d’abord, inscrivez-vous pour créer un Compte Stripe.

Ajoutez ensuite la bibliothèque d’API Stripe à votre back-end :

# 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 fournit les tests de webhooks requis, que vous pouvez exécuter pour créer vos produits et vos tarifs.

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

Créez vos produits et leurs tarifs dans le Dashboard ou via l’interface de ligne de commande Stripe.

Cet exemple utilise un produit et un tarif uniques pour représenter un produit d’abonnement à un tarif mensuel de 9,99 USD.

Accédez à la page Ajouter un produit et créez un produit d’abonnement à un tarif mensuel de 9,99 USD.

Après avoir créé le tarif, enregistrez l’ID du tarif pour pouvoir l’utiliser dans les étapes suivantes. Les ID de tarif sont similaires à : price_G0FvDp6vZvdwRZ.

Cliquez ensuite sur Copier en mode production pour dupliquer votre produit d’un environnement de test vers le mode production.

Chaque fois que votre client accède à votre page de paiement, créez un objet Customer s’il n’en existe pas déjà un.

Votre serveur doit gérer :

• La création d’un client (s’il n’existe pas encore de client Stripe correspondant).
• La création d’un abonnement à l’état incomplete.
• Le renvoi de la clé secrète du client PaymentIntent au front-end.
• Les webhooks afin que vous puissiez mettre à jour l’état de l’abonnement de votre client dans votre propre base de données.

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

Lorsque vous créez un abonnement pour utiliser le Payment Element, vous transmettez généralement payment_behavior: 'default_incomplete'. Cela indique à Stripe de créer un abonnement à l’état incomplete et de générer un Payment Intent pour le paiement initial.

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

Les liens universels permettent à votre page de paiement d’être profondément liée à votre application. Pour configurer un lien universel :

• Ajoutez un fichier apple-app-site-association à votre domaine.
• Ajoutez un droit de domaine associé à votre application.
• Ajoutez une page de renvoi pour vos URL de redirection Checkout.

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 davantage sur les liens universels, consultez la documentation d’Apple sur les liens universels.

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.

Créez une page de renvoi vers les URL success et cancel. Par exemple, vous pouvez avoir une page /checkout_redirect/success et une page /checkout_redirect/cancel.

Ajoutez un bouton de paiement à votre application. Ce bouton ouvre votre page de paiement personnalisée dans Safari.

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

Avec Elements, assurez-vous de rediriger les utilisateurs vers votre application (en utilisant le lien universel enregistré) une fois le paiement confirmé.

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

Lorsque l’utilisateur effectue le paiement initial ou lorsque des paiements récurrents ultérieurs ont lieu, Stripe envoie des événements tels que :

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

Écoutez ces événements dans votre endpoint de webhook. Par exemple :

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
     // e.g., 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;
     // e.g., 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 });
});

Pour tester votre intégration, vous pouvez surveiller les événements dans le Dashboard ou utiliser l’interface de ligne de commande Stripe. Lorsque vous développez en mode 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 webhook dans le Dashboard pour l’afficher.

Tests

Pour tester le bon fonctionnement de votre bouton de paiement, procédez comme suit :

1. Cliquez sur le bouton de paiement, qui vous redirige vers votre page de paiement avec le composant Payment Element de Stripe.
2. Saisissez le numéro de carte de test 4242424242424242
   , un code CVC à trois chiffres, une date d’expiration et un code postal valide.
3. Appuyez sur Payer.
4. Le webhook invoice.payment_succeeded s’active et Stripe notifie votre serveur de la transaction.
5. Vous êtes redirigé(e) vers votre application.

Si votre intégration ne fonctionne pas, consultez la section Ressources de test supplémentaires.