Get credit card token

Using luxpag JavaScript integration Library

For API Direct Payment - Credit Card, you need to use luxpag.min.js to obtain then token and fingerprint.

Integration steps

1. Add luxpag.min.js reference to your payment page

TIP

It is not recommended to store luxpag.min.js in local cache

<script src="https://res.luxpag.com/lib/js/luxpag.min.js"></script>

2. Get APP ID and Public Key

Find the app on the "App Management" page of luxpag merchant backoffice, click "App Name" to view the details, find the app ID and public key, and give it to Luxpag.Setpublishablekey assignment. Prod: production environment, Sandbox: Test Environment

<script>
  Luxpag.setPublishableKey('${app_id}','${public_key}','sandbox | prod')
</script>

3. Create luxpag form components

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

Parameter	Required	Description
luxpagCardNumber	yes	card number
luxpagSecurityCode	yes	security code CVV
luxpagCardExpirationYear	yes	expiration year (4 digits)
luxpagCardExpirationMonth	yes	expiration month (2 digits)
luxpagCardholderName	yes	holder name
luxpagDocType	no	holder id type
luxpagDocNumber	no	holder id number

for example：

<form method="post" id="pay">
    <ul>
        <li>
            <label for="cardNumber">Credit card number:</label>
            <input type="text" data-checkout="luxpagCardNumber" maxlength="16" />
        </li>
        <li>
            <label for="securityCode">Security code(cvv):</label>
            <input type="text" data-checkout="luxpagSecurityCode" maxlength="4" />
        </li>
        <li>
            <label for="cardExpirationYear">Expiration year:</label>
            <input type="text" data-checkout="luxpagCardExpirationYear" placeholder="2021" />
        </li>
        <li>
            <label for="cardExpirationMonth">Expiration month:</label>
            <input type="text" data-checkout="luxpagCardExpirationMonth" maxlength="2" />
        </li>
        <li>
            <label for="cardholderName">Card holder name:</label>
            <input type="text" data-checkout="luxpagCardholderName"  />
        </li>
        <li>
            <label for="docType">Document type:</label>
            <select data-checkout="luxpagDocType">
	            <option value="CPF">CPF</option>
            </select>
        </li>
        <li>
            <label for="docNumber">Document number:</label>
            <input type="text" data-checkout="luxpagDocNumber" placeholder="12345678" />
        </li>
    </ul>
    <!-- 存放token值的隐藏域 -->
    <input name="token" id="luxpagToken" type="hidden">
    <!-- 存放fingerprint值的隐藏域 -->
    <input name="fingerprint" id="luxpagFingerprint" type="hidden">
    <input type="submit" value="Pay!" />
</form>

Two of these hidden fields

<!-- token -->
<input name="token" id="luxpagToken" type="hidden">
<!-- fingerprint -->
<input name="fingerprint" id="luxpagFingerprint" type="hidden">

4.Submit form for EventListener

The original submission; Luxpag.createToken becomes the form that will update both (of the above) hidden fields.

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

for example：

document.querySelector("#pay").addEventListener("submit",function(e){
        e.preventDefault() 
        var $form = document.querySelector('#pay')
        Luxpag.createToken($form, responseHandler)
    })

    function responseHandler(res){
        if(res.status != 200){
            // create token fail
            alert(res.message)
        }else{
            // create token success
            alert(res.message+" token="+document.querySelector("#luxpagToken").value
            +"; fingerprint="+document.querySelector("#luxpagFingerprint").value)
        }
    }