Accepter des paiements pour des biens numériques sur iOS à l'aide d'une page de paiement préconfiguré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. Cette dernière vous permet d’exécuter les tests webhook dont vous aurez besoin et vous pouvez l’utiliser 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. Vous pouvez modéliser les biens numériques à l’aide de tarifs ponctuels et les abonnements à l’aide de tarifs récurrents. Vous pouvez également laisser votre client payer le montant de son choix (par exemple, pour décider du nombre de crédits à acheter), en sélectionnant Les clients indiquent le montant à payer.

Cet exemple utilise un seul produit et un tarif pour représenter un lot de 100 coins.

Chaque fois que vous créez une session Checkout, créez un objet Customer pour votre utilisateur si celui-ci n’existe pas encore.

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

Utilisez l’argument customer pour transmettre leur ID client lorsqu’ils créent une session Checkout. Cela permet de vérifier que tous les objets créés pendant la session sont associés à l’objet Customer correspondant.

En mode payment, nous nous référons au paiement par carte bancaire le plus récent du client pour renseigner automatiquement son adresse e-mail, son nom, ses informations de carte bancaire et son adresse de facturation sur la page Checkout. Une adresse de facturation valide est requise pour que Checkout puisse remplir automatiquement les informations de carte bancaire du client.

Vous pouvez enregistrer les informations du moyen de paiement pour que Checkout associe automatiquement ce moyen de paiement à l’objet Customer afin de pouvoir le réutiliser.

Les liens universels autorisent Checkout à vous renvoyer directement 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 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 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 vers les URL success et cancel.

Une session Checkout est la représentation programmatique de ce que votre client voit lorsqu’il est redirigé vers le formulaire de paiement. Configurez-la avec :

• ID du client
• ID du produit (paiement ponctuel ou abonnement)
• Une URL success_url, à savoir un lien universel vers lequel rediriger votre client après avoir finalisé le paiement.
• Une URL cancel_url, à savoir un lien universel vers lequel rediriger votre client s’il clique sur votre logo dans Checkout.

Après avoir créé une session Checkout, renvoyez l’URL contenue dans la réponse vers votre application.

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

Ajoutez un bouton de paiement à votre application. Ce bouton :

1. Appelez un endpoint côté serveur pour créer une session Checkout.
2. Renvoie la session Checkout au client.
3. Ouvre l’URL de la session dans 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
                    }
                }
            }
        }
    }
}

Récupérer l’URL Checkout côté client

Utilisez votre endpoint serveur pour récupérer la session de paiement.

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

Une fois l’achat terminé, Stripe vous envoie un webhook checkout.session.completed. Lorsque vous l’avez reçu, vous pouvez ajouter les coins au client sur votre serveur.

Checkout redirige votre client vers l’URL success_url lorsque vous confirmez avoir reçu l’événement. Si votre endpoint est hors service ou si l’événement n’est pas confirmé correctement, Checkout redirige le client vers l’URL success_url 10 secondes après la finalisation du paiement.

Pour les tests, vous pouvez surveiller les événements dans le Dashboard ou utiliser l’interface de ligne de commande Stripe. Pour le mode production, configurez un endpoint de webhook et abonnez-vous aux types d’événement appropriés. Si vous ne connaissez pas votre clé STRIPE_WEBHOOK_SECRET, cliquez sur le webhook dans le Dashboard pour l’afficher.

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

Tests

Vous devriez maintenant disposer d’un bouton de règlement fonctionnel qui redirige votre client vers Stripe Checkout.

1. Cliquez sur le bouton de paiement qui vous redirige vers le formulaire de paiement Stripe Checkout.
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 checkout.session.completed s’active et Stripe notifie votre serveur de la transaction.
5. Vous êtes redirigé vers votre application.

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