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

Question

我已经设置了一个 bootstrap 站点并想将 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 ">
                                        </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>

Answer 1

披露：我在 Braintree 工作 :)

您需要一个服务器来集成 Braintree。如果您不想自己构建服务器端部分，您可以使用 Braintree 的 partners that provide a backend for you e.g. goodsie.

更新

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