In-App Purchase (Android/iOS)

The In-App Purchase functionality allows you to enable seamless payments within your iOS application. Follow these steps to integrate and verify in-app purchases effectively.

Introduction

This document provides comprehensive instructions for implementing in-app purchases (IAP) in your Bubble.io application. By following these steps, you can offer subscription services, one-time purchases, and consumable items to your users on iOS and Android platforms.

Prerequisites

Before starting the IAP configuration process, ensure you have:

• An active Bubble.io account with editor access to your application

• Developer accounts set up with Apple (Apple Developer Program) and/or Google (Google Play Developer Console)

• Your app registered in App Store Connect (iOS) and/or Google Play Console (Android)

• Products/subscriptions created in both platforms as needed

• The Bubble.io webtonative plugin installed in your application (webtonative - In App Purchase plugin)

1. Creating the IAP Workflow in Bubble

Step 1: Initialize In-App Purchase Plugin

1. Create a button in your app (e.g., "Button Init IAP")

2. Set up a workflow triggered when the button is clicked

3. Add the "webtonative - In-App Purchase" action as Step 1

4. Configure the action with:

   • Google Play Product ID: Your product ID (e.g., test_product1234)

   • App Store Product ID: Your product ID (e.g., test_product123)

   • Product Type: INAPP or SUBS (subscription)

   • Check "Consumable" if the product is consumable

Step 2: Schedule Payment Verification

1. After the In-App Purchase action, add a "Schedule init payment verification" action

2. Configure it with:

   • Custom event: "init payment verification" (this name will be used in later steps)

   • Delay (seconds): 1 (or your preferred delay)

Step 3: Create a Custom Workflow for Verification

1. Create a custom workflow by clicking on the "Custom" event type

2. Name it "init payment verification" (must match the name used in Step 2)

3. This custom workflow will handle the verification process

4. You can add parameters if needed, but none are shown in the screenshot

5. Set the event color and workflow folder as desired

Step 4: Set Up IAP Verification

1. In your custom workflow, add the "webtonative - Verifying IAP Transaction" action

2. Configure it with:

   • iOS Secret: Enter your App Store shared secret (e.g., vs234bd34f404fd31bd2ac22)

   • IAP Verification Data: Use the dynamic data "init-webtonative's IAP Verification Data state"

   • Check "Is Test" if you're in testing mode

   • Set the "Only when" condition to run only when IAP Verification Data is not empty

Step 5 (Optional): Grab Transaction Data

1. Add the "webtonative - Grab IAP Transaction Data (only for checking) (testing)" action

2. This step is optional and mainly used for testing

3. Configure it to display:

   • result: Result of step 1's result

   • success: Result of step 1's success

   • message: Result of step 1's message

   • Is Already Purchased: Result of step 1's Is Already Purchased

4. This allows you to see and utilize the response data from the verification step

2. Implementing Purchase Verification

Additional Actions After Verification

After setting up the basic workflow as shown in the screenshots, you should add further actions to handle successful and failed purchases:

1. Add a conditional step after verification:

   When the Result of step 1's success is yes

2. For successful purchases:

   • Update the user's purchased items or subscription status

   • Show a success message

   • Unlock premium features

   • Record the transaction in your database

3. For failed purchases:

   When the Result of step 1's success is no

   • Show appropriate error message to the user

   • Log the error message (Result of step 1's message)

   • Offer retry options

Creating a Database for Purchases

Create a data type "Purchases" with the following fields:

• User (User)

• Product ID (Text)

• Purchase Date (Date)

• Transaction ID (Text, from verification result)

• Status (Options: active, expired, canceled)

• Platform (Options: iOS, Android)

3. Testing IAP Integration

Testing on iOS

1. Create sandbox testers in App Store Connect:

   • Go to "Users and Access" > "Sandbox" > "Testers"

   • Add test accounts with valid email addresses

2. On test devices:

   • Sign out of the production App Store account

   • Sign in with the sandbox tester account

   • Install your app and test purchases

   • For subscriptions, the renewal cycle is accelerated in the sandbox environment

Testing on Android

1. Set up a testing track in the Google Play Console

2. Add test users to the test track

3. Publish your app to the test track

4. Have testers install the app from the test track

5. Enable test mode in your purchase workflows

4. Troubleshooting Common Issues

Common iOS Issues

• Receipt Verification Fails: Ensure your shared secret is correctly entered in the verification step

• Products Not Loading: Verify product IDs match exactly between Bubble and App Store Connect

• Sandbox Environment Not Working: Make sure testers are signed in with sandbox accounts, not production accounts

Common Android Issues

• Billing Client Initialization Fails: Check your package name and Google Play setup

• Products Not Available: Verify products are active in Google Play Console

• Verification Errors: Ensure your configuration is correct

General Troubleshooting

• Check the browser console for errors during testing

• Use the "Grab IAP Transaction Data" step to debug verification responses

• Ensure you're testing on actual devices rather than simulators

• Verify that your app is properly signed and using the correct bundle ID/package name

Workflow Summary

1. The user clicks the purchase button

2. Initialize IAP with product information

3. Schedule verification after 1 second

4. Verify the purchase with app store servers

5. (Optional) Extract transaction details for debugging

6. Process the result and update user data accordingly

Conclusion

After completing all the steps in this guide, your Bubble.io application should be fully configured to handle in-app purchases across both iOS and Android platforms. Remember to thoroughly test all purchase flows before releasing to production, and implement proper server-side verification to prevent unauthorized access to premium features.