Integrate with your checkout
Connect the SDK to Stripe, Paddle or your own backend. Your site charges; Miniwall only renders.
Miniwall never takes payment and never sees amounts. The screen shows prices you pass in and tells your code which package the visitor chose. You start checkout.
Find the package IDs. On Install SDK pick the screen. The IDs are listed in step 2 (for example monthly, annual).
Load prices on your server and send them to the page. With Stripe:
import { productsFromStripe } from '@ui-kit/web';
const products = productsFromStripe({
monthly: await stripe.prices.retrieve('price_monthly', { expand: ['product'] }),
annual: await stripe.prices.retrieve('price_annual', { expand: ['product'] }),
});
res.json(products);Any other provider: build objects like { price: 9.99, currency: 'USD', period: 'month' }.
Open the screen with those products and run checkout in onPurchase.
const result = await UIKit.presentPaywall({
paywall: { placement: 'upgrade_button' },
products,
onPurchase: async ({ packageId }) => {
const ok = await startCheckout(packageId); // popup or in-page payment
return ok; // true: paid, false: cancelled; throw on failure
},
});If checkout redirects away (hosted checkout), the visitor leaves the page. In onPurchase redirect, and on the success page call:
UIKit.configure({ apiKey: 'pk_...' });
UIKit.reportPurchase({ packageId: 'annual' });so Analytics counts the purchase for the screen where they tapped buy.
Unlock the account on your server, from your payment provider's webhook. Do not rely on the browser result alone.