asp.net-core - Blazor WebAssembly 贝宝

Question

我正在尝试实现与我的应用程序的贝宝连接。到目前为止，我已经尝试在我的客户端项目中向 index.html 添加一个 javascript 脚本：

<script src="https://www.paypal.com/sdk/js?client-id=MY-CLIENT-CODE"></script>
<script>
    function initPayPalButton() {
        var shipping = 0;
        var itemOptions = 3;/*document.querySelector("#smart-button-container #item-options");*/
        var quantity = parseInt();
        var quantitySelect = 1;/*document.querySelector("#smart-button-container #quantitySelect");*/
        if (!isNaN(quantity)) {
            quantitySelect.style.visibility = "visible";
        }
        var orderDescription = 'Fund';
        if (orderDescription === '') {
            orderDescription = 'Item';
        }
        paypal.Buttons({
            style: {
                shape: 'rect',
                color: 'blue',
                layout: 'vertical',
                label: 'paypal',

            },
            createOrder: function (data, actions) {
                var selectedItemDescription = itemOptions.options[itemOptions.selectedIndex].value;
                var selectedItemPrice = parseFloat(itemOptions.options[itemOptions.selectedIndex].getAttribute("price"));
                var tax = (0 === 0) ? 0 : (selectedItemPrice * (parseFloat(0) / 100));
                if (quantitySelect.options.length > 0) {
                    quantity = parseInt(quantitySelect.options[quantitySelect.selectedIndex].value);
                } else {
                    quantity = 1;
                }

                tax *= quantity;
                tax = Math.round(tax * 100) / 100;
                var priceTotal = quantity * selectedItemPrice + parseFloat(shipping) + tax;
                priceTotal = Math.round(priceTotal * 100) / 100;
                var itemTotalValue = Math.round((selectedItemPrice * quantity) * 100) / 100;

                return actions.order.create({
                    purchase_units: [{
                        description: orderDescription,
                        amount: {
                            currency_code: 'USD',
                            value: priceTotal,
                            breakdown: {
                                item_total: {
                                    currency_code: 'USD',
                                    value: itemTotalValue,
                                },
                                shipping: {
                                    currency_code: 'USD',
                                    value: shipping,
                                },
                                tax_total: {
                                    currency_code: 'USD',
                                    value: tax,
                                }
                            }
                        },
                        items: [{
                            name: selectedItemDescription,
                            unit_amount: {
                                currency_code: 'USD',
                                value: selectedItemPrice,
                            },
                            quantity: quantity
                        }]
                    }]
                });
            },
            onApprove: function (data, actions) {
                return actions.order.capture().then(function (details) {
                    alert('Transaction completed by ' + details.payer.name.given_name + '!');
                    /*dotNetHelper.invokeMethodAsync('OnApprove', data, details);*/
                });
            },
            onError: function (err) {
                console.log(err);
            },
        }).render('#paypal-button-container');
    }
</script>

并尝试在我的剃须刀页面中获取此信息

@inject IJSRuntime JSRuntime
<div id="paypal-button-container"></div>
@code
protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("initPayPalButton");
            StateHasChanged();
        }
    }

但是当我运行应用程序时出现错误：

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 未处理的异常呈现组件：找不到“initPayPalButton”（“initPayPalButton”未定义）。错误：找不到“initPayPalButton”（“initPayPalButton”未定义）。

我哪里错了？

标签： asp.net-corepaypalblazor