#BidBird®
humble siren
shrewd kettle
It looks like status is requires_payment_method
dense tulip
huh, can it require both?
shrewd kettle
You would use that Payment Intent's client_secret in the Payment Element to accept payment credentials. From there a Payment Method would be created
dense tulip
Ok, so here's the PHP payment intent code. $stripeIntent = \Stripe\PaymentIntent::create([ 'amount' => $amount, 'currency' => 'usd',], ['api_key' => $this->apiKey]); Should there be a source key? this was the old stripe elements 'source' => $token,
shrewd kettle
No, you don't need Sources if you're taking new payments with new payment methods
dense tulip
ok, that charge shows a client secret was created.
// Create a Stripe client.
var stripe = Stripe('{{ config('services.stripe.key') }}');
{{--// var stripe = stripe.elements({--}}{{-- clientSecret: '{{ config('services.stripe.key') }}',--}}{{--});--}}
{{--// Create an instance of Elements.--}}
var elements = stripe.elements();
From what I can see the key is set on the first var stripe So the second line of code is not necessary, right?
shrewd kettle
Where is this code coming from? Are you following a guide somewhere?
shrewd kettle
I'm not sure what that second line of code does to be honest. I don't see it referenced anywhere in the docs
dense tulip
me, too. Ha. I had it commented out. Will delete. I found it somewhere on the docs, but it must be out of context
Hi, ok so I get this error:
stripe.confirmCardPayment( stripe, { payment_method: {card: cardElement} }
on confirmCardPayment - unresolved function. I'm referencing stripe cdn here above these methods:
<script src="https://js.stripe.com/v3/"></script>
what could cause that?
on the php side this is my composer: "stripe/stripe-php": "^10.5.0",
shrewd kettle
It looks like you're trying to pass in stripe to stripe.confirmCardPayment(), but you should instead pass in the Payment Intent's client_secret string
dense tulip
ok, let me see if I can get that string.
when I dump, I do see this on the PaymentIntent object: "client_secret" => "pi_3Mc....
shrewd kettle
Yup, that's the string you need
dense tulip
so, what's strange, though is after submitting the form. that's in the PaymentIntent object. I can see some data is getting to stripe servers here;
pi_3McC9cKT8fxib8XB06YGRv3z
shrewd kettle
I'm not sure I understand the problem. Can you elaborate?
dense tulip
sure, so that latest charge was deemed incomplete so, the post request is making it to stripe. However, I'm not getting a successful charge.
bitter cliff
👋 stepping in
dense tulip
"status": "requires_source",
bitter cliff
Sounds like you are having an issue with your confirmation?
dense tulip
ok, no prob, thank you @shrewd kettle
bitter cliff
Did you add logs to ensure you are hitting confirmCardPayment client-side?
dense tulip
Not 100%. I wired this up for the previous stripe elements, but am trying to upgrade.
PaymentIntent is a bit different then the Charge
bitter cliff
Yep okay
So if you are seeing an incomplete PaymentIntent that is indicative that is has not yet been confirmed
So you want to debug why confirmCardPayment isn't running
dense tulip
I think so. Let's start there. Tho, sometimes phpstorm is cranky about static analysis - so I'm not positive that is the issue.
Here's that full function:
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.confirmCardPayment({ payment_method: {card: cardElement}} ).then(function(result) {if (result.error) {
// Display error.message in your UI.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message; } else {
// The payment has succeeded
// Display a success message stripeTokenHandler(result.token); } });
man, wish that'd format better
bitter cliff
So yeah I'd start by adding a log inside that event listener
To ensure that code is running
dense tulip
ok, not seeing anything on console.log(event) after submitting, but just saw this:
Uncaught IntegrationError: The selector you specified (#payment-element) applies to no DOM elements that are currently on the page. Make sure the element exists on the page before calling mount(). Is the hash tag not necessary?
This is what I have in html:
so not sure what that error is referencing
bitter cliff
How are you initializing form in your JS code?
Are you doing const form = document.getElementById('payment-element');?
dense tulip
almost...
var form = document.getElementById('payment-form');
should it be const instead?
bitter cliff
Nah doesn't matter
But you can see that in your code there you are grabbing payment-form
Which is not the div for your payment-element
Change that to payment-element
dense tulip
o g
ok so, same issue, after fixing that: pi_3McCpDKT8fxib8XB0pmyjb83
FetchError: Error fetching https://r.stripe.com/0: NetworkError when attempting to fetch resource.
How does this happen if I'm able to submit to stripe?
bitter cliff
You can ignore any r.stripe errors
dense tulip
ahh
dense tulip
gotcha
bitter cliff
So are you seeing a log fire before confirmCardPayment now?
dense tulip
no, I don't see one
keep getting this: The selector you specified (#payment-element) applies to no DOM elements that are currently on the page.
bitter cliff
Okay so then the issue is still with grabbing your div
Can you show me your full Javascript file?
dense tulip
sure thing, thank you for your help.