Transfersmile ES

# 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

TIP

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.

Parametro Requerido Descripción
transfersmileCardNumber Si Número de tarjeta
transfersmileSecurityCode Si Código de seguridad
transfersmileCardExpirationYear Si Año de expiración (4 dígitos)
transfersmileCardExpirationMonth Si Mes de expiración (2 dígitos)
transfersmileCardholderName Si Nombre del titular
transfersmileDocType no Tipo de ID del titular
transfersmileDocNumber no Nú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

TIP

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

← transfersmile SDK →