Skip to main content
Você pode simplesmente copiar e colar nosso trecho de código para começar em poucos segundos ou usar nossa biblioteca JavaScript para integrações mais avançadas. Nosso checkout incorporado permite oferecer uma experiência de compra contínua sem redirecionar os usuários para fora do seu site.

​
Trecho de Código

O trecho de código pode ser usado em qualquer site ou CMS que permita a inserção de HTML. Primeiro, crie um Link de Checkout conforme descrito na seção anterior. O trecho de código pode ser copiado diretamente de lá clicando em Copiar Código Incorporado. O trecho tem a seguinte aparência: 
<a
  href="__CHECKOUT_LINK__"
  data-norbaas-checkout
  data-norbaas-checkout-theme="light"
>
  Purchase
</a>
<script
  src="https://cdn.jsdelivr.net/npm/@polar-sh/[email protected]/dist/embed.global.js"
  defer
  data-auto-init
></script>
Isso exibirá um link Comprar, que abrirá um checkout inline quando clicado. Você pode estilizar o elemento de gatilho da forma que preferir, desde que mantenha o atributo data-norbaas-checkout.

​
Importar Biblioteca

Se você tiver um projeto mais avançado em JavaScript, como um aplicativo React, adicionar a tag <script> pode não ser uma opção. Nesse caso, você pode instalar nossa biblioteca dedicada. 
npm install @polar-sh/checkout
Em seguida, você deve importar a classe auxiliar NorbaasEmbedCheckout e chamar manualmente NorbaasEmbedCheckout.init(). Isso adicionará os manipuladores necessários aos elementos que possuem o atributo data-norbaas-checkout. Aqui está um exemplo em React: 
import { PolarEmbedCheckout } from "@polar-sh/checkout/embed";
import { useEffect } from "react";

const PurchaseLink = () => {
  useEffect(() => {
    PolarEmbedCheckout.init();
  }, []);

  return (
    <a
      href="__CHECKOUT_LINK__"
      data-polar-checkout
      data-polar-checkout-theme="light"
    >
      Purchase
    </a>
  );
};

export default PurchaseLink;
Em vez de um Link de Checkout, você também pode usar uma URL de Sessão de Checkout criada dinamicamente a partir da API.Para isso funcionar, certifique-se de configurar corretamente o parâmetro embed_origin ao criar a Sessão de Checkout. Por exemplo, se sua página de checkout for servida na URL https://example.com/checkout, você deve definir embed_origin como https://example.com.

​
Integração Avançada

Para usuários que precisam de mais controle sobre o fluxo de checkout incorporado, a classe NorbaasEmbedCheckout oferece vários recursos avançados.

​
Criando um checkout embutido programaticamente

Em vez de usar gatilhos declarativos com atributos data-polar-checkout, você pode criar e controlar instâncias de checkout programaticamente: 
import { PolarEmbedCheckout } from "@polar-sh/checkout/embed";

// Abrir o checkout programático
const openCheckout = async () => {
  const checkoutLink = "__CHECKOUT_LINK__";
  const theme = "light"; // or 'dark'

  try {
    // Isso cria o iframe do checkout e retorna uma Promise
    // que é resolvida quando o checkout é totalmente carregado
    const checkout = await PolarEmbedCheckout.create(checkoutLink, theme);

    // Agora você pode interagir com a instância do checkout
    return checkout;
  } catch (error) {
    console.error("Failed to open checkout", error);
  }
};

// Exemplo: Acionar o checkout quando um botão for clicado
document.getElementById("buy-button").addEventListener("click", () => {
  openCheckout();
});

​
Escutando Eventos de Checkout

Você pode escutar eventos de checkout para responder às interações dos usuários: 
import { PolarEmbedCheckout } from "@polar-sh/checkout/embed";

