Pagsmile JavaScript

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

Agregue el file pagsmile.js en tu website

No se recomienda almacenar en caché este js localmente

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

Crear componentes de formas específicas-Pagsmile

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
pagsmileCardNumber	si	Número de tarjeta
pagsmileSecurityCode	si	Código de seguridad
pagsmileCardExpirationYear	si	Año de expiración (4 dígitos)
pagsmileCardExpirationMonth	si	Mes de expiración (2 dígitos)
pagsmileCardholderName	si	Nombre del titular
pagsmileDocType	no	Tipo de ID del titular
pagsmileDocNumber	no	Número ID del 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>

Agregue los siguientes dos componentes al formulario original.

  <!-- token -->
  <input name="token" id="pagsmileToken" type="hidden">
  <!-- fingerprint -->
  <input name="fingerprint" id="pagsmileFingerprint" 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 Pagsmile.createToken, pase el elemento de formulario y actualice los dos campos ocultos arriba.

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

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

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