Question

我正在尝试使用Braintree的付款DropinUI，并且对其进行配置需要发送生成的令牌到我页面中的javascript函数。我的剃刀页面上有以下标记：

<div id="dropin-container"></div>
<button id="submit-button">Request payment method</button>
<script>
    function configureBraintreeClient(clientToken) {
        var button = document.querySelector('#submit-button');

        braintree.dropin.create({
            authorization: clientToken,
            container: '#dropin-container'
        }, function (createErr, instance) {
            button.addEventListener('click', function () {
                instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
                    // Submit payload.nonce to your server
                });
        });
    });
}
</script>

div＃dropin-container由configureBraintreeClient函数的结果填充。因此，我需要在页面加载时传递一个clientToken。

我的用于生成客户令牌的页面模型：

public class IndexModel : PageModel
    {
        private readonly IJSRuntime _jsRuntime;

        public IndexModel(IJSRuntime jsRuntime)
        {
            _jsRuntime = jsRuntime;
        }

        public IActionResult OnGet()
        {
            // Create gateway
            var gateway = new BraintreeGateway
            {
                Environment = Environment.SANDBOX,
                MerchantId = "xxxxxxx",
                PublicKey = "xxxxxxx",
                PrivateKey = "xxxxxxx"
            };

            var clientToken = gateway.ClientToken.Generate();

            JSRuntimeExtensions.InvokeVoidAsync(_jsRuntime, "configureBraintreeClient", clientToken);

            // Not sure if this is needed, doesn't work with return type of 
            // void and this line removed either.
            Page();
        }
    }

这不起作用。 div永远不会填充。

我可以将客户令牌直接插入标记中，并且运行效果完美，因此它与传递客户令牌有关从页面模型到页面。我不应该使用JSRuntime扩展吗？

我尝试将客户端令牌设置为模型属性，并使用authorization: @Model.ClientToken之类的剃刀语法将其插入到函数中但这不起作用。

我试图深入研究以更好地了解页面生命周期，但是发现的任何内容都无法帮助我解决此问题。

在浏览器或Visual Studio的开发人员控制台中没有看到任何错误，但是我对调试ASP .NET Core中的javascript并不太了解。

将参数传递到像这样更新div的javascript函数中的正确方法是什么？

Answer 1

因为我们没有merchant ID，Public key和Private key，请确保您已生成正确的令牌，然后可以尝试以下操作：

1.IndexModel（）：

private readonly IJSRuntime _jsRuntime;

public IndexModel(IJSRuntime jsRuntime)
{
    _jsRuntime = jsRuntime;
}

[BindProperty]
public string clientToken { get; set; }

public void OnGet()
{
    // Create gateway
    var gateway = new BraintreeGateway
    {
        Environment = Braintree.Environment.SANDBOX,
        MerchantId = "xxxxxxx",
        PublicKey = "xxxxxxx",
        PrivateKey = "xxxxxxx"
    };

    clientToken = gateway.ClientToken.Generate();

    JSRuntimeExtensions.InvokeVoidAsync(_jsRuntime, "configureBraintreeClient", clientToken);
}

2.Razor Page（无需使用功能）：

<div id="dropin-container"></div>
<button id="submit-button">Request payment method</button>

<script src="https://js.braintreegateway.com/web/dropin/1.20.4/js/dropin.min.js">
</script>
    <script>
            var button = document.querySelector('#submit-button');
            braintree.dropin.create({
                authorization: '@Model.clientToken',
                container: '#dropin-container'
            }, function (createErr, instance) {
                button.addEventListener('click', function () {
                    instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
                        // Submit payload.nonce to your server
                    });
            });
        });
    </script>

3.Test（您可以看到令牌已填充到js中）：参考：

https://developers.braintreepayments.com/start/hello-client/javascript/v3

我可以将客户令牌直接插入到标记中，并且它可以完美运行，因此它与将客户令牌从页面模型传递到页面有关。我应该不使用JSRuntime扩展吗？

为此，如果要使用客户端令牌，建议您参考： https://developers.braintreepayments.com/start/tutorial-drop-in-node

要进行授权，您也可以使用tokenization key。

如何将参数传递给将div从页面模型填充到其Razor页面的javascript函数？

1 个答案: