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

Posted 2023-03-22

【中文标题】Stripe PaymentIntent 键未定义 |无法从控制器传递 ClientSecret 密钥 | ASP.NET MVC

【英文标题】：Stripe PaymentIntent Key Undefined | Unable to pass ClientSecret key from Controller | Asp.net MVC

【发布时间】：2021-04-29 18:39:54

【问题描述】：

我正在编写代码以在 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, card, 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 );

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

【问题讨论】：

尝试替换 orderComplete(result.paymentIntent.id);通过 orderComplete(result.clientSecret);

【参考方案1】：

现在您的 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

【讨论】：

嗨 Karbi，我明白你的回答，但不是 fetch 用于 asp 核心。 MVC 控制器有什么类似的方法吗

Fetch 不限于 asp 核心，使用 asp.net MVC 应该没问题