nikolakg80 | Stripe Developers | Page 1

errant raftBOT Jul 31, 2023, 1:02 PM

#

proven raft Jul 31, 2023, 1:10 PM

#

HTTPS is required for GooglePay, so yes that is why you are not seeing it when testing locally

#

Can you send me your Stripe code that should be making Google Pay appear but is instead getting that error?

spare nexus Jul 31, 2023, 1:14 PM

#

Those two issues actually aren't related.
I have a local test server (where I don't see the Google pay option at all), and a staging server which reports the error. Here's the code:```
async function retrieveStripeClientSecret()
{
const values = {
restaurant_id: RESTORANT.id,
total_price: cart.withDelivery
}

const { data } = await axios.post(createPaymentIntentUrl, values);

const { clientSecret = null } = data;
return clientSecret;

}```

#

And on the PHP side I have this: ```
$amount = (int) ($this->getFinalPrice($total_price) * 100);
$currency = config('settings.cashier_currency');

    $payment_intent = $this->stripe->paymentIntents->create([
        'customer' => $this->getStripeCustomerId(),
        'amount' => $amount,
        'currency' => $currency,
        'payment_method_types' => ['link', 'card'],
    ], $this->stripeOptions);

    $output = [
        'clientSecret' => $payment_intent->client_secret
    ];

    return ($output);```

#

So in general, I create the payment intent on the backend when I press the button.
I then extract the clientSecret and use it in the javascript function above. Also there's this:

async function processStripePayment() {

    const clientSecret = await retrieveStripeClientSecret();

    if (!clientSecret) {
        return false;
    }

    elements.submit();

    let result = await stripe.confirmPayment({ 
        clientSecret,
        elements,
        redirect: 'if_required'
    });

    const { paymentIntent, error } = result;

    if (error) {
        alert(error.message);
        return false;
    }

    return paymentIntent.id;
}```

proven raft Jul 31, 2023, 1:29 PM

#

Interesting. So is this issue when you submit a Google Pay payment with GPay or is this just from the Payment Element being rendered?

#

Would you happen to have a public test page that I can look at this for myself on?

#

Apologies the reply was delayed, I should be faster going forward

spare nexus Jul 31, 2023, 1:30 PM

#

https://purplepizza.bluestarpizza.com.au/#modal

Purple Pizza

#

You can log in with google account

proven raft Jul 31, 2023, 1:37 PM

#

Thanks, testing though getting in to my test google account may take a bit. Do you have other test credentials I could use?

spare nexus Jul 31, 2023, 1:40 PM

#

One second

#

username: test_restaurant_client@proton.me
password: jzj&cA7hWJGHLn

proven raft Jul 31, 2023, 1:46 PM

#

Thank you, looking now

#

Getting a different error
DEVELOPER_ERROR in loadPaymentData: An error occurred in call back, please try to avoid this by setting structured error in callback response
Will find what this may be and will get back to you

spare nexus Jul 31, 2023, 1:52 PM

#

Thank you. Can you check both error messages, since the client experienced both:

proven raft Jul 31, 2023, 2:01 PM

#

Yep, trying to understand both.

proven raft Jul 31, 2023, 2:19 PM

#

Apologies, still having trouble pinning down what this is. Do you know if your page has any logic to try to do anything while this google pay payment is going through? I've seen this sheet hang before but mostly for things like reaching out to the server for shipping costs and the server not responding. Your Stripe code that you send earlier doesn't seem to try to do this but its always worth asking

spare nexus Jul 31, 2023, 2:26 PM

#

No such logic

#

It's the same exact procedure for both link payments and google pay

proven raft Jul 31, 2023, 2:46 PM

#

Ah I think I may have found it. It looks like in our deferred intent flow we recommend calling elements.submit before getting the intent from the server https://stripe.com/docs/payments/accept-a-payment-deferred#submit-the-payment

Collect payment details before creating an Intent

Build an integration where you can render the Payment Element prior to creating a PaymentIntent or SetupIntent.

#

The error that you are getting Failed to execute 'postMessage' on 'Window': Delegation is not allowed without transient user activation. is basically saying that the code is taking to long to try to show google pay after the user clicks on the submit button. So it is possible that it is taking too long for your client to hear back from your server

#

But if you just call submit upfront, you will circumvent that issue.

spare nexus Jul 31, 2023, 2:51 PM

#


    if (!clientSecret) {
        return false;
    }

    elements.submit();```

#

So first I submit, then retrieve the clientSecret?

proven raft Jul 31, 2023, 2:56 PM

#

Yep yep

spare nexus Jul 31, 2023, 2:56 PM

#

We had an issue with cards which needed to be validated on every transaction.
So we moved generation of PaymentIntent to the backend

proven raft Jul 31, 2023, 2:57 PM

#

Not quite sure I follow. What are you doing with the intent creation to validate the cards?

#

Happy to think of an alternate workaround. We do have a slightly different flow that would allow you to create a PaymentMethod object, do checks on that object, and create the intent after if that is the validation that you are looking to do

spare nexus Jul 31, 2023, 3:03 PM

#

The issue was with this card number: Always authenticate 4000002760003184 This card requires authentication on all transactions, regardless of how the card is set up.

#

So originally we created setup intent in the backend, and also tried to confirm it in the backend

#

But that didn't work for 4000002760003184, so we switched to the current code

proven raft Jul 31, 2023, 3:05 PM

#

The Payment Element should handle 3DS on elements.submit, what was happening before when you were testing with that 3184 card?

spare nexus Jul 31, 2023, 3:10 PM

#

Can't remember exactly what went wrong. Something about validation dialog on the users phone...

#

We validated the setup intent with that dialog message, but not the payment intent created from that setup intent, if that makes sense...

#

Anyway, I moved elements.submit to the very top, didn't work

pliant latch Jul 31, 2023, 3:22 PM

#

Hello 👋
Are you seeing any errors or change in behaviour after moving elements.submit(...) ?

spare nexus Jul 31, 2023, 3:22 PM

#

Hi hanzo, still the same. The error just appears sooner I guess

pliant latch Jul 31, 2023, 3:23 PM

#

Can you move elements.submit(); to the click event handler code rather than calling it from processStripePayment and see if that changes anything?

spare nexus Jul 31, 2023, 3:25 PM

#

Sure

#

I need to tweak some code first

pliant latch Jul 31, 2023, 3:40 PM

#

👍

errant raftBOT Jul 31, 2023, 3:45 PM

#

spare nexus Jul 31, 2023, 3:46 PM

#

I get elements.submit is not a function, just give me a second to try and see why...

#

It seems like we're making progress

sullen arrow Jul 31, 2023, 3:55 PM

#

for the "not a function" it usually means you have an outdated npm package with the old types and you need to upgrade

spare nexus Jul 31, 2023, 3:58 PM

#

Not sure how I got this, but inside the onclick handler, I got this when running console.log(elements);
HTMLFormControlsCollection(27) [input, input#deliveryTypeTakeAway.custom-control-input, input#deliveryTypeDelivery.custom-control-input, input#customFields.client_name.form-control, input#phoneStandart.form-control, input, input#checkEmail.form-control, input#restaurant_id, select#table_id.form-control.form-control-alternative.select2init.select2-hidden-accessible, select#delivery-timeslot.form-control.timeslot.noselecttwo.select2-hidden-accessible, select#pickup-timeslot.form-.....
Anyway, what did the trick is to change button type="submit" to button type="button"...
Also, I changed the stripe elements variable name from elements to paymentElements

sullen arrow Jul 31, 2023, 4:00 PM

#

sorry not sure what any of this means right now but seems fairly specific to your own code/implementation, not Stripe. I'll assume you're unblocked for now based on what you said at the end

spare nexus Jul 31, 2023, 4:03 PM

#

I think that the elements variable was used elsewhere, but now it seems to work.
Thanks, to all of you

sullen arrow Jul 31, 2023, 4:09 PM

#

awesome!

#nikolakg80