Pagsmile JavaScript

Integrar nossa biblioteca JS é uma forma mais segura e conveniente de utilizar nossos serviços

Adicione o arquivo pagsmile.js ao seu site

Não é recomendável armazenar estes js localmente

<script src="https://res.pagsmile.com/lib/js/pagsmile.js"></script>
<script>
  Pagsmile.setPublishableKey('${app_id}','${public_key}','sandbox | prod')
</script>

Criar componentes de formulário específicos para Pagsmile

Certifique-se de que os seguintes campos existem no formulário existente e acrescente o atributo de verificação de dados de acordo com o formato.

Parâmetro	Obrigatório	Descrição
pagsmileCardNumber	sim	número do cartão
pagsmileSecurityCode	sim	código de segurança
pagsmileCardExpirationYear	sim	ano de expiração (4 dígitos)
pagsmileCardExpirationMonth	sim	mês de expiração (2 dígitos)
pagsmileCardholderName	sim	nome do titular
pagsmileDocType	não	tipo de identificação do titular
pagsmileDocNumber	não	número de identificação do titular

<ul>
    <li>
        <label for="cardNumber">Credit card number:</label>
        <input type="text" data-checkout="pagsmileCardNumber" />
    </li>
    <li>
        <label for="securityCode">Security code:</label>
        <input type="text" data-checkout="pagsmileSecurityCode" />
    </li>
    <li>
        <label for="cardExpirationYear">Expiration year:</label>
        <input type="text" data-checkout="pagsmileCardExpirationYear" />
    </li>
    <li>
        <label for="cardExpirationMonth">Expiration month:</label>
        <input type="text" data-checkout="pagsmileCardExpirationMonth" />
    </li>
    <li>
        <label for="cardholderName">Card holder name:</label>
        <input type="text" data-checkout="pagsmileCardholderName" />
    </li>
    <li>
        <label for="docType">Document type:</label>
        <select data-checkout="pagsmileDocType">
        </select>
    </li>
    <li>
        <label for="docNumber">Document number:</label>
        <input type="text" data-checkout="pagsmileDocNumber" />
    </li>
  </ul>

E acrescente os dois componentes a seguir ao formulário original.

  <!-- token -->
  <input name="token" id="pagsmileToken" type="hidden">
  <!-- fingerprint -->
  <input name="fingerprint" id="pagsmileFingerprint" type="hidden">

Monitorar eventos de envio de formulários

Chamada anterior ao evento original do site: Função Pagsmile.createToken, passe no elemento do formulário e atualize os dois campos ocultos acima.

  var $form = document.querySelector('#pay')
  Pagsmile.createToken($form, responseHandler)

Traga os dois parâmetros acima e crie um pedido

O código de exemplo pode ser obtido aqui (clique com o botão direito do mouse -> salvar como)