跳转至

快速开始

介绍

本指南将引导您使用Liquido的Element控件创建支付表单. card元素通过插入一个灵活的输入框来简化表单, 并最大限度地减少所需的字段数量, 该字段可以安全地收集所有必要的卡片详细信息. 您可以使用Elements（我们预先构建的UI组件）创建一个支付表单, 该表单可以安全地收集客户的卡信息, 而无需处理敏感的信用卡数据。然后, 信用卡的详细信息将转换为card token，您可以将card token安全地将其发送到服务器, 而不用担心卡信息泄露.

使用Elements创建自定义付款表单需要四个步骤:

  1. 引入element.js的依赖.
  2. 创建您的支付表单.
  3. 调用api创建一个card token.
  4. 将token和其余信息提交到服务器.

在开始之前: 需要HTTPS

所有使用Elements提交的支付信息都是通过安全的HTTPS连接进行的. 然而, 为了保护自己免受某些形式的中间人攻击, 并防止您的客户在现代浏览器中看到混合内容警告, 您还必须通过HTTPS保护支付表单的页面.

使用 Elements

  • Step 1: 引入element.js的依赖

    Elements通过elements.js使用. 开始时, 在您的页面加入下面的脚本引用https://js.liquido.com/element.js. 如果是测试环境, 您可以使用https://js.dev.liquido.com/element.js.

    <script src="https://js.liquido.com/element.js"></script>

    下一步, 创建一个Elements实例: 

    const liquidoInstance = liquido('your_api_key')
const elements = elements = liquidoInstance.elements({
    locale: 'en',
    country: 'BR'
})

    更多element.js的使用, 请查看element参考.

  • Step 2: 创建您的支付表单. 为了安全地从客户那里收集卡的详细信息, Elements为您创建了由Liquido托管的UI组件. 然后将它们放入您的付款表单中，而不是您直接创建它们. 要确定将这些组件插入何处，请在支付表单中创建具有唯一ID的空DOM元素(容器). 例如:

    <form action="/save_card" method="post" id="payment-form">
    <div class="form-item">
        <label>Credit Card</label>
        <div id="card-element">
            <!-- A Liquido Element will be inserted here. -->
        </div>

        <!-- Used to display Element errors. -->
        <div id="card-errors" role="alert"></div>
    </div>
    <div class="form-item">
        <label>Card holder name</label>
        <input id="card-holder" type="text" name="cc-name" placeholder="Card holder name" />
    </div>
    <button>Pay</button>
</form>

    加载了上面的表单后，创建一个Element实例，并将其装载到上面创建的Element容器中:

    // 在创建一个element实例时，可以将自定义样式传递给options.
const style = {
base: {
    fontSize: '16px',
    lineHeight: '30px'
}
};

// 创建一个card Element实例.
const card = elements.create('card', { style });

// 挂载一个card Element实例到`card-element` <div>.
card.mount(document.getElementById('card-element'))

    element在输入时验证用户输入. 为了帮助您的客户发现错误，您应该监听card元素上的change事件并显示任何错误:

    card.addEventListener('change', (event) => {
const displayError = document.getElementById('card-errors');
displayError.textContent = event.error
    ? event.error.message
    : ''
})

    设置法律政策: 对于集成Elements, 当客户完成结账时, 您需要链接到Liquido隐私政策，以获得有关法律条款的协议. 您可以使用以下示例添加它： [商户名称] is powered by Liquido. 因此, 您现在正在向Liquido提供您的个人数据. 欲了解更多信息，请访问Liquido隐私政策。

  • Step 3: 创建 card token 以安全地传输卡信息 可以将Elements收集的付款详细信息转换为card token. 创建一个事件处理程序来处理表单上提交的事件. 该处理程序将敏感信息发送给Liquido进行标记化, 并阻止表单提交(下一步将通过JavaScript提交表单).

    // 提交表单时创建card token或显示错误.
const form = document.getElementById('payment-form')
form.addEventListener('submit', (event) => {
event.preventDefault()
const name = document.getElementById('card-holder').value
liquido.createToken(card, {
    name
}).then((result) => {
    // 发送card token到您的服务器
    handleToken(result.data.cardId)
}).catch((result) => {
    if (result.error) {
    // 告知消费者发生了错误
    const errorEl = document.getElementById('card-errors')
    errorEl.textContent = result.error.message
    }
})
})

  • Step 4: 将card token和表单的其余部分提交到服务器 最后一步是将 card token 以及已收集的任何其他信息提交到服务器.

    const handleToken = (token) => {
// 将令牌ID插入表单，以便将其提交到服务器
const tokenInputEl = document.createElement('input')
tokenInput.setAttribute('type', 'hidden')
tokenInput.setAttribute('name', 'cardToken')
tokenInput.setAttribute('value', token)
form.appendChild(tokenInput)

// Submit the form
form.submit()
}
回到页面顶部