如何將參數傳遞給 javascript function 將 div 從頁面 model 填充到其 ZE405C1DF83BD279AED06?

Question

我正在嘗試使用 Braintree 的支付 DropinUI，並且配置它需要在我的頁面中將生成的令牌發送到 javascript function。 我的 Razor 頁面中有以下標記：

<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 由 function configureBraintreeClient 的結果填充。 所以，我需要在頁面加載時傳入一個 clientToken。

我的頁面 model 生成客戶端令牌：

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 永遠不會被填充。

我可以將客戶端令牌直接插入標記中並且它運行完美，因此它與將客戶端令牌從頁面 model 傳遞到頁面有關。 我不應該使用 JSRuntime 擴展嗎？

我嘗試將客戶端令牌設置為 model 屬性並將其插入 function 中，使用 razor 語法像authorization: @Model.ClientToken但它不起作用。

我試圖四處挖掘以更好地了解頁面生命周期，但我發現沒有任何東西可以幫助我解決這個問題。

我在瀏覽器的開發人員控制台或 Visual Studio 中看不到任何錯誤，但我對在 ASP .NET Core 中調試 javascript 知之甚少。

將參數傳遞到像這樣更新 div 的 javascript function 的正確方法是什么？

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頁面（無需使用功能）：

<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（可以看到token已經填充到js中了）： 參考：

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

我可以將客戶端令牌直接插入標記中並且它運行完美，因此它與將客戶端令牌從頁面 model 傳遞到頁面有關。 我不應該使用 JSRuntime 擴展嗎？

為此，如果您想使用客戶端令牌，我建議您可以參考： https://developers.braintreepayments.com/start/tutorial-drop-in-node

對於授權，您還可以使用令牌化密鑰。

Answer 2

authorization: '@Model.ClientToken'試試這個