Braintree-javascript - 收集其他客户信息?

时间:2015-12-04 10:01:37

标签: javascript jquery paypal transactions braintree

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

我希望在填写并提交插入式ui表单时,将客户的结算信息存储在Braintree的保险库中,以便创建定期的未来交易。未来的交易将收取不规则/不同的金额。

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

Drop-in ui I have configured

根据docs,Braintree drop-in ui仅允许收集:cc#,exp日期,邮政编码/ cvv,paypal acc和venmo acc。

我正在考虑创建表单并使用jquery从输入字段中收集并将其提供给Braintree的transaction API,但不确定这是否符合PCI / SAQ-A。我还发现我可以store a new customer in the vault upon a successful transaction

Work in progress form

代码如下所示:

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

非常感谢任何帮助!感谢您抽出宝贵时间阅读。

1 个答案:

答案 0 :(得分:2)

完全披露:我在Braintree工作。如果您还有其他问题,请随时contact support

Braintree Drop-in UI负责收集PCI和其他敏感支付信息。您提到的方法,在表单中收集结算信息,然后通过API从您的服务器(使用transaction.salepaymentMethod.create)向Braintree提交结算信息,这是填充此信息的正确方法。这种方法完全符合PCI标准。

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