transfersmile JavaScript

Al integrar nuestra library JS, es una forma más segura y conveniente de utilizar nuestros servicios

Agregue el file transfersmile.js en tu website

Consejos

No se recomienda almacenar en caché este js localmente

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

Crear componentes de formas específicas-transfersmile

Asegúrese de que los siguientes campos existen en el formulario existente y agregue el atributo data-checkout según el formato.

ParametroRequeridoDescripción
transfersmileCardNumberSiNúmero de tarjeta
transfersmileSecurityCodeSiCódigo de seguridad
transfersmileCardExpirationYearSiAño de expiración (4 dígitos)
transfersmileCardExpirationMonthSiMes de expiración (2 dígitos)
transfersmileCardholderNameSiNombre del titular
transfersmileDocTypenoTipo de ID del titular
transfersmileDocNumbernoNúmero ID del 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>

Agregue los siguientes dos componentes al formulario original.

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

Monitoreo de formulario de eventos de envío

Envíe Call antes del evento de envío del sitio web original: función transfersmile.createToken, pase el elemento de formulario y actualice los dos campos ocultos arriba.

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

Presente los dos parámetros de arriba y cree una orden

Consejos

El ejemplo de código se puede obtener here (click derecho -> guardar como)