Enable purchases with Flow Builder in Capacitor SDK
To enable in-app purchases, you need to understand three key concepts:
- Products – anything users can buy (subscriptions, consumables, lifetime access)
- Flows – screen sequences that present products to users, built in the no-code Flow Builder. The SDK retrieves them via
getFlow. If you’d rather build the UI in your own code, use a paywall instead — see Implement paywalls manually. - Placements – where and when you show flows in your app (like
main,onboarding,settings). You attach flows to placements in the dashboard, then request them by placement ID in your code. This makes it easy to run A/B tests and show different flows to different users.
Adapty offers you three ways to enable purchases in your app. Select one of them depending on your app requirements:
| Implementation | Complexity | When to use |
|---|---|---|
| Adapty Flow Builder | ✅ Easy | You create a complete, purchase-ready flow in the no-code builder. Adapty automatically renders it and handles all the complex purchase flow, receipt validation, and subscription management behind the scenes. |
| Manually created paywalls | 🟡 Medium | You implement your paywall UI in your app code, but still get the flow object from Adapty to maintain flexibility in product offerings. See the guide. |
| Observer mode | 🔴 Hard | You already have your own purchase handling infrastructure and want to keep using it. Note that the observer mode has its limitations in Adapty. See the article. |
The steps below show how to implement a flow created in the Adapty Flow Builder.
If you’d rather build the paywall UI yourself, see Implement paywalls manually.
To display a flow created in the Adapty Flow Builder, in your app code, you only need to:
- Get the flow: Get it from Adapty.
- Display it and Adapty will handle purchases for you: Show the view in your app.
- Handle button actions: Associate user interactions with your app’s response to them. For example, open links or close the flow when users click buttons.
Before you start
Before you start, complete these steps:
- Connect your app to the App Store and/or Google Play in the Adapty Dashboard.
- Create your products in Adapty.
- Create a flow and add products to it.
- Create a placement and add your flow to it.
- Install and activate the Adapty SDK in your app code. This guide uses Adapty Capacitor SDK v4 APIs.
1. Get the flow
Your flows are associated with placements configured in the dashboard. Placements allow you to run different flows for different audiences or to run A/B tests.
To get a flow created in the Adapty Flow Builder, get the flow object by the placement ID using the getFlow method. The flow contains the UI elements and styling needed to display it.
import { adapty } from '@adapty/capacitor';
try {
const flow = await adapty.getFlow({
placementId: 'YOUR_PLACEMENT_ID',
});
// the requested flow
} catch (error) {
// handle the error
}
2. Display the flow
Now, when you have the flow, it’s enough to add a few lines to display it.
Create a view with the createFlowView method, set its event handlers, then call view.present(). Each view can only be used once. If you need to display the flow again, call createFlowView one more time to create a new view instance.
import { createFlowView } from '@adapty/capacitor';
try {
const view = await createFlowView(flow);
await view.setEventHandlers({
onPurchaseCompleted(purchaseResult, product) {
return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
},
});
await view.present();
} catch (error) {
// handle the error
}
For more details on how to display a flow, see our guide.
3. Handle button actions
When users click buttons in the flow, the Capacitor SDK automatically handles purchases, restoration, closing the flow, and opening URLs.
However, other buttons have custom or pre-defined IDs and require handling actions in your code. Or, you may want to override their default behavior.
For example, here is the default behavior for the close button. You don’t need to add it in the code, but here, you can see how it is done if needed.
const unsubscribe = await view.setEventHandlers({
onCloseButtonPress() {
return true; // allow the flow to close
},
});
Next steps
Have questions or running into issues? Check out our support forum where you can find answers to common questions or ask your own. Our team and community are here to help!
Your flow is ready to be displayed in the app. Test your purchases to make sure you can complete a test purchase from the flow.
Now, you need to check the users’ access level to ensure you display a flow or give access to paid features to the right users.
Full example
Here is how all the steps from this guide can be integrated in your app together.
import { adapty, createFlowView } from '@adapty/capacitor';
export async function showFlow() {
try {
const flow = await adapty.getFlow({
placementId: 'YOUR_PLACEMENT_ID',
});
const view = await createFlowView(flow);
await view.setEventHandlers({
onCloseButtonPress() {
return true;
},
onPurchaseCompleted(purchaseResult, product) {
return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
},
});
await view.present();
} catch (error) {
// handle any error that may occur during the process
console.warn('Error showing flow:', error);
}
}