API ReferenceSiteBlogSuporteAPI StatusChangelogPainel

Web SDK

Suggest Edits

Siga os passos abaixo para realizar a integração do Checkout no seu website.

1. Obtenha seu Token

Você precisará de um Checkout Token para poder realizar transações em sua página. Para isso:

  1. Acesse o Painel AZPay Checkout ou Painel de Avaliação da AZPay Checkout.
  2. Caso não tenha nenhum método de pagamento, vá em "Métodos de Pagamentos" e adicione os métodos de pagamentos que desejar.
  3. A partir do momento que você possui métodos de pagamentos configurados, crie seu primeiro checkout acessando "Checkouts" no seu painel lateral.

Pronto! Agora você possui um Token. Lembre-se que cada checkout possui um Token exclusivo.

2. Adicione ao header de sua página HTML

Adicione no seu head do HTML o código Javascript do Checkout.

🚧

Modo de Testes

Para utilizar o Checkout no modo de testes atente-se para a URL de importação do Javascript abaixo.

<script type="text/javascript" src="https://checkout.azpay.com.br/checkout/checkout-0.1.js"></script>

<script type="text/javascript" src="https://evaluation.checkout.azpay.com.br/checkout/checkout-0.1.js"></script>

2.1. Para Checkouts Estáticos, com produtos fixos

Não sabe o que são checkouts estáticos? Leia Aqui

Crie uma div no local que deseja que o botão seja renderizado. Não se esqueça de colocar o seu Token dentro da propriedade "data-checkout-token":

<div
  data-azpay
  data-checkout-token="<seu-checkout-token>"
></div>

Pronto! Seu checkout estático está integrado!

2.1.1. Teste seu Checkout Estático de um jeito fácil

Basta copiar isso em um arquivo .html e abri-lo. Lembre-se de inserir seu token em data-checkout-token:

🚧

Modo de Testes

Para utilizar o Checkout no modo de testes atente-se para a URL de importação do Javascript abaixo.

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <script type="text/javascript" src="https://checkout.azpay.com.br/checkout/checkout-0.1.js"></script>
  </head>
  <body>
    <div
      data-azpay
      data-label="Comprar Agora"
      data-checkout-token="<seu-checkout-token>"
    ></div>
  </body>
</html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <script type="text/javascript" src="https://evaluation.checkout.azpay.com.br/checkout/checkout-0.1.js"></script>
  </head>
  <body>
    <div
      data-azpay
      data-label="Comprar Agora"
      data-checkout-token="<seu-checkout-token>"
    ></div>
  </body>
</html>

2.2. Para Checkouts Dinâmicos, com produtos variáveis

Não sabe o que são checkouts dinâmicos? Leia aqui!

Crie um "div" no local que deseja que o botão seja renderizado. É necessário que ele possua um Checkout-Token por meio da propriedade "data-token", além de um ID customizado, para ser utilizado para customizar o clique do botão.

<div
  id="<seu-id-botao>"
  data-azpay
  data-label="Comprar Agora"
  data-checkout-token="<seu-checkout-token>"
></div>

No seu Javascript você obterá controle do clique no botão. 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

A partir do momento que você sabe gerar um Order-Token, você poderá implementar a função abaixo no seu Javascript:

// É necessário esperar o azpayCheckout estar pronto para executar suas funcionalidades
azpayCheckout.onLoad(() => {
  azpayCheckout.setOnClick('seu-id-botao', () => {
    // Esta função é chamada quando o usuário clica no botão do checkout, não se preocupe em mostrar um loading, nós lidamos com isso pra você
    // Caso haja algum erro por aqui, você pode usar a função "closeCheckout" para interromper o loading
    // Aqui você criará uma "compra" em seu backend. Ao finalizar a criação da compra você obterá um Order-Token e precisará fazer
    azpayCheckout.openCheckout('seu-id-botao', orderToken);
  });
});

🚧

Tela de Loading/Carregamento do Checkout

No momento que o botão do Checkout é pressionado é mostrado uma tela de carregamento, ela ficará ativa até que as funções azpayCheckout.openCheckout ou azpayCheckout.closeCheckout (veja abaixo) sejam chamadas.

3. Fechando Checkout Programaticamente

No momento que o botão do Checkout é pressionado, é mostrado um carregamento até que a função "openCheckout" seja chamada. Caso esteja utilizando o momento do click para obtenção do Order-Token pode ser interessante poder fechar o Checkout caso algum erro ocorra, para isso:

// É necessário esperar o azpayCheckout estar pronto para executar suas funcionalidades
azpayCheckout.onLoad(() => {
  azpayCheckout.setOnClick('<seu-id-botao>', () => {
  exampleRequestWithError
    .then(() => {
      // Em caso de sucesso, abrir o Checkout
      azpayCheckout.openCheckout('<seu-id-botao>', orderToken);
    }).catch(() => {
      // Em caso de erro, fechar o checkout e interromper estado de loading
      azpayCheckout.closeCheckout('<seu-id-botao>');
    })
  });
});

Updated about 5 years ago