Wrapply logoWrapply Tutorials
Wrapply / Tutorial / Integração de compras in-app
💳 Store payments

Integração de compras in-app: de site para app Flutter

Este guia explica como preparar compras in-app nativas em um app Wrapply: produtos da loja, product IDs, chamadas de compra, restauração e validação de recibos no backend.

Generate your app Back to tutorials

Comandos bridge para compras in-app

Quando o módulo de compras in-app está ativo, o app gerado expõe comandos JavaScript reais dentro da WebView. O site chama esses comandos e o backend deve validar a compra antes de liberar o recurso pago.

ComandoUsoPayloadResposta típica
window.Wrapply.iap.getProducts(payload)Lê produtos configurados no Google Play ou App Store{ productIds: ['premium_monthly'] }{ ok, available, products, notFoundIds }
window.Wrapply.iap.purchase(payload)Inicia o fluxo de compra nativo{ productId, consumable, applicationUserName }{ ok, purchaseStarted, product }
window.Wrapply.iap.restorePurchases(payload)Restaura compras não consumíveis ou assinaturas{ applicationUserName }{ ok, restoreStarted, latestPurchases }
window.Wrapply.iap.getStatus(payload)Verifica se o billing da loja está disponível e lê os últimos eventos{}{ ok, available, latestPurchases }

Configuração necessária nas lojas

Crie os produtos no Google Play Console e App Store Connect usando os mesmos product IDs usados pelo site. Teste em dispositivos reais e valide recibos no servidor antes de liberar assinaturas, créditos ou conteúdo premium.

function onWrapplyReady(callback) {
if (window.Wrapply?.__nativeBridgeReady) return callback(window.Wrapply);
window.addEventListener('wrapplyNativeBridgeReady', () => callback(window.Wrapply), { once: true });
}

onWrapplyReady(async (Wrapply) => {
if (!Wrapply.iap) return;
const products = await Wrapply.iap.getProducts({ productIds: ['premium_monthly', 'credits_10'] });
console.log(products);
});
async function buyPremium(currentUser) {
if (!window.Wrapply?.iap) return showWebCheckoutFallback();
const result = await window.Wrapply.iap.purchase({
productId: 'premium_monthly',
consumable: false,
applicationUserName: currentUser.id
});
await fetch('/api/iap/verify', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(result)
});
}
async function restoreNativePurchases(currentUser) {
if (!window.Wrapply?.iap) return;
const restored = await window.Wrapply.iap.restorePurchases({
applicationUserName: currentUser.id
});
await fetch('/api/iap/restore', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(restored)
});
}

Exemplos de integração

Você pode usar o mesmo padrão bridge em JavaScript, React, Vue, Angular, PHP/Laravel, WordPress ou jQuery. O ponto principal é esperar o bridge nativo antes de chamar.

JavaScript

async function runNativeFeature(currentUser) {
if (!window.Wrapply?.iap) return;
const result = await window.Wrapply.iap.purchase({
productId: 'premium_monthly',
consumable: false,
applicationUserName: currentUser.id
});
await fetch('/api/wrapply-event', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(result)
});
}

Hook React

import { useEffect, useState } from 'react';
export function useWrapplyBridge() {
const [ready, setReady] = useState(false);
useEffect(() => {
if (window.Wrapply?.__nativeBridgeReady) return setReady(true);
const onReady = () => setReady(true);
window.addEventListener('wrapplyNativeBridgeReady', onReady);
return () => window.removeEventListener('wrapplyNativeBridgeReady', onReady);
}, []);
return { ready, Wrapply: ready ? window.Wrapply : null };
}

Composable Vue

import { ref, onMounted } from 'vue';
export function useWrapplyBridge() {
const ready = ref(false);
onMounted(() => {
if (window.Wrapply?.__nativeBridgeReady) ready.value = true;
else window.addEventListener('wrapplyNativeBridgeReady', () => ready.value = true, { once: true });
});
return { ready };
}

Service Angular

@Injectable({ providedIn: 'root' })
export class WrapplyBridgeService {
async callNative(payload = {}) {
if (!window.Wrapply?.iap) return { ok: false, error: 'Bridge unavailable' };
return window.Wrapply.iap.getStatus(payload);
}
}

jQuery

$('#wrapply-action').on('click', async function () {
if (!window.Wrapply?.iap) return;
const result = await window.Wrapply.iap.getStatus({});
$('#wrapply-output').text(JSON.stringify(result, null, 2));
});

CMS / template backend

<button onclick="runNativeFeature(window.currentUser)">Open app feature</button>
<script>
window.addEventListener('wrapplyNativeBridgeReady', function () {
document.body.classList.add('wrapply-native-app');
});
</script>
Importante: o bridge funciona dentro da WebView do app gerado, não na versão pública do site aberta no navegador.
Quando recursos nativos estão ativos, o ZIP gerado também inclui WRAPPLY_NATIVE_BRIDGE_GUIDE.pdf com módulos ativos, chamadas exatas e notas de implementação.