#BidBird® - requires_source

1 messages · Page 1 of 1 (latest)

fringe scaffoldBOT
chrome ridge
#

bismark is out at the moment but I can help

#

Can you catch me up on this js file and what we are looking at?

fallen finch
#

hey no prob. thank you.

Migrating from elements / charge to elements / stripe intent
So, we're trying to identify why the object pi_3McCpDKT8fxib8XB0pmyjb83 is having no source,

#

in dashboard, that charge says: "status": "requires_source",

chrome ridge
#

BidBird® - requires_source

#

Can you tell me about where expecting the source to get filled in? In our logs I only see the payment intent creation request and it doesn't include a source, payment method, or customer

fallen finch
#

Yea, i'm not sure how it's supposed to get there.

#

TypeError: can't access property "addEventListener", form is null I do keep getting this error.

chrome ridge
#

Can you send me the snippet of code where you are getting that?

fallen finch
# 
// Handle form submission.
var form = document.getElementById('#payment-
element');```
#

I don't really understand that. the id is on the form above, and the elements show up on page

chrome ridge
#

If you print out that form variable what does it show? It sounds like your js may not be able to get the element

fallen finch
#

console.log(form) prints:

#

null

#

so, that's weird

wind tangle
#

Hello 👋
Taking over as Pompey needs to step away soon
Looks like your element isn't really getting mounted

#

Are you seeing it show up on the page?

fallen finch
#

this is what the form looks like:

<!-- Display a payment form -->    <div id="payment-element" class="my-3">        <!-- Elements will create form elements here -->    </div>
#

could this be the cdn for stripe js 3 is not being accessed?

#

I guess not, this is simple js

wind tangle
fallen finch
#

You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS.

#

Is this true?

#

I'm running HTTP locally

wind tangle
#

Yeah but that should just be a warning, if you're using test mode keys then you should be fine with http

fallen finch
#

ahh, ok. thank you @wind tangle

`form.addEventListener('submit', function(event) {``

#

Uncaught TypeError: can't access property "addEventListener", form is null

So, I don't understand, as the form uses payment-element

wind tangle
#

Are you seeing PaymentElement render on the page or no?

fallen finch
#

yes. it's there

#

I console.log(card)

wind tangle
#

Can you share all the code that you have relevant to PaymentElement?
It seems like there's a disconnect somewhere

fallen finch
#

an object shows up, so not sure why it wouldn't mount:

// Create an instance of the card Element.

var card = elements.create('card', {style: style});

console.log(card);

// Add an instance of the card Element into the `payment-element` <div>.

card.mount('#payment-element');
wind tangle
#

yeah okay so most likely something on your DOM isn't working correctly as following returns null
var form = document.getElementById('#payment-element');

fallen finch
#

oh jeez

#

tried to put it in a notepad file

#

gotta step away. How long are stripe folks here today?

wind tangle
#

Ah I think I see what's going on here

#

you have a # in getElementById

#

you only need to provide the id

fallen finch
#

yea, that damn thing. I kept wondering about that

#

ok, let me try

wind tangle
#

If you use querySelector then you need to specify and differentiate between ids and classes.

fallen finch
#

ahh, yea, I think must have used that on the old elements.

#

The selector you specified (payment-element) applies to no DOM elements that are currently on the page.

#

this is just bizarre

wind tangle
#

😅 can you inspect the CardElement and look at the html to make sure there's a form with that ID on the page?

fallen finch
#

yes. This is it:

<!-- Display a payment form -->    
<div id="payment-element" class="my-3">        
<!-- Elements will create form elements here -->    
</div>
#

isn't that strange?

wind tangle
#

ah also submit event listener should be for a form component, not a div

fallen finch
#

how is it for a div?

wind tangle
#

can you try something like

  <div id="card-element">
    <!-- Elements will create input elements here -->
  </div>

  <!-- We'll put the error messages in this element -->
  <div id="card-errors" role="alert"></div>

  <button id="submit">Submit Payment</button>
</form>```

and changing your `card.mount('card-element')`?
fallen finch
#

sorry, i have to step a way for a bit. I'll work on this when I get back.. Thank you much!

wind tangle
#

how is it for a div?
You have <div id="payment-element" class="my-3">

so, card.mount(...) mounts the element there
and you also have var form = document.getElementById('#payment-element');
which gets the card element (which is a div and not a form)