#madatanic

1 messages · Page 1 of 1 (latest)

tender willowBOT
bronze bridge
#

Hi there, I don't see this error directly related to elements

#

Is this queueMessage from your own code?

raw frost
#

no it's not from my code

bronze bridge
#

Is there a public URL where I visit and reproduce it?

raw frost
#

not at the moment

#

im debugging locally

#

what else i can give you so it's more helpful

bronze bridge
#

Or is it from some other libraries that you've integrated in your app?

raw frost
#

that code comes from here

#

so it's stripe

bronze bridge
#

OK. Can you share with me your code?

raw frost
#

here's the html

#

<form id="payment-form"> <div id="payment-element"><!--Stripe.js injects the Card Element--></div> <div id="error-message" class="text-danger mb-3">@Model.RedirectError</div> <button id="submit" type="submit" class="btn btn-primary">Submit</button> </form>

#

and the scripts

#

`<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript">
const stripe = Stripe("@Model.PublishableKey");
const elements = stripe.elements({
clientSecret: "@Model.ClientSecret",
});

    const paymentElement = elements.create('payment');
    paymentElement.mount('#payment-element');

    const form = document.getElementById('payment-form');
    form.addEventListener('submit', async (event) => {
        event.preventDefault();

        const { error } = await stripe.confirmSetup({
            //`Elements` instance that was used to create the Payment Element
            elements,
            confirmParams: {
                return_url: '@HttpContext.Request.GetEncodedUrl()',
            }
        });

        if (error) {
            // This point will only be reached if there is an immediate error when
            // confirming the payment. Show error to your customer (for example, payment
            // details incomplete)
            const messageContainer = document.querySelector('#error-message');
            messageContainer.textContent = error.message;
        } else {
            // Your customer will be redirected to your `return_url`. For some payment
            // methods like iDEAL, your customer will be redirected to an intermediate
            // site first to authorize the payment, then redirected to the `return_url`.
        }
    });
</script>`
bronze bridge
#

OK, let me quickly test it out

raw frost
#

Thank you so much

bronze bridge
#

I'm unable to see the error, the PaymentElement is rendered successfully

#

Can you check if you are using a valid publishable key and payment_intent_secret?

raw frost
#

can i send u the keys here?

#

they're test keys

bronze bridge
#

You can DM me.

raw frost
#

ok

#

just sent u the keys

bronze bridge
#

I've tested with the data that you shared with me, and I'm able to render the PaymentElement

raw frost
#

so what's interesting is

#

it works on Edge

#

but not on Chrome

#

when im debuggin from Visual Studio

bronze bridge
#

Ah, can you disable Chrome plugins and try again?

raw frost
#

let me check

#

ok i see the problem

#

it works now on chrome

#

it's not the plugins

#

it's Visual Studio intercepting the loading process of Stripe

#

thank you so much for checking

bronze bridge
#

No problem!