BrainTree.js与AngularJS和customVariables

时间:2014-10-25 12:44:54

标签: javascript angularjs braintree

我使用BrainTree.js进行PCI合规,以及我在这里使用的教程:

https://www.braintreepayments.com/docs/javascript

建议通过ID调用表单,如下所示:

var braintree = Braintree.create("YourClientSideEncryptionKey");
braintree.onSubmitEncryptForm('braintree-payment-form');

我正在使用AngularJS,其形式位于控制器内部。因此,使用ng-model将名称,卡等输入绑定到范围:

<div class="form-group">
  <label>Card Number</label>
  <input type="text" class="form-control" name="number" ng-model="card.number" />
</div>

我的问题是如何使用AngularJS和BrainTree.js以使用ng-model收集的数据的方式提交表单?

示例:

braintree.onSubmitEncryptForm({name: $scope.card.name, card: $scope.card.number});

1 个答案:

答案 0 :(得分:1)

在Braintree中,braintree.onSubmitEncryptForm函数包含少量功能。基本上它只是抓取表示输入数据的jQuery表单,转换表单字段,然后从DOM中擦除它们,然后才允许将请求提交给服务器。

由于angular包含jQuery,你可以调用braintree.encryptForm($('#braintree-payment-form'));来返回DOM中的加密数据。您应该可以访问&#39; ccv&#39;和&#39;数字&#39;像普通的输入元素(过期不需要加密)。

month=55&year=5555&number=%24bt4%7Cjavascript_1_3_10%24ne0ib
vLjzzck52xzNiY2C8grXaZgpwfVpGrsR9TbHLPaW983e3y7R6tClw8YxYe5w
MA9%2BNHLjPBb%2FEsJQBSiCARJK7Wlxu53GO6mHMr0QMglQEiy9%2B9Dla8
DkY0XBpyfomqniwsDEuudiX7l%2FIb%2FsS4BRFu1BS8MpNpYWSghdj%2FTR
28jhRxlBNZVLjlG9cJd%2FNwDIRUv80qX4Di38bjrvywZR3nP%2BsEcUDSZj
DYQb08LDtN6Vhg5%2FTt1ketZqQH83XheDAFeTuGnb6iE1n8cZbePio8%2FC
m071d2zDZiSc57m%2BEnMJERc%2F2NYrWERl32o4L6DlltB9veZH30mKsPkB
Q%3D%3D%24qpTMCwpQQ5aEk3QO60yu8dQ1SBh3ezit564s1gK604tyIHh%2F
XqipKWgPCli2ZtFW%24AUph2EeuSMh2e8CxNRGVfsIRLvegNAulBDdDY3kwl
GA%3D&cvv=%24bt4%7Cjavascript_1_3_10%24e%2FWsFiRYkHsV%2B6RD5
j26KwII3ErBklZjXB2o1SKGtg1GvemW9J5cSQNBu3K%2BAy0uymAu5awICVR
pIB7%2FiIPBkC8vHBhX57oJabKkCyqkm6YWKio5Pce%2BasD1q4RzGFT1y1Q
iqw%2Fmt12ovQz6G%2B6yZbqQ0wUtFPt4vMSnmQIBogNtgiXeHbirSDHrY9N
V7hoBIaQ%2FV4up87AXs%2FL36FKuBF1rtTyhh%2BEEDgvqkKuRfr6Sim2zc
JNEvcsi7mJp4y6F1%2BNUiLao3w8RfTKt%2BUJUU1XHz3sWLeb2A1chamnFY
UjdVyEgrRFpGH9%2BLdrNYghpmibM6xRsO9p%2Bi1a8yYOMsg%3D%3D%24sd
IGDgI6Jo3zru4YEXtvYI37Oesw09HBISdpcCh6dho%3D%24s8SaRheCM6kWV
OQQ3Ae%2FJjVQQpw6Hht0BWrVIGpV1u4%3D

然后POST到您的create_transaction方法(如果您正在从教程中运行)。