获取信用卡Token

使用Luxpag JavaScript集成库

采用直连接口下单，信用卡支付，需要使用 luxpag.min.js 库，以便获取直连接口 token 和 fingerprint 参数。

集成步骤

1. 添加 luxpag.min.js 引用到您的支付页面

TIP

不建议将此luxpag.min.js本地缓存

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

2. 获取 APP ID 和 Public Key

在Luxpag商户后台APP List管理页面找到APP，点击查看详情，找到APP ID 和 Public Key，给Luxpag.setPublishableKey赋值。 prod：生产环境，sandbox：测试环境

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

3. 创建 luxpag专用表单组件

保证现有表单中存在如下字段，并按格式添加data-checkout属性。

参数名	必须	描述
luxpagCardNumber	yes	信用卡卡号
luxpagSecurityCode	yes	安全码CVV
luxpagCardExpirationYear	yes	过期年（四位）
luxpagCardExpirationMonth	yes	过期月（两位）
luxpagCardholderName	yes	持卡人姓名
luxpagDocType	no	持卡人ID类型
luxpagDocNumber	no	持卡人ID

例如：

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

其中两个隐藏域

<!-- 存放token值的隐藏域 -->
<input name="token" id="luxpagToken" type="hidden">
<!-- 存放fingerprint值的隐藏域 -->
<input name="fingerprint" id="luxpagFingerprint" type="hidden">

4.监听form提交事件

网站原有提交事件前调用：Luxpag.createToken函数，传入form表单元素并更新上面两个隐藏域。

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

例如：

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