transfersmile JavaScript

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

Adicione o arquivo transfersmile.js ao seu site

Tips

Não é recomendável armazenar estes js localmente

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

Criar componentes de formulário específicos para transfersmile

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âmetroObrigatórioDescrição
transfersmileCardNumbersimnúmero do cartão
transfersmileSecurityCodesimcódigo de segurança
transfersmileCardExpirationYearsimano de expiração (4 dígitos)
transfersmileCardExpirationMonthsimano de expiração (2 dígitos)
transfersmileCardholderNamesimnome do titular
transfersmileDocTypenãotipo de identificação do titular
transfersmileDocNumbernãonúmero de identificação do titular
<ul>
  <li>
      <label for="cardNumber">Credit card number:</label>
      <input type="text" data-checkout="transfersmileCardNumber" />
  </li>
  <li>
      <label for="securityCode">Security code:</label>
      <input type="text" data-checkout="transfersmileSecurityCode" />
  </li>
  <li>
      <label for="cardExpirationYear">Expiration year:</label>
      <input type="text" data-checkout="transfersmileCardExpirationYear" />
  </li>
  <li>
      <label for="cardExpirationMonth">Expiration month:</label>
      <input type="text" data-checkout="transfersmileCardExpirationMonth" />
  </li>
  <li>
      <label for="cardholderName">Card holder name:</label>
      <input type="text" data-checkout="transfersmileCardholderName" />
  </li>
  <li>
      <label for="docType">Document type:</label>
      <select data-checkout="transfersmileDocType">
      </select>
  </li>
  <li>
      <label for="docNumber">Document number:</label>
      <input type="text" data-checkout="transfersmileDocNumber" />
  </li>
</ul>

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

<!-- token -->
<input name="token" id="transfersmileToken" type="hidden">
<!-- fingerprint -->
<input name="fingerprint" id="transfersmileFingerprint" type="hidden">

Monitorar eventos de envio de formulários

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

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

Traga os dois parâmetros acima e crie um pedido

Tips

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