Stripe PaymentIntent Key 未定义 |无法从控制器传递 ClientSecret 密钥 | ASP.NET MVC

问题描述

我正在编写代码以在 ASP.net 框架 MVC 应用程序中付款。如果没有使用旧 API createtoken() 的 SCA 方法，代码工作正常，正在生成付款，但我需要添加 3d 安全功能，因此需要 PaymentIntent() CreatePaymentIntent。我无法传递我的 PI 密钥，它仍未定义。这是我的代码

index.cshtml

<div class="col-md-6">
            <form>
                <h1 style="color:white"> Payment Details £<span class="faretxt"></span></></h1>

                <label>
                    <h4 class="errormessage alert-danger"></h4>
                </label>
                <label>
                    <input class="field is-empty" id="faretxt" value="" type="hidden" />
                    <div id="card-element" class="field is-empty"></div>
                    <span><span>Credit or debit card</span></span>
                </label>
                <label>
                    <h4 class="errormessage alert-danger"></h4>
                </label>
                <div class="outcome">
                    <div class="error" role="alert"></div>
                    <div class="success">
                        Success! Your Stripe token is <span class="token"></span>
                    </div>
                </div>
                <button id="btnsubmit" type="button">Pay £<span class="faretxt"></span></button>
            </form>
  </div>

脚本：

<script src="https://js.stripe.com/v3/"></script>
var stripe = Stripe('######');
    var elements = stripe.elements();

    var card = elements.create('card',{
        iconStyle: 'solid',style: {
            base: {
                iconColor: '#8898AA',color: 'white',lineHeight: '36px',fontWeight: 300,fontFamily: '"Helvetica Neue",Helvetica,sans-serif',fontSize: '19px','::placeholder': {
                    color: '#8898AA',},invalid: {
                iconColor: '#e85746',color: '#e85746',}
        },classes: {
            focus: 'is-focused',empty: 'is-empty',});
    card.mount('#card-element');
    var inputs = document.querySelectorAll('input.field');
    Array.prototype.forEach.call(inputs,function (input) {

        input.addEventListener('focus',function () {
            input.classList.add('is-focused');
        });
        input.addEventListener('blur',function () {
            input.classList.remove('is-focused');
        });
        input.addEventListener('keyup',function () {
            if (input.value.length === 0) {
                input.classList.add('is-empty');
            } else {
                input.classList.remove('is-empty');
            }
        });
    });

    

    card.on('change',function (event) {
        setoutcome(event);
    });

   // document.querySelector('form').addEventListener('submit',function (e) {
    $('#btnsubmit').click(function (e) {
        //e.preventDefault();

        $(this).attr("disabled",true);

        var form = document.querySelector('form');
        var exTradetails = {
            //name: form.querySelector('input[name=cardholder-name]').value,};

        Swal.fire({
            title: 'Please Wait ..submit last code.',onBeforeopen() {
                Swal.showLoading()
            },onAfterClose() {
                Swal.hideLoading()
            },allowOutsideClick: false,allowEscapeKey: false,allowEnterKey: false,showConfirmButton: false,showCancelButton: false,});
        console.log("Working till here: ") ;

       // stripe.createtoken(card,exTradetails).then(setoutcome);
        payWithCard(stripe,card,clientSecret);


       



        var payWithCard = function (stripe,clientSecret) {
            debugger
            stripe
                .confirmCardPayment(clientSecret,{
                    payment_method: {
                        card: card
                    }
                })
                .then(function (result) {
                    if (result.error) {
                        // Show error to your customer
                        showError(result.error.message);
                    } else {
                        // The payment succeeded!
                        orderComplete(result.paymentIntent.id);
                    }
                });
        };
       });

HomeController.cs

     public ActionResult Create(string clientSecret,string amount,string jobref){
 StripeConfiguration.ApiKey = "####";
        Description = "testt"
        double amountcal = Math.Round(Convert.Todouble(amount));
     
        var services = new PaymentIntentService();
        var opt = new PaymentIntentCreateOptions
        {
            Amount = long.Parse(amountcal.ToString()) * 100,Currency = "GBP",Description = description,};
        var paymentIntent = services.Create(opt);

        //clientSecret = paymentIntent.clientSecret;
        return Json(new { clientSecret = paymentIntent.ClientSecret });

我无法获取客户端密钥。任何帮助将不胜感激。

解决方法

现在您的 javascript 代码没有尝试从后端端点获取客户端机密，这就是它未定义的原因。您需要实现以下内容：

fetch("/create-payment-intent",{
  method: "POST",headers: {
    "Content-Type": "application/json"
  },body: JSON.stringify(purchase)
})
  .then(function(result) {
    return response.json();
  })
  .then(function(data) {
    // Use data.client_secret to confirm the card payment.
  };

您可以在此处在 Stripe 的集成构建器中查看完整示例：https://stripe.com/docs/payments/integration-builder