Transfersmile

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

← transfersmile SDK →