JSFiddle - React, Tailwind, and code Playground

by thvinic

HTML

<button id="pay-button">Abrir modal de pagamento</button>

CSS

#form-checkout {
    display: flex;
    flex-direction: column;
    max-width: 600px;
  }

  .container {
    height: 18px;
    display: inline-block;
    border: 1px solid rgb(118, 118, 118);
    border-radius: 2px;
    padding: 1px 2px;
  }

JavaScript

var button = document.querySelector('button');
      
      // Abrir o modal ao clicar no botão
      button.addEventListener('click', function() {     
            
        // inicia a instância do checkout
        var checkout = new PagarMeCheckout.Checkout({
          encryption_key: 'SUA ENCRYPTION KEY',
          success: function(data) {
            console.log(data);
          },
          error: function(err) {
            console.log(err);
          },
          close: function() {
            console.log('The modal has been closed.');
          }
        });             

        checkout.open({
          amount: 10000,
          customerData: 'true',
          createToken: 'true',
                items: [{
            id: '1',
            title: ‘ebook’,
            unit_price: 1500,
            quantity: 1,
            tangible: 'false'
          }]
        })
      });
      
      var button = document.querySelector('button');
 
  // Abrir o checkout ao clicar no botão
  button.addEventListener('click', function() {     

    // inicia a instância do checkout
    var checkout = new PagarMeCheckout.Checkout({
      encryption_key: 'SUA ENCRYPTION KEY',
      success: function(data) {
        console.log(data);
      },
      error: function(err) {
        console.log(err);
      },
      close: function() {
        console.log('The modal has been closed.');
      }
    });             
  });
  checkout.open({
  amount: 1500,
  customerData: 'true',
  createToken: 'true',
  items: [{
        id: '1',
        title: ‘ebook’,
        unit_price: 1500,
        quantity: 1,
        tangible: 'false'
  }]
})