transfersmile JavaScript

By integrating our JS library, it is a safer and more convenient way to use our services

Add the transfersmile.js file to your website

Tip

It is not recommended to cache this js locally

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

Create transfersmile-specific form components

Ensure that the following fields exist in the existing form, and add the data-checkout attribute according to the format.

Parameter	Required	Description
transfersmileCardNumber	yes	card number
transfersmileSecurityCode	yes	security code
transfersmileCardExpirationYear	yes	expiration year (4 digits)
transfersmileCardExpirationMonth	yes	expiration month (2 digits)
transfersmileCardholderName	yes	holder name
transfersmileDocType	no	holder id type
transfersmileDocNumber	no	holder id number

<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>

And add the following two components to the original form.

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

Monitor form submission events

Call before the original website submission event: transfersmile.createToken function, pass in the form element and update the above two hidden fields.

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

Bring the above two parameters and place an order

Tip

The example code can be obtained from here (right click -> save as)