Integrating a stripe checkout with .net

Question

Please I need your help, I want to integrate a stripe checkout with .net I follow Stripe toturial step by step but the Stripe Checkout redirection doesn't work.

Here is my code :

   <script src="https://js.stripe.com/v3/"></script>
  <asp:Button runat="server" OnClick="btnPay_Click" Text="S'inscrire" CssClass="btn btn-submit" id="btnPay" />
<script>
    var stripe = Stripe('pk_test_fuKFopc9GVK4QgRD4c3CDZng00OI6sMSyU');

    var element = document.getElementById('btnPay');

    element.addEventListener('click', function () {

        stripe.redirectToCheckout({
            // Make the id field from the Checkout Session creation API response
            // available to this file, so you can provide it as parameter here
            // instead of the {{CHECKOUT_SESSION_ID}} placeholder.
            sessionId: '<%= sessionid%>'
        }).then(function (result) {
            // If `redirectToCheckout` fails due to a browser or network
            // error, display the localized error message to your customer
            // using `result.error.message`.
        });
    });
</script>

And my server code :

 protected void btnPay_Click(object sender, EventArgs e)
        {
            // Set your secret key: remember to change this to your live secret key in production
            // See your keys here: https://dashboard.stripe.com/account/apikeys
            StripeConfiguration.ApiKey = WebConfigurationManager.AppSettings["StripeSecretKey"];

            var options = new SessionCreateOptions
            {
                CustomerEmail = "customer@hotmail.com",
                PaymentMethodTypes = new List<string> {
                                    "card",
                                },
                LineItems = new List<SessionLineItemOptions> {
                                    new SessionLineItemOptions {
                                        Name = "TEST",
                                        Description = "my Description",
                                        Amount = 99,
                                        Currency = "eur",
                                        Quantity = 1,
                                    },
                                },
                SuccessUrl = "https://example.com/success?session_id={CHECKOUT_SESSION_ID}",
                CancelUrl = "https://example.com/cancel",
            };

            var service = new SessionService();
            Session session = service.Create(options);

The redirection to Checkout doest work :( :( :(

Answer 1

My asp.net forms is a little rusty, but I'm 90% sure I know your issue. That being said, please do read the comments and this link: https://meta.stackexchange.com/questions/147616/what-do-you-mean-it-doesnt-work so you can write better questions in the future.

NOW..

Asp.net forms likes to add their own unique ID shenanigans to objects. So even though you specified an ID for the <asp:btn> , it's going to have a guid or something jammed on the end of it. To confirm this, inspect the page before you actually click the button and look at what the ID value actually is in the HTML.

Adding ClientIDMode="Static" to your asp:btn is one solution, the other would be to use a css class or other query selector to actually select the asp:btn in your javascript code.

Answer 2

Thank you all, just for your information: - When I click another time on the Button, the redirection works.

• it works well when I use checkout server code on the page load ! too strange.

I have followed these steps : https://stripe.com/docs/payments/checkout/one-time

 protected void Page_Load(object sender, EventArgs e)
        {
 // Set your secret key: remember to change this to your live secret key in production
            // See your keys here: https://dashboard.stripe.com/account/apikeys
            StripeConfiguration.ApiKey = WebConfigurationManager.AppSettings["StripeSecretKey"];



            var options = new SessionCreateOptions
            {
                CustomerEmail = "mehdizerouali@hotmail.com",
                PaymentMethodTypes = new List<string> {
                                    "card",
                                },
                LineItems = new List<SessionLineItemOptions> {
                                    new SessionLineItemOptions {
                                        Name = "BPENLIGNE",
                                        Description = "Formule Smart",
                                        Amount = 99,
                                        Currency = "eur",
                                        Quantity = 1,
                                    },
                                },
                SuccessUrl = "https://example.com/success?session_id={CHECKOUT_SESSION_ID}",
                CancelUrl = "https://example.com/cancel",
            };

            var service = new SessionService();
            Session session = service.Create(options);

            sessionid = session.Id;
        }