#Fireenn

1 messages · Page 1 of 1 (latest)

buoyant crownBOT
merry rover
#

Can you elaborate a bit more and be more clear about:
(a) what is actually happening
(b) what error is showing
(c) what API calls you're making

delicate apex
#

Yeah so I'm just trying to do the confirmPayment method to submit credit card data to make a payment.

my code that I have running looks like


var stripe_elements
$(document).ready(function () {
  const stripe_data = JSON.parse(document.getElementById('payment_data').textContent)
  let payment_element;
  let options = {
    clientSecret: stripe_data?.stripe_client_secret,
        appearance: {
            theme: "stripe"
        }
    }

   stripe_elements = stripe.elements(options);
   payment_element = stripe_elements.create('payment');
   payment_element.mount("#payment-element");

});


function submit_payment() {
  let payment_element = stripe_elements.getElement("payment");

  stripe.confirmPayment({
    payment_element
  }).then(function(result) {
    console.log(result);
  })
}

On that stripe.confirmPayment I get an error where its saying I'm not passing in an element or client secret. Will attach an image of the error I'm getting in the console

image.png
#

didn't add it in but I have a button that's just invoking the submit_payment function

merry rover
#

Are you following a guide/tutorial?

delicate apex
#

No

#

just following the docs

merry rover
#

Which docs?

delicate apex
#

stripe js

merry rover
#

Are you able to step through your code and add log lines. like --> console.log();?

delicate apex
#

yeah I can do a console log on that payment_element

#

I get an object that looks like this

merry rover
#

Hmmm, I'm not sure what kind of object that is by looking at it.

delicate apex
#

If I were to expand it I get this

merry rover
#

Do you have a URL where we can look at the browser log of this?

delicate apex
#

like the call that was made for current page I'm on? I'm running this locally

merry rover
#

That's really weird. That looks like a Payment Element object. Where are you putting your log line?

delicate apex
#

right before the stripe.confirmPayment

merry rover
#

I'm not sure how scope works with the above, but it seems weird that you initialize 2 different variables with the same name payment_element. Is it possible that one of these values is being accessed instead of the other?

delicate apex
#

well I realized that I only really needed the stripe_elements to be globally available, since I can query that for any of the mounted elements I might have on a page instead of making payment_element or other elements like the address globally available in a var.

#

however I did try changing the payment_element variable from a let to a var to see if that was the problem but I still end up with the same error

#

I tried doing the stripe.confirmCardPayment method before, and it does recognize that I have a payment element mounted and not a card element

merry rover
#

Right, but do you know which of the Elements objects instances are being plugged into stripe.confirmPayment()? Can you rename the second payment_element variable to make sure this isn't a weird scope issue?

delicate apex
#

yeah will do

#

yeah nothing changed

merry rover
#

What's the updated code?

delicate apex
#

just changed payment_element to element

#

within the function when calling stripe.confirmPayment

merry rover
delicate apex
#

Was able to fix it have to pass in the elements that was created when doing the
stripe.elements(options)