从 BlueSnap 托管的支付字段轻松开始；

Posted 2023-02-22

【中文标题】从 BlueSnap 托管的支付字段轻松开始；

【英文标题】：Easy start with BlueSnap hosted payment fields;

【发布时间】：2018-03-07 14:08:09

【问题描述】：

您好——我正在寻找一个简单的脚本，我可以将其复制并粘贴到我的网站中，这样我就可以开始使用 BlueSnap 的 HPF 字段进行销售。 表单应包含取回代币并向购物者收费所需的最基本元素，我不是在寻找任何设计，只是在寻找功能。

我有基本的 - 但我需要看看如果它完成了会是什么样子：

<form id="checkoutForm">

          <div>
              <label>Full Name:</label>
              <input type="text" id="fullName">
          </div>

          <div>
              <label>Card Number:</label>
              <input type="text" id="cardNumber" data-bluesnap="ccn">
          </div>

          <div>
              <label>Security Code:</label>
              <input type="text" id="securityCode" data-bluesnap="cvv">
          </div>

          <div>
            <label>Expiration Date (MM/YYYY):</label>
              <input type="text" id="expirationDate" data-bluesnap="exp">
          </div>

          <button type="submit" id="buynowButton">Buy Now</button>

    </form>

谁能帮我解决这个问题？

【参考方案1】：

为了实现 BlueSnap 托管支付字段，您需要做的就是

plnkr simple example link

Obtain the Hosted Payment Field token for the session

Add the BlueSnap javascript file to your checkout form

<script type="text/javascript" src="BLUESNAPDOMAINPATH/services/hosted-payment-fields/v2.0/bluesnap.hpf.min.js"></script>

Add the Hosted Payment Fields to your checkout form

<div data-bluesnap="ccn"></div>

<div data-bluesnap="exp"></div>

<div data-bluesnap="cvv"></div>

Add a script to initiate the Hosted Payment Fields with your Hosted Fields token

Add a script to submit credit card, expiration date and CVV data

【讨论】：

顺便说一句，如何使 cvv 字段看起来像密码字段？我的意思是在打字时显示星号。