Checkout Embedded

O Checkout Embedded é a versão do Checkout AZPay que não é acionada por botão, mas sim carregada diretamente na página através de um container.

1. Adicionando à sua página

Para habilitar o modo embedded basta adicionar o atributo data-embedded a seu elemento:

<!-- IMPORTE NO HEAD DE SUA PÁGINA -->
<script type="text/javascript" src="https://checkout.azpay.com.br/checkout/checkout-0.1.js"></script>

<!-- ADICIONE A DIV DO CHECKOUT EMBEDDED ONDE DESEJA RENDERIZAR O CHECKOUT -->
<div
  id="<id-componente>"
  data-checkout-token="<seu-checkout-token>"
  data-azpay
  data-embedded
 ></div>

📘

Dicas para o Checkout Embedded

• Ele ocupará 100% do espaço disponível do container acima (parent). Portanto, lembre-se de ter um parent que ocupe todo o espaço disponível de onde deseja renderizar seu Checkout.
• Cuidado com o "height" disponível para o Checkout Embedded em seu site, pois alturas muito pequenas podem esconder os inputs de inserção.
• Recomendamos fortemente que na versão mobile utilize todo "width" e "height" disponíveis para renderizar o Checkout. Claro, você poderá personalizar um cabeçalho ou um rodapé, mas tente utilizar o mínimo espaço possível para isso.

1.1. Para Checkouts Dinâmicos

1. Gerando Order-Token

Antes de abrir o checkout, você precisará obter um Order-Token enviando o carrinho de compras do seu cliente. Para obter um Order-Token, basta seguir essas instruções.

2. Iniciando Checkout

Quando o modo embedded estiver em uso o callback de setOnClick não poderá ser utilizado, sendo assim o Order Token deve ser diretamente adicionado, como mostra o exemplo:

// É necessário esperar o azpayCheckout estar pronto para executar suas funcionalidades
azpayCheckout.onLoad(() => {
  // Antes de executar o comando abaixo é necessário que você tenha gerado um Order-Token
  azpayCheckout.openCheckout('<id-componente>', orderToken);
});