跳转至

快速开始

介绍

本指南将引导您使用 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-1.2.0.js。如果是测试环境，您可以使用 https://js.dev.liquido.com/element-1.2.0.js。

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

    下一步，创建一个 Elements 实例：

    const liquidoInstance = liquido('your_api_key');
const 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) {
            // 告知消费者发生了错误
            document.getElementById('card-errors').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();
}
回到页面顶部