Para ativar com sucesso o modo incorporado, necessita de um elemento HTML na sua página que servirá como contentor do widget.
Este elemento HTML precisa do atributo ventrata-embedded-widget para ativar a funcionalidade.
Integrar o checkout Ventrata
Para ativar o modo incorporado, é necessário adicionar as tags <script> e <aside> à sua página.
A tag
<script>carrega a configuração do checkout.A tag
<aside>especifica a localização do widget e é onde adiciona oproductIDpara abrir o widget para um produto específico.
Adicionar <script> tag
Para integrar o checkout Ventrata, adicione a seguinte <script> tag às páginas HTML do seu site.
Produção
O script irá carregar a configuração da sua conta específica com o portal de produção; deste modo, todos os pagamentos e pedidos serão registrados como se fossem efetuados por clientes.
<script
src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js"
type="module"
data-config='{"apiKey":"<YOUR_API_TOKEN>", "env": "live", "embedded": true }'>
</script>
Teste
O script irá carregar a configuração da sua conta específica num ambiente de teste.
<script
src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js"
type="module"
data-config='{"apiKey":"<YOUR_API_TOKEN>", "env": "test", "embedded": true }'>
</script>
Atributo | Descrição |
| substitua |
|
📗 DICA Se o atributo "env" não for especificado na tag
|
| Permite o uso do modo incorporado.
A página requer a presença de um elemento HTML com o atributo |
Especificar a localização e o tamanho do widget
Para integrar o checkout em modo incorporado, inclua algumas linhas adicionais de código onde o widget será exibido.
Adicione o seguinte tag
<aside>ao HTML de página onde o widget incorporado será apresentado.Use o atributo
classpara especificar awidth(largura) eheight(altura).Inclua os atributos
ventrata-embedded-widgetedata-configdentro da tag<aside>.Dentro do atributo
data-config, adicione"embedded": true.Especifique o ID do produto usando
"productID" : "<product_ID>".
<aside
class="h-[50rem] w-[31.25rem]"
ventrata-embedded-widget
data-config='{"productID":"5789d12f-029c-42f3-80af-8223379d1816" }' >
</aside>
📒 NOTA
Note que os valores de altura e largura usados em class="h-[50rem] w-[31.25rem]" podem não ser adequados à sua página web. Por favor, substitua esses valores por outros que se ajustem à sua página.
📗 DICA
Pode utilizar o widget em modo incorporado e em modo pop-up em simultâneo. Para mais detalhes, leia o nosso artigo FAQ.