Braintree-javascript - 收集额外的客户信息？

Question

问题is:What收集客户信息并将其存储在保险库中的正确方法是什么？

我想在填写并提交插入式 ui 表格后将客户的账单信息存储在 Braintree 的保险库中，以便创建定期的未来交易。未来交易将收取 irregular/varied 金额。

目前我配置的插件 ui 只有一个 paypal 按钮和 cc # 和到期日期的输入字段。这就是我目前拥有的 drop-in ui:

根据 docs，Braintree drop-in ui 只允许收集：cc#、exp date、postal code/cvv、paypal acc 和 venmo acc。

我正在考虑创建一个表单并使用 jquery 从输入字段中收集并将其提供给 Braintree 的 transaction API, but not sure this is PCI/SAQ-A compliant. I also found that I can store a new customer in the vault upon a successful transaction。

代码如下所示：

<div class="container-fluid">
<div class="container">
  <form class="form-horizontal" role="form" id="checkout" method="post" action="/checkout">

    <!-- billing information -->
    <div class="container" style="width: 50%">
      <div class="form-group">
        <label class="control-label col-xs-3" for="Full Name">Full Name:</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" id="fullname" placeholder="Full Name">
          </div>
        <br>
          <label class="control-label col-xs-3" for="Address">Address:</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" id="Address" placeholder="Address">
          </div>
        <br>
        zip | city
        <br>
        country
      </div>
    </div>
      <hr>
      <!-- braintree drop-in ui form-->
      <div class="text-center" id="payment-form"></div>

      <!-- TOS -->
      <div class="container">
        <h4>TOS Place holder</h4>
        This will be where the TOS goes. It's a pretty good space is it not?
        <br>
        <h4>TOS Place holder</h4>
        This will be where the TOS goes. It's a pretty good space is it not?
        <br>
        <h4>TOS Place holder</h4>
        This will be where the TOS goes. It's a pretty good space is it not?
      </div>
      <hr>
      <div class="text-center">
        <input type="submit" value="Submit Payment" class="btn btn-primary btn-lg">
      </div>
    </form>
  </div>
</div>
<!-- braintree sdk -->
<script src="https://js.braintreegateway.com/v2/braintree.js"></script>

<!-- braintree setup -->
<script>

/*
* Uncomment when no longer in sandbox
*/
//Get client token
// $.get( "/client_token", function(clientToken) {
//   braintree.setup(clientToken, 'dropin', {
//     container: 'payment-form'
//   });
// });


var clientToken = *removed*;
braintree.setup(
    // Replace this with a client token from your server
    clientToken,
    "dropin", {
      container: "payment-form",
      form: "checkout",
    });
</script>

非常感谢任何帮助！感谢您花时间阅读。

Answer 1

^{完全披露：我在 Braintree 工作。如果您有任何其他问题，请随时contact support.}

Braintree Drop-in UI 负责收集 PCI 和其他敏感支付信息。您提到的方法，以表格形式收集账单信息，然后通过 API 从您的服务器（使用 transaction.sale or paymentMethod.create）将账单信息提交给 Braintree，是填充此信息的正确方法。这种方法完全符合 PCI。

此外，在您的示例中不需要将 form 属性传递给 braintree.setup，因为您的 payment-form div 在您的 checkout 表单中。

Braintree-javascript - 收集额外的客户信息？

Braintree-javascript - collect additional customer information?

javascript

jquery

transactions

paypal

braintree