Javascript Symfony 4-设置Braintree下载表单

正在尝试在我的Symfony 4应用程序中设置Braintree插件UI。 (, )

我创建了一个服务：

namespace App\Services;

use Braintree\ClientToken;
use Braintree\Configuration;

class Braintree

{
    // environment variables:
    const ENVIRONMENT = 'BRAINTREE_ENVIRONMENT';
    const MERCHANT_ID = 'BRAINTREE_MERCHANT_ID';
    const PUBLIC_KEY = 'BRAINTREE_PUBLIC_KEY';
    const PRIVATE_KEY = 'BRAINTREE_PRIVATE_KEY';
    function __construct() {
        Configuration::environment(getenv(self::ENVIRONMENT));
        Configuration::merchantId(getenv(self::MERCHANT_ID));
        Configuration::publicKey(getenv(self::PUBLIC_KEY));
        Configuration::privateKey(getenv(self::PRIVATE_KEY));
    }
    //
    public function generateNonce() {
        return ClientToken::generate();
    }
}

我在我的小树枝模板中添加了一个表单和一些javascript：

{% block body %}
    {{ parent() }}

    <div class="container">
        <div class="card">
            <div class="row">
                <div class="col-12">
                    <h3>Booking New</h3>

                    <div id="datepicker"></div>

                    {{ form_start(bookingForm) }}
                        {{ form_widget(bookingForm) }}

                        <button type="submit" class="btn btn-primary">Create</button>
                    {{ form_end(bookingForm) }}

                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <form method="post" id="payment-form">
                        <section>
                            <label for="amount">
                                <span class="input-label">Amount</span>
                                <div class="input-wrapper amount-wrapper">
                                    <input id="amount" name="amount" type="tel" min="1" placeholder="Amount" value="10">
                                </div>
                            </label>

                            <div class="bt-drop-in-wrapper">
                                <div id="bt-dropin"></div>
                            </div>
                        </section>

                        <input id="nonce" name="payment_method_nonce" type="hidden" />
                        <button class="button" type="submit"><span>Test Transaction</span></button>
                    </form>
                    <button id="submit-button">Request payment method</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://js.braintreegateway.com/web/dropin/1.14.1/js/dropin.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      var form = document.querySelector('#payment-form');
      var client_token = "<?php echo($gateway->ClientToken()->generate()); ?>";
      braintree.dropin.create({
        authorization: client_token,
        selector: '#bt-dropin',
        paypal: {
          flow: 'vault'
        }
      }, function (createErr, instance) {
        if (createErr) {
          console.log('Create Error', createErr);
          return;
        }
        form.addEventListener('submit', function (event) {
          event.preventDefault();
          instance.requestPaymentMethod(function (err, payload) {
            if (err) {
              console.log('Request Payment Method Error', err);
              return;
            }
            // Add the nonce to the form and submit
            document.querySelector('#nonce').value = payload.nonce;
            form.submit();
          });
        });
      });
    </script>
    <script>
      $( function() {
        $( "#datepicker" ).datepicker();
      } );
    </script>
{% endblock %}

---

从您的控制台错误，我可以推断这行是错误的：

var-client_-token=”“

您不应该在javascript中使用php块，而应该向后端发出AJAX请求，该请求将返回客户端令牌，然后您可以在表单中使用该令牌

考虑这个例子：

// Set up our HTTP request
var xhr = new XMLHttpRequest();

// Setup our listener to process completed requests
xhr.onload = function () {

    // Process our return data
    if (xhr.status >= 200 && xhr.status < 300) {
        var client_token = xhr.response.client_token; // Set your client token and use it later
    } else {
        // What do when the request fails
        console.log('The request failed!');
    }

    // Code that should run regardless of the request status
    console.log('This always runs...');
};

// Create and send a GET request
// The first argument is the post type (GET, POST, PUT, DELETE, etc.)
// The second argument is the endpoint URL
xhr.open('GET', '/route/to/braintree/controller'); // Create a Symfony route which will use `BraintreeService` and return generated client token.
xhr.send();

//设置我们的HTTP请求
var xhr=new XMLHttpRequest（）；
//设置侦听器以处理已完成的请求
xhr.onload=函数（）{
//处理我们的返回数据
如果（xhr.status>=200&&xhr.status<300）{
var client_-token=xhr.response.client_-token；//设置客户端令牌，稍后使用
}否则{
//当请求失败时该怎么办
log（'请求失败！'）；
}
//无论请求状态如何，都应运行的代码
log（'这总是运行…'）；
};
//创建并发送GET请求
//第一个参数是post类型（GET、post、PUT、DELETE等）
//第二个参数是端点URL
xhr.open（'GET'，'/route/to/braintree/controller'）；//创建一个Symfony路由，该路由将使用“BraintreeService”并返回生成的客户端令牌。
xhr.send（）；

这更像是一个伪代码，但它应该让您大致了解应该做什么。从您的代码中，看起来您应该首先获取该client_令牌，然后呈现表单

如果这不是问题所在，请继续查看控制台错误，这肯定是您无法呈现表单的原因。也许可以再次访问Braintree文档，它们有优秀的框架和框架无关示例。
当您尝试呈现表单时，javascript控制台中是否有任何内容？是的，我已将控制台中的错误添加到OP中。谢谢。因此，我应该在用户的ProfileController中创建一个路由（比如profile/braintree/generate_token），并将它传递给我的braintree服务，我是通过在action方法中键入暗示来创建的？然后使用js代码从该路由获取客户端令牌？听起来还好吗？是的，差不多。总体思路是正确的，如何实施完全取决于您。
// Set up our HTTP request
var xhr = new XMLHttpRequest();

// Setup our listener to process completed requests
xhr.onload = function () {

    // Process our return data
    if (xhr.status >= 200 && xhr.status < 300) {
        var client_token = xhr.response.client_token; // Set your client token and use it later
    } else {
        // What do when the request fails
        console.log('The request failed!');
    }

    // Code that should run regardless of the request status
    console.log('This always runs...');
};

// Create and send a GET request
// The first argument is the post type (GET, POST, PUT, DELETE, etc.)
// The second argument is the endpoint URL
xhr.open('GET', '/route/to/braintree/controller'); // Create a Symfony route which will use `BraintreeService` and return generated client token.
xhr.send();