Purchase button
Add the button that buys the selected plan, and style it. Miniwall draws it; your site takes the payment.
The purchase button is the main call to action on a paywall. When a visitor taps it, the Web SDK tells your site which package ID is selected, and your site runs checkout. Miniwall does not process payments.
Add it
- Drag Purchase button from Purchase onto the phone.
- Or hover a layer in Layers, click +, then Purchase, then Purchase button.
Put it in the Footer so it stays visible while the content scrolls. A new button has the label Purchase, white bold text on a black pill with 16 pixels of padding.
Where it can go
In stacks, the header, the footer and tab content. It is tappable: it cannot sit inside another button, a package or an answer, and it cannot contain buttons, plans, questions, tabs or carousels. Text, icons and images inside are fine. See Where components can go.
Design panel
| Section | Control | What it does | Default |
|---|---|---|---|
| Checkout Behavior | Type | In-App Checkout is the only choice. On your site it calls your onPurchase handler with the selected package ID. | In-App Checkout |
| Style | All stack controls | Layout, size, spacing, shape, fill, border and drop shadow for the button. | Vertical, centered, pill, black |
Edit the label by selecting the text inside the button. See Stack and Text for those controls. A screen created before this setting existed may show an empty Type with Not supported yet. Choose In-App Checkout to fix it.
States
There is no When selected tab. While your site handles a purchase, the Web SDK shows its own busy state.
Dark mode and screen sizes
The default black fill and white text work in both modes, but check any color you change. Set the width to Fill for a full-width button.
Tips and common mistakes
- A screen with packages needs one purchase button, and a purchase button needs at least one package. The editor lists this under N Issues.
- Use a text such as
{{ product.price }}in the label only if it should show the selected plan's price. - Screens without plans, such as onboarding, should use a Button instead.
In the JSON
The component type is purchase_button, with method (in_app_checkout) and one inner stack.