Customizando seu próprio botão ClickPix

Leia sobre os passos inicias de como iniciar sua integração com ClickPix

Começando com o ClickPix

Passo a passo da configuração

Adicione a tag script do nosso plugin no head da página

<script src="https://plugin.openpix.com.br/v1/openpix.js" async>

Crie uma div com as propriedades necessárias para o carregamento do seu botão clickpix e defina um id para ela, e oculte este botão utilizando CSS adicionando a propriedade display: none

Em nosso exemplo estamos utilizando o id clickpix-product-1 para este botão, que será usado exclusivamente para buscar o elemento na página Atributos obrigatórios:

data-clickpix
data-appid
data-value (valor em centavos Ex: 888 = R$ 8,88)
data-customer-fields (campos que o cliente deve preencher Ex: email,phone)
data-additional-info (informações adicionais Ex: order:123,product:my-product)

As informações adicionais devem ser separadas por virgula caso tenha mais de uma. Seguimos um padrão de chave:valor, onde antes dos : é o identificador que chamamos de chave para identificar algum dado e depois do : é o valor que você deseja atribuir a um identificador

Em nosso exemplo estou querendo identificar que esse clickpix é um pedido com id 123 e que é um produto chamado my-product

<div
  id="clickpix-product-1"
  style="display: none;"
  data-clickpix
  data-appid="YOUR_APPID"
  data-value="888"
  data-customer-fields="email,phone"
  data-additional-info="order:123,product:my-product"
></div>

Para saber se o código do plugin está sendo carregado corretamente, você pode remover a propriedade style temporariamente e ver se aparece um botão do clickpix, se aparecer é sinal que está sendo carregado

Agora você pode criar seu botão customizado e definir um id para ele

Em nosso exemplo este botão está definido com o id product-1

  <button class="my-custom-button" id="product-1">Buy here $ 8,88</button>

Crie uma tag script para colocar o script de busca e gatilho
Para alterar o script, basta você ajustar os valores do document.querySelector para os id que você definiu

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Utilizaremos a função `document.querySelector` para pegar o nosso botão customizado através do atributo id
    const myCustomButton = document.querySelector('#product-1')

    // Criamos um novo evento de click no nosso botão customizado
    myCustomButton.onclick = () => {
      // Agora, fazemos uma busca no nosso botão utilizando o id do botão do clickpix que definimos anteriormente
      // E falamos para a consulta avançar um nível na camada DOM para obter o botão de enviar do clickpix
      const clickpix = document.querySelector('#clickpix-product-1 button')
      // Emitimos um evento de click
      clickpix.click()
    }
  })
</script>

Pronto! Seguindo esses passos seu botão clickpix estará customizado e pronto para ser utilizado

info

Evite usar o atributo hidden do javascript no nosso botão clickpix para garantir que ele carregue corretamente

Resumo: use seu botão personalizado como um gatilho para o botão clickpix e oculte o botão clickpix usando CSS com display: none

Exemplos

Aqui você poderá ver um exemplo completo de como você pode fazer a integração do seu próprio botão utilizando o clickpix
Você precisará apenas criar um index.html, copiar nosso exemplo e trocar YOUR_APPID pelo seu appID de teste (caso queira testar) ou de produção

Usando único botão customizado

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Demo ClickPix</title>
    <style>
      /* Your custom css */
      .my-custom-button {
        text-transform: uppercase;
        text-decoration: none;
        padding: 15px 40px;
        display: inline-block;
        border-radius: 100px;
        background-color: #03d69d;
        border: none;
        color: #fff;
        cursor: pointer;
        font-weight: 800;
      }
    </style>

    <!-- Plugin Script -->
    <script src="https://plugin.openpix.com.br/v1/openpix.js" async></script>
  </head>
  <body>
    <div id="root">
      <!-- Your custom button -->
      <button class="my-custom-button" id="product-1">Buy here $ 8,88</button>

      <!-- ClickPix button -->
      <div
        id="clickpix-product-1"
        style="display: none;"
        data-clickpix
        data-appid="YOUR_APPID"
        data-value="888"
        data-customer-fields="email,phone"
        data-additional-info="order:123,product:my-product"
      ></div>
    </div>

    <script>
      // trigger clickpix button when custom button is clicked
      document.addEventListener('DOMContentLoaded', () => {
        // the # is important for you reference to querySelector that you get a element using a id
        const myCustomButton = document.querySelector('#product-1')

        myCustomButton.onclick = () => {
          const clickPixDivContainer = document.querySelector('#clickpix-product-1')
          const clickPixSubmitButton = clickPixDivContainer.querySelector('button')
          clickPixSubmitButton.click()
        }
      })
    </script>
  </body>
</html>

Usando múltiplos botões com clickpix

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Demo ClickPix</title>
    <style>
      /* Your custom css */
      .my-custom-button {
        text-transform: uppercase;
        text-decoration: none;
        padding: 15px 40px;
        display: inline-block;
        border-radius: 100px;
        background-color: #03d69d;
        border: none;
        color: #fff;
        cursor: pointer;
        font-weight: 800;
      }

      #root {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        height: 100vh;
      }
    </style>

    <!-- Plugin Script -->
    <script src="https://plugin.openpix.com.br/v1/openpix.js" async></script>
  </head>
  <body>
    <div id="root">
      <!-- Your wrapper for buttons -->
      <div class="clickpix-button" id="product-1">
        <!-- Your custom button -->
        <button class="my-custom-button">Buy here R$ 8,88</button>

        <!-- ClickPix button -->
        <div
          class="button-action"
          style="display: none;"
          data-clickpix
          data-appid="YOUR_APPID"
          data-value="888"
          data-customer-fields="email,phone"
          data-additional-info="order:123,product:my-product"
        ></div>
      </div>

      <!-- Your wrapper for buttons -->
      <div class="clickpix-button" id="product-2">
        <!-- Your custom button -->
        <button class="my-custom-button">Buy here R$ 18,88</button>

        <!-- ClickPix button -->
        <div
          class="button-action"
          style="display: none;"
          data-clickpix
          data-appid="YOUR_APPID"
          data-value="1888"
          data-customer-fields="email,phone"
          data-additional-info="order:123,product:my-product" 
        ></div>
      </div>

      <!-- Your wrapper for buttons -->
      <div class="clickpix-button" id="product-3">
        <!-- Your custom button -->
        <button class="my-custom-button">Buy here R$ 28,88</button>

        <!-- ClickPix button -->
        <div
          class="button-action"
          style="display: none;"
          data-clickpix
          data-appid="YOUR_APPID"
          data-value="2888"
          data-customer-fields="email,phone"
          data-additional-info="order:123,product:my-product"
        ></div>
      </div>
    </div>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        // get all clickpix buttons
        const clickpixButtons = document.querySelectorAll('.clickpix-button')

        clickpixButtons.forEach((clickpixButton) => {
          // get you custom button
          const customButton = clickpixButton.querySelector('button.my-custom-button')

          // set a trigger event in your custom button
          customButton.onclick = () => {
            // get our clickpix button container
            const clickpixDivContainer = clickpixButton.querySelector('.button-action')
            // get our clickpix submit button
            const clickpixSubmitButton = clickpixDivContainer.querySelector('button')
            // emit click event
            clickpixSubmitButton.click()
          }
        })
      })
    </script>
  </body>
</html>

Passo a passo da configuração​

Exemplos​

Usando único botão customizado​

Usando múltiplos botões com clickpix​

Passo a passo da configuração

Exemplos

Usando único botão customizado

Usando múltiplos botões com clickpix