Accept payments for digital goods on iOS with a prebuilt payment page

First, register for a Stripe account.

Then add the Stripe API library to your backend:

# Available as a gem
sudo gem install stripe

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

Next, install the Stripe CLI. The CLI provides the webhook testing you’ll need, and you can run it to create your products and prices.

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

# Connect the CLI to your dashboard
stripe login

For additional install options, see Get started with the Stripe CLI.

Create your products and their prices in the Dashboard or with the Stripe CLI. You can model digital goods using one-off prices and subscriptions using recurring prices. You can also let your customer pay what they want (for example, to decide how many credits to buy), by selecting Customers choose what to pay.

This example uses a single product and price to represent a 100 coin bundle.

Each time you create a Checkout session, create a Customer object for your user if one doesn’t already exist.

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

Use the customer argument to pass their Customer ID when creating a Checkout Session. This ensures that all objects created during the session associate with the correct Customer object.

In payment mode, we use the customer’s most recent card payment method to prefill the email, name, card details, and billing address on the Checkout page. Checkout requires a valid billing address to prefill the customer’s card details.

You can save payment method details to have Checkout automatically attach the payment method to the Customer for future reuse.

Universal links allow Checkout to deep link into your app. To configure a universal link:

1. Add an apple-app-site-association file to your domain.
2. Add an Associated Domains entitlement to your app.
3. Add a fallback page for your Checkout redirect URLs.

Define the associated domains

Add a file to your domain at .well-known/apple-app-site-association to define the URLs your app handles. Prepend your App ID with your Team ID, which you can find on the Membership page of the Apple Developer Portal.

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

See Apple’s page on supporting associated domains for more details.

Add an Associated Domains entitlement to your app

1. Open the Signing & Capabilities pane of your app’s target.
2. Click + Capability, then select Associated Domains.
3. Add an entry for applinks:yourdomain.com to the Associated Domains list.

For more information on universal links, see Apple’s Universal Links for Developers page.

Although iOS intercepts links to the URLs defined in your apple-app-site-association file, you might encounter situations where the redirect fails to open your app.

Make sure to create a fallback page at your success and cancel URLs. In the example app, these are /checkout_redirect/success and /checkout_redirect/cancel.

A Checkout Session is the programmatic representation of what your customer sees when they’re redirected to the payment form. Configure it with:

• The customer ID
• The product ID
• A success_url, a universal link to redirect your customer to your app after they complete the payment.
• A cancel_url, a universal link to return your customer to your app if they click on your logo in Checkout.

After creating a Checkout Session, return the URL from the response to your app.

// This example sets up an endpoint using the Express framework.
// Watch this video to get started: https://youtu.be/rPR2aJ6XnAc.

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

Add a checkout button to your app. This button:

1. Calls your server-side endpoint to create a Checkout session.
2. Returns the Checkout session to the client.
3. Opens the session URL in 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
                    }
                }
            }
        }
    }
}

Fetch the Checkout URL on the client

Use your server endpoint to fetch the checkout session.

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

After the purchase succeeds, Stripe sends you a checkout.session.completed webhook. When you receive this event, you can add the coins to the customer on your server.

Checkout redirects your customer to the success_url when you acknowledge you received the event. In scenarios where your endpoint is down or the event isn’t acknowledged properly, Checkout redirects the customer to the success_url 10 seconds after a successful payment.

For testing purposes, you can monitor events in the Dashboard or using the Stripe CLI. For production, set up a webhook endpoint and subscribe to appropriate event types. If you don’t know your STRIPE_WEBHOOK_SECRET key, click the webhook in the Dashboard to view it.

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

Testing

You should now have a working checkout button that redirects your customer to Stripe Checkout.

1. Click the checkout button, which redirects you to the Stripe Checkout payment form.
2. Enter the test number 4242424242424242
   , a three-digit CVC, a future expiration date, and any valid postal code.
3. Tap Pay.
4. The checkout.session.completed webhook fires, and Stripe notifies your server about the transaction.
5. You’re redirected back to your app.

If your integration isn’t working, see the additional testing resources section below.