Pagsmile
Search
K
Links

Pagsmile JavaScript

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

Add the pagsmile.js file to your website

It is not recommended to cache this js locally
<script src="https://res.pagsmile.com/lib/js/pagsmile.js"></script>
<script>
Pagsmile.setPublishableKey('${app_id}','${public_key}','sandbox | prod')
</script>

Create Pagsmile-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
pagsmileCardNumber
yes
card number
pagsmileSecurityCode
yes
security code
pagsmileCardExpirationYear
yes
expiration year (4 digits)
pagsmileCardExpirationMonth
yes
expiration month (2 digits)
pagsmileCardholderName
yes
holder name
pagsmileDocType
no
holder id type
pagsmileDocNumber
no
holder id number
<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>
And add the following two components to the original form.
<!-- token -->
<input name="token" id="pagsmileToken" type="hidden">
<!-- fingerprint -->
<input name="fingerprint" id="pagsmileFingerprint" type="hidden">

Monitor form submission events

Call before the original website submission event: Pagsmile.createToken function, pass in the form element and update the above two hidden fields.
var $form = document.querySelector('#pay')
Pagsmile.createToken($form, responseHandler)

Bring the above two parameters and place an order

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