Implement Mobile Web Checkout for Apple Applications

Tutorial Scope

This tutorial aims to help Apple App developers implement a mobile web browser-based checkout in their apps. Apple App developers who are not mandated to use Apple's in-app payment methods can use this tutorial to implement a mobile web browser-based checkout in their Apple Apps and save 15% or 30% commission rates on transactions. Learn more about Apple guidelines for business.

Prerequisites

Before implementing web checkout for your mobile app, ensure that you have configured your checkout experience in Chargebee and generate the Chargebee checkout URL using the Checkout for new Item API or by following this tutorial.

Steps to implement checkout experience in a mobile web browser

To offer this checkout experience, you need to add a CTA (Call to Action) in your App and initiate the external web checkout that is powered by Chargebee. Here are the steps:

1. Include a button or external link in your app to redirect users to an external web checkout page.

   Note: Choose to offer the in-app payment method of Apple, along with a regular browser-based checkout, or just offer the browser-based checkout experience in your app. You can include a single or multiple buttons. While the in-app payment method of Apple provides a complete in-app experience, browser-based checkout involves redirecting the user to a mobile web browser for completing payments.

2. A screen with both in-app and browser-based checkout options can look like this:

   

   When the user taps Subscribe via web and save 30%, your app should call the backend service to generate the Chargebee checkout URL.Use the Checkout for new Item API or follow this tutorial to create the checkout session. Your backend should return the hosted_page object in the response.

3. The id is a unique identifier of the hosted_page object used to track the state of the checkout process.

4. The url received from the above object is the unique link to the hosted checkout page, which you can embed in your website.

5. Pass the customer details to create a customer in Chargebee.

chargebee.hosted_page.checkout_new_for_items({
  subscription_items: {
    item_price_id: "premium-usd-monthly"
  },
  customer: {
    first_name: "Bruce",
    last_name: "Wayne",
    email: "wayne@wentrpise.com"
  }
}).request(function(error, result) {
  if (error) {
    // Handle error
  } else {
    res.send(result.hosted_page.url);
  }
});

6. When the app receives this url, you can open it in a web browser, which takes the user to your Chargebee checkout page.

7. The checkout page will be displayed according to your configuration which you can modify in Chargebee as per your branding.

8. Once the user completes the checkout, a new subscription is created in Chargebee. We recommend listening to relevant webhook events such as subscription_created or invoice_generated to confirm a successful checkout and grant the appropriate entitlements to the customer. You can use the id to retrieve the hosted page object and access the associated subscription and invoice details.

9. After a successful checkout, use the redirect_url to deep link back into your application. This URL receives query parameters such as the hosted_page_id and state, which you can use to restore session context or track the checkout outcome. For example: http://yoursite.com?id=<hosted_page_id>&state=succeeded.

10. After implementation, the complete purchase journey will look like this: