Blazer 服务器：设置 Braintree Payment Javascript 和 .NET SDK 以及 API

Question

我找不到任何使用 Blazer Server 应用程序设置 Braintree Javascript and .NET SDK 的示例。

Brainstree工作流程是在客户端收集用户信用卡数据，然后returns一个token，Braintree称之为Nonce。这样，用户的信用卡数据就不会通过或存储在您的应用程序中。您将随机数传递给服务器，然后由服务器处理付款。

我不确定如何让 javascript 与 Blazer 服务器一起工作，然后在服务器端需要做什么。

Answer 1

我能够让支付流程与 Braintree 沙箱一起工作。

示例位于：https://github.com/MSIH/Blazor-Braintree-Example/

将 Braintree javascript 库添加到 _Host.cshtml 文件

<!-- braintree-->
<script type="text/javascript" src="https://js.braintreegateway.com/web/dropin/1.29.0/js/dropin.js">
</script>

</head>

将 Braintree 函数添加到 _Host.cshtml 文件（这应该放在单独的 js 文件中）

<script>
window.brainstreePayment = (clientToken, dotNetObject) => {
    //alert(clientToken);
    var button = document.querySelector('#submit-button');
    braintree.dropin.create({
        authorization: clientToken,
        selector: '#dropin-container'
    }, function (err, instance) {
        button.addEventListener('click', function () {
            instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
                if (requestPaymentMethodErr) {
                    // No payment method is available.
                    // An appropriate error will be shown in the UI.
                    console.error(requestPaymentMethodErr);
                    return;
                }      
                dotNetObject.invokeMethodAsync('MakePayment', payload.nonce);
            });
        })
    });
}
</script>
</body>

创建Payment.razor 文件

@page "/PaymentSubmit/"

@using Braintree;
@using Microsoft.Extensions.Logging;
@inject IJSRuntime JSRuntime;
@inject ILogger<Counter> logger;


<label for="Amount">In the Amount:</label>
<input id="Amount" name="Amount" type="tel" min="1" @bind="@Amount" />
<br>
<br>

<div id="dropin-container"></div>

<div id="dropin-wrapper">
    <div id="checkout-message"></div>
    <div id="dropin-container"></div>
    <button id="submit-button">Pay</button>
</div>
<br>
PaymentTransactionId: @PaymentTransactionId
<br>

@code {

   
    public string ClientToken { get; set; }   
    public string Nonce { get; set; }   
    public string Amount { get; set; }    
    public string PaymentTransactionId { get; set; }    

    public BraintreeGateway gateway = new BraintreeGateway
    {
        Environment = Braintree.Environment.SANDBOX,
        MerchantId = "GetFromBraintree",
        PublicKey = "GetFromBraintree",
        PrivateKey = "GetFromBraintree"
    };


    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            ClientToken = gateway.ClientToken.Generate();
            var dotNetReference = DotNetObjectReference.Create(this);        
            await JSRuntime.InvokeVoidAsync("brainstreePayment", ClientToken, dotNetReference);
        }
    }

    [JSInvokable("MakePayment")]
    public void MakePayment(string Nonce)
    {

        logger.LogWarning(Nonce);
        logger.LogWarning(Amount);
        decimal newAmount = Convert.ToDecimal(Amount);
        var request = new TransactionRequest
        {
            Amount = newAmount,
            PaymentMethodNonce = Nonce,
            Options = new TransactionOptionsRequest
            {
                SubmitForSettlement = true
            }
        };

        Result<Transaction> result = gateway.Transaction.Sale(request);
        if (result.IsSuccess())
        {
            Transaction transaction = result.Target;
            logger.LogWarning("transaction success");
            PaymentTransactionId = transaction.Id;
            StateHasChanged();

            @*redirect*@
        }
        else if (result.Transaction != null)
        {
            @*redirect*@
            logger.LogWarning("transaction null");
        }
        else
        {
            string errorMessages = "";
            foreach (ValidationError error in result.Errors.DeepAll())
            {
                errorMessages += "Error: " + (int)error.Code + " - " + error.Message + "\n";
            }
            logger.LogWarning("transaction error");
            logger.LogWarning(errorMessages);
        }
    }
}

Blazer 服务器：设置 Braintree Payment Javascript 和 .NET SDK 以及 API

Blazer Server: Setup Braintree Payment Javascript and .NET SDK and API

braintree

blazor

blazor-server-side