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.

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

Vous devez traiter le fichier avec le type MIME application/json. Utilisez curl -I pour confirmer le type de contenu.

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.

Assurez-vous de créer une page de repli à votre success_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 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 effectué, 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.

// Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
// Find your keys at https://dashboard.stripe.com/apikeys.
const stripe = require('stripe')(
'sk_test_VePHdqKTYQjKNInc7u56JBrQ');

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

Testez votre bouton de paiement 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é(e) vers votre application.

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