Веб-сборка Blazor Paypal

#asp.net-core #paypal #blazor

Вопрос:

Я пытаюсь реализовать подключение PayPal к своему приложению. До сих пор я пытался добавить скрипт javascript в index.html в моем клиентском проекте:

 <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();
        }
    }
 

Но когда я запускаю приложение, возникает ошибка:

Майкрософт.AspNetCore.Компоненты.Веб-сборка.Визуализация.WebAssemblyRenderer[100] Компонент рендеринга необработанных исключений: Не удалось найти «initPayPalButton» («initPayPalButton» не определен). Ошибка: Не удалось найти «initPayPalButton» («initPayPalButton» не определен).

Где я ошибаюсь?

Комментарии:

1. Работает ли это с await JSRuntime.InvokeVoidAsync("alert","alert string here"); ? initPayPalButton() Работает ли из консоли инструментов разработки браузера ?

2. Теперь я получаю сообщение об ошибке No ack для postMessage zoid_delegate_paypal_checkout в sandbox.paypal.com в 10000мс