const openCheckoutWithEvents = async () => {
  const checkout = await PolarEmbedCheckout.create("__CHECKOUT_LINK__");

  //  Escutar quando o checkout for carregado
  checkout.addEventListener("loaded", (event) => {
    console.log("Checkout loaded");
    // Chame event.preventDefault() se quiser impedir o comportamento padrão
    // event.preventDefault()
    // Nota: Isso impediria a remoção do carregador se ele ainda estiver visível
  });

  // Escutar quando o checkout for fechado
  checkout.addEventListener("close", (event) => {
    console.log("Checkout has been closed");
    // Chame event.preventDefault() se quiser impedir o comportamento padrão
    // event.preventDefault()
  });

  // Escutar quando o checkout for confirmado (processamento de pagamento)
  checkout.addEventListener("confirmed", (event) => {
    console.log("Order confirmed, processing payment");
    // Chame event.preventDefault() se quiser impedir o comportamento padrão
    // event.preventDefault()
    // Nota: Isso impediria definir o checkout como não fechável
  });

  // Escutar a conclusão bem-sucedida
  checkout.addEventListener("success", (event) => {
    console.log("Purchase successful!", event.detail);

    // Chame event.preventDefault() se quiser impedir o comportamento padrão
    // event.preventDefault()
    // Nota: Para o evento de sucesso, isso impede o redirecionamento automático se redirect for true

    // Se redirect for false, você pode exibir sua própria mensagem de sucesso
    if (!event.detail.redirect) {
      showSuccessMessage();
    }
    // Caso contrário, o usuário será redirecionado para a URL de sucesso (a menos que seja impedido)
  });

  return checkout;
};

​
Integração com React e Manipulação de Eventos

Aqui está um exemplo mais completo em React que inclui a manipulação de eventos de checkout: 
import { PolarEmbedCheckout } from "@polar-sh/checkout/embed";
import { useState, useEffect } from "react";

const CheckoutButton = () => {
  const [checkoutInstance, setCheckoutInstance] = useState(null);

  // Limpar a instância do checkout ao desmontar
  useEffect(() => {
    return () => {
      if (checkoutInstance) {
        checkoutInstance.close();
      }
    };
  }, [checkoutInstance]);

  const handleCheckout = async () => {
    try {
      const checkout = await PolarEmbedCheckout.create(
        "__CHECKOUT_LINK__",
        "light"
      );

      setCheckoutInstance(checkout);

      checkout.addEventListener("success", (event) => {
        // Rastrear compra bem-sucedida
        analytics.track("Purchase Completed", {
          productId: "your-product-id",
          // Adicionar outros dados analíticos
        });

        // Exibir mensagem de sucesso ou redirecionar
        if (!event.detail.redirect) {
          // Lidar com o sucesso no seu aplicativo
        }
      });

      checkout.addEventListener("close", (event) => {
        // Limpar nossa referência quando o checkout for fechado
        setCheckoutInstance(null);
      });
    } catch (error) {
      console.error("Failed to open checkout", error);
    }
  };

  return <button onClick={handleCheckout}>Complete Purchase</button>;
};

export default CheckoutButton;

​
Fechando o checkout programaticamente

Em alguns casos, pode ser necessário fechar o checkout programaticamente - por exemplo, se você detectar que o usuário precisa realizar uma ação em outra parte do seu aplicativo primeiro: 
import { PolarEmbedCheckout } from "@polar-sh/checkout/embed";

// Exemplo: abrir o checkout e armazenar a instância
let activeCheckout = null;

async function openCheckout() {
  const checkout = await PolarEmbedCheckout.create("__CHECKOUT_LINK__");
  activeCheckout = checkout;
  return checkout;
}

// Mais tarde, feche programaticamente quando necessário
function closeCheckout() {
  if (activeCheckout) {
    activeCheckout.close();
    // O evento 'close' será acionado automaticamente
    // Não defina activeCheckout como null aqui, isso será tratado no listener do evento
  }
}

// Adicionar um listener para atualizar nossa referência quando o checkout for fechado
function setupCheckout(checkout) {
  checkout.addEventListener("close", (event) => {
    // Redefinir nossa referência quando o checkout for fechado
    activeCheckout = null;
  });
  return checkout;
}

// Exemplo de uso
document.getElementById("open-checkout").addEventListener("click", async () => {
  const checkout = await openCheckout();
  setupCheckout(checkout);
});
document
  .getElementById("close-checkout")
  .addEventListener("click", closeCheckout);

​
Habilitando Métodos de Pagamento via Carteira (Apple Pay, Google Pay, etc.)

Por padrão, métodos de pagamento via carteira, como Apple Pay e Google Pay, não estão habilitados ao incorporar nosso formulário de checkout em seu site. Por razões de segurança, o domínio do seu site precisa ser validado manualmente. Para habilitar métodos de pagamento via carteira em seu site, por favor, envie-nos um e-mail com o slug da sua organização e o domínio que você deseja permitir. email us com o slug da sua organização e o domínio que você deseja permitir.