javascriptstripe-payments

Adding Stripe Elements, not seeing the pay button when details filled in and i want to make the email address mandatory


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:

enter image description here

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();
    }

Solution

  • 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