问题描述
如何使用自定义条带形式，然后使用 ASP.NET MVC 与 3D 安全选项集成？
解决方法
使用 Razor/Html 自定义表单设计
<div class="campagin_start content" style="max-width:100%">
<div class="cell example example2" id="">
<form>
<div class="row">
<div class="field">
<div id="example2-card-number" class="input empty"></div>
<label for="example2-card-number" data-tid="elements_examples.form.card_number_label">Card number</label>
<div class="baseline"></div>
</div>
</div>
<div class="row">
<div class="field half-width">
<div id="example2-card-expiry" class="input empty"></div>
<label for="example2-card-expiry" data-tid="elements_examples.form.card_expiry_label">Expiration</label>
<div class="baseline"></div>
</div>
<div class="field half-width">
<div id="example2-card-cvc" class="input empty"></div>
<label for="example2-card-cvc" data-tid="elements_examples.form.card_cvc_label">CVC</label>
<div class="baseline"></div>
</div>
</div>
<button id="card-button">@WebResources.Donate $@Model.budget</button>
<a href="#" class="btn btn-border mt-10" style="display: none;margin-top: 10px;margin-left: 15px;" id="canceltran"> Cancel</a>
</form>
<p id="payment-result"><!-- we'll pass the response from the server here --></p>
</div>
</div>
脚本
var stripe = Stripe('@ViewBag.StripePublishKey');
var elementStyles = {
base: {
color: '#32325D',fontWeight: 500,fontFamily: 'Source Code Pro,Consolas,Menlo,monospace',fontSize: '16px',fontSmoothing: 'antialiased','::placeholder': {
color: '#CFD7DF',},':-webkit-autofill': {
color: '#e39f48',invalid: {
color: '#E25950','::placeholder': {
color: '#FFCCA5',};
var elementClasses = {
focus: 'focused',empty: 'empty',invalid: 'invalid',};
var elements = stripe.elements({
fonts: [
{
cssSrc: 'https://fonts.googleapis.com/css?family=Source+Code+Pro',],// Stripe's examples are localized to specific languages,but if
// you wish to have Elements automatically detect your user's locale,// use `locale: 'auto'` instead.
locale: window.__exampleLocale
});
var Id = @Html.Raw(Json.Encode(Model.Id)); // Get Id From Model
var cardNumber = elements.create('cardNumber',{
showIcon: true,style: elementStyles,classes: elementClasses,});
cardNumber.mount('#example2-card-number');
var cardExpiry = elements.create('cardExpiry',{
style: elementStyles,});
cardExpiry.mount('#example2-card-expiry');
var cardCvc = elements.create('cardCvc',});
cardCvc.mount('#example2-card-cvc');
var formClass = '.example2';
var example = document.querySelector(formClass);
var form = example.querySelector('form');
var resultContainer = document.getElementById('payment-result');
// Payment Button Handle
form.addEventListener('submit',function (event) {
$('#AjaxLoader').show();
event.preventDefault();
resultContainer.textContent = "";
stripe.createPaymentMethod({
type: 'card',card: cardNumber,}).then(handlePaymentMethodResult);
});
function handlePaymentMethodResult(result) {
if (result.error) {
$('#AjaxLoader').hide();
$("#canceltran").show();
// An error happened when collecting card details,show it in the payment form
resultContainer.textContent = result.error.message;
} else {
// Otherwise send paymentMethod.id to your server
fetch('/cart/pay',{
method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ PaymentMethodId: result.paymentMethod.id,Id: Id})
}).then(function (result) {
return result.json();
}).then(handleServerResponse);
}
}
function handleServerResponse(responseJson) {
if (responseJson.error) {
// An error happened when charging the card,show it in the payment form
resultContainer.textContent = responseJson.error;
$('#AjaxLoader').hide();
$("#canceltran").show();
} else if (responseJson.requiresAction) {
// Use Stripe.js to handle required card action
stripe.handleCardAction(
responseJson.clientSecret
).then(function (result) {
if (result.error) {
$('#AjaxLoader').hide();
resultContainer.textContent = result.error.message;
$("#canceltran").show();
// Show `result.error.message` in payment form
} else {
// The card action has been handled
// The PaymentIntent can be confirmed again on the server
fetch('/cart/pay',{
method: 'POST',body: JSON.stringify({ PaymentIntentId: result.paymentIntent.id,Id:Id })
}).then(function (confirmResult) {
return confirmResult.json();
}).then(handleServerResponse);
$('#AjaxLoader').hide();
}
});
}
else {
// Show a success message or Required action
}
}
Controller - 在构造函数中，你必须使用你的 Stripe Credentials
public class CartController : ControllerBase
{
public CartController()
{
StripeConfiguration.ApiKey = YOUR API KEY; // Replace your API KEY here
}
string stripePublishKey = YOUR PUBLISHER KEY; // Replace your PUBLISHER KEY here
private class StripeDataReq
{
public string PaymentMethodId { get; set; }
public string PaymentIntentId { get; set; }
public string Id { get; set; }
}
public async Task<ActionResult> Pay(StripeDataReq stripeDataReq)
{
// From Id you can get the value
var cart = await Cart.Table.LookupAsync(stripeDataReq.Id);
// We set amount (amout*100) because here amount consider in cent (100 cent charge $1) so
var amount = cart.Budget * 100;
var email = ""; // Set Email Id for payment Receiver
var service = new PaymentIntentService();
PaymentIntent paymentIntent = null;
try
{
if (stripeDataReq.PaymentMethodId != null)
{
// Create the PaymentIntent
var options = new PaymentIntentCreateOptions
{
Description = cart.Desc,PaymentMethod = stripeDataReq.PaymentMethodId,//Shipping is not nessasery for every region this is useful for an Indian Standard
//Shipping = new ChargeShippingOptions
//{
// Name = giver.Name,// Address = new AddressOptions
// {
// Line1 = "510 Townsend St",// PostalCode = "98140",// City = "San Francisco",// State = "CA",// Country = "US",// },//},ReceiptEmail = email,Amount = amount,Currency = "usd",Confirm = true,//ErrorOnRequiresAction = true,ConfirmationMethod = "manual",};
paymentIntent = service.Create(options);
}
if (stripeDataReq.PaymentIntentId != null)
{
var confirmOptions = new PaymentIntentConfirmOptions { };
paymentIntent = service.Confirm(
stripeDataReq.PaymentIntentId,confirmOptions
);
}
}
// StripeException handle all types of failure error and then return the message into FE
catch (StripeException e)
{
return Json(new { error = e.StripeError.Message });
}
TempData["Id"] = stripeDataReq.Id;
return await generatePaymentResponse(paymentIntent);
}
//For 3D secure card
private async Task<ActionResult> generatePaymentResponse(PaymentIntent intent)
{
var CartId = TempData["Id"];
if (intent.Status.ToString().ToLower() == "succeeded")
{
// Handle post-payment fulfillment
return Json(new { success = true });
}
// requires_action means 3d secure card required more authentications for payment
else if (intent.Status == "requires_action")
{
// Tell the client to handle the action
return Json(new
{
requiresAction = true,clientSecret = intent.ClientSecret
});
}
else
{
// Any other status would be unexpected,so error
return new HttpStatusCodeResult(HttpStatusCode.BadRequest,"Invalid PaymentIntent status");
}
}
}
这是我使用条带支付进行自定义表单集成的工作代码，希望这篇文章能帮助很多开发者