I am integrating Stripe Elements to the checkout page, but when i fill in the test card details, the payment element collapses with optional email, phone number and name to be entered. But the pay button does not show and i want to make the email address mandatory, how can i do this?
Here is the payment element integrations:
const stripe = Stripe('xxx');
$(document).ready(function () {
const appearance = { /* appearance */ };
const options = {
layout: {
type: 'accordion',
},
fields: {
billingDetails: {
name: 'auto',
email: 'auto',
}
}
};
const elements = stripe.elements({ clientSecret: "@Model.paymentIntent.ClientSecret", appearance });
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');
})
You can see in the image below:
The page is scrolled down to bottom
Server-Side:
public IActionResult Index()
{
StripeConfiguration.ApiKey = "xxxx";
var optionsStripe = new PaymentIntentCreateOptions
{
Amount = 1099,
Currency = "gbp",
PaymentMethodTypes = new List<string> { "card" },
};
var service = new PaymentIntentService();
PaymentIntent paymentIntent = service.Create(optionsStripe);
var options = new JsonSerializerOptions()
{
IncludeFields = true,
};
string strBasketItems = HttpContext.Session.GetString("SessionStandalone");
BulletControls.Controllers.ControlController.SessionBasket sessionBasket = System.Text.Json.JsonSerializer.Deserialize<BulletControls.Controllers.ControlController.SessionBasket>(strBasketItems, options);
List<BulletControls.Controllers.ControlController.SessionBasketItem> basketItems = sessionBasket.BasketItems;
if (strBasketItems != null)
{
return View(new { basketItems, paymentIntent = paymentIntent });
}
return View();
}
Stripe Payment Element does not come with a button. You'll need to add your own button and wire it up with the Stripe.js confirmPayment
function as shown in the docs - https://docs.stripe.com/payments/accept-a-payment?platform=web&ui=elements#add-the-payment-element-component