如何为新客户生成dropin UI的#Braintree客户端令牌

时间:2015-03-24 22:24:16

标签: twitter-bootstrap braintree

我已经设置了一个引导网站,并希望将dropin UI放在modal box内。

我被困在需要生成客户端令牌的部分。我尽可能地遵循指南,但我没有使用ruby或节点或任何只是一个html页面。

有什么方法可以了解我如何生成客户端令牌?我应该使用节点吗?我真的只需要一个按钮就可以了。

编辑:我已经添加了除了页面其余部分之外的所有内容。我只是在一个模态中显示它。

                        <div class="modal fade" id="myModal" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button class="close" data-dismiss="modal" type="button"><span>&times;</span>
                                        </button>

                                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                                    </div>

                                    <div class="modal-body">
                                        <form action="/checkout" id="checkout" method="post" name="checkout">
                                            <div id="dropin">
                                            </div>
                                            <input class="btn btn-primary" type="submit" value="Pay $10">
                                        </form>
                                        <script src="https://js.braintreegateway.com/v2/braintree.js">
                                            var gateway = braintree.connect({
                                                environment: braintree.Environment.Sandbox,
                                                merchantId: 'xxx',
                                                publicKey: 'xxx',
                                                privateKey: 'xxx'
                                            });

                                            gateway.clientToken.generate({}, function(err, response) {
                                                var clientToken = response.clientToken
                                            });

                                            gateway.transaction.sale({
                                                amount: '10.00',
                                                paymentMethodNonce: 'nonce-from-the-client',
                                            }, function(err, result) {});
                                        </script>
                                        <script>
                                            var
                                                braintree.setup(
                                                    "xxx",
                                                    'dropin', {
                                                        container: 'dropin'
                                                    });
                                        </script>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

1 个答案:

答案 0 :(得分:1)

披露:我为Braintree工作:)

您需要一台服务器来进行Braintree集成。如果您不想自己构建服务器端部件,可以使用为您提供后端的Braintree partners之一,例如: goodsie

<强>更新

您当前的代码混合了服务器端和客户端JS。您需要使用braintree npm模块在节点服务器上运行服务器端代码(第一个脚本标记中的所有代码),然后将clientToken打印到html模板中。然后,Drop-in可以使用服务器中的客户端令牌进行初始化 - 并发挥其魔力。