如何将Stripe付款网关集成到ASP.NET MVC [英] How to integrate Stripe payment gateway to ASP.NET MVC
问题描述
我想将条纹psp 集成到我的ASP.NET MVC应用程序中.
I want to integrate Stripe psp into my ASP.NET MVC application.
在您问我同样的问题之前，我确实在寻找所说的问题，但是它们似乎已经过时了.
Before you roast me with looking for questions with same issues, I did look for the said questions but they seem to be outdated.
我试图按照Stripe网站上的步骤进行操作，但是javascript无法加载付款.我知道我想念一些东西.
I tried to follow the procedures from stripe website, but the javascript couldn't load the payment. I know I'm missing something.
如果您能帮助我而不是烤我，那将是很棒的:).
p.s 我对MVC完全陌生:/
If you could help me rather than roast me it would be great :).
p.s I'm totally new to MVC :/
带有脚本的cshtml视图
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ProcessPayment | Merchant Dashboard</title>
<script src="https://js.stripe.com/v3/"></script>
<script>
var stripe = Stripe('pk_test_51H1XOgCuKWbkvTE3V6VYOV0qVBLrEcZMCISGPWJ3nZeDqq3JgWb1GL1c2HRxk4NAve4j7YFkZeAvWoatocuvgzLb00bSZL72k3');
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
var style = {
base: {
// Add your base input styles here. For example:
fontSize: '16px',
color: '#32325d',
},
};
// Create an instance of the card Element.
var card = elements.create('card', { style: style });
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Create a token or display an error when the form is submitted.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function (event) {
event.preventDefault();
stripe.createToken(card).then(function (result) {
if (result.error) {
// Inform the customer that there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
// Set your secret key. Remember to switch to your live secret key in production!
// See your keys here: https://dashboard.stripe.com/account/apikeys
StripeConfiguration.ApiKey = "pk_test_51H1XOgCuKWbkvTE3V6VYOV0qVBLrEcZMCISGPWJ3nZeDqq3JgWb1GL1c2HRxk4NAve4j7YFkZeAvWoatocuvgzLb00bSZL72k3";
// Token is created using Checkout or Elements!
// Get the payment token submitted by the form:
var token = model.Token; // Using ASP.NET MVC
var options = new ChargeCreateOptions
{
Amount = 999,
Currency = "usd",
Description = "Example charge",
Source = token,
};
var service = new ChargeService();
var charge = service.Create(options);
</script>
</head>
<body>
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display Element errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
</body>
</html>
控制器
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MerchantCheckout.Models;
using Stripe;
namespace MerchantCheckout.Controllers
{
public class ProcessPaymentController : Controller
{
// GET: ProcessPayment
public ActionResult Index()
{
return View();
}
public ActionResult ProcessPayment()
{
var stripePublishKey = ConfigurationManager.AppSettings["pk_test_51H1XOgCuKWbkvTE3V6VYOV0qVBLrEcZMCISGPWJ3nZeDqq3JgWb1GL1c2HRxk4NAve4j7YFkZeAvWoatocuvgzLb00bSZL72k3"];
ViewBag.StripePublishKey = stripePublishKey;
return View();
}
public ActionResult Charge(string stripeEmail, string stripeToken)
{
Stripe.CustomerCreateOptions customer = new Stripe.CustomerCreateOptions();
var custService = new Stripe.CustomerService();
Stripe.Customer stpCustomer = custService.Create(customer);
return View();
}
}
}
推荐答案
好吧，我设法使它起作用:).对于像我这样陷入困境的任何人，请按照以下步骤操作:
Well I managed to make it work :). For any one like me who is stucked, please follow the steps below:
步骤1 :从条带中获取密钥后，将其添加到web.config文件中
Step 1: Once you get your key from stripe, add it to your web.config file
<add key="stripePublishableKey" value="YourKeyHere"/>
注意:我添加的内容仅出于测试目的.您可以稍后在应用程序上线时添加您的密钥.
Note: I've added for testing purposes only. You can later add your secret key when your app goes live.
第2步: 在您的控制器中添加以下代码
Step 2: Add the following codes in your controller
public ActionResult Index()
{
ViewBag.StripePublishKey = ConfigurationManager.AppSettings["stripePublishableKey"];
return View();
}
[HttpPost]
public ActionResult Charge(string stripeToken, string stripeEmail)
{
Stripe.StripeConfiguration.SetApiKey("your Publishable key");
Stripe.StripeConfiguration.ApiKey = "your Secret key";
var myCharge = new Stripe.ChargeCreateOptions();
// always set these properties
myCharge.Amount = 500;
myCharge.Currency = "USD";
myCharge.ReceiptEmail = stripeEmail;
myCharge.Description = "Sample Charge";
myCharge.Source = stripeToken;
myCharge.Capture = true;
var chargeService = new Stripe.ChargeService();
Charge stripeCharge = chargeService.Create(myCharge);
return View();
}
第3步: 验证您的cshtml文件是否包含以下代码，如果没有，请添加以下代码:
Step 3: Verify if your cshtml file contains the following codes, if not, add them:
<form action="/Home/Charge" method="POST">
<article>
<label>Amount: $5.00</label>
</article>
<script src="//checkout.stripe.com/v2/checkout.js"
class="stripe-button"
data-key="@ViewBag.StripePublishKey"
data-locale="auto"
data-description="Sample Charge"
data-amount="500">
</script>
</form>
第4步:测试！！但是，您应该使用条带测试数据.
Step 4: Test!! You should however use the stripe test data.
我不拥有上述代码，进行了一些研究，并偶然发现了这个人在网站上所做的解释.
I do not own the above codes, did some research and came across this website where this man explains how its done.Click here
这篇关于如何将Stripe付款网关集成到ASP.NET MVC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
