#vidyaanakru_33974
spring lavaBOT
Hello vidyaanakru_33974, we'll be with you shortly! Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
• vidyaanakru_33974, 37 minutes ago, 19 messages
• vidyaanakru_33974, 17 hours ago, 59 messages
final sluice
Hi
Could you please share more details about your follow up message ?
lyric kernel
Hi
This was for @tarzan
We were having a discussion and on that thread I was no longer able to send messages
So I put it here
Cna you kindly direct me on how to get @tarzan to see this message?
Thanks
final sluice
My colleague steped away and I'm taking over here.
Could you summarize your latest follow up message/issue ?
lyric kernel
I am trying to build a checkout screen with the Google Pay as payment mode.
When I click on the Pay button, the chrome browser goes blank.
The paymentRequest object is generated with all the necessary data and canMakePayment object has the googlePay set as "true".
In dev mode, If I change the browser configuration to responsive mode and click on the Pay button, the google pay payment window show up and I can proceed to pay and complete the purchase.
I am not able to see the Google Pay button here - https://stripe.com/docs/elements/express-checkout-element
I can see the Google Pay button here - https://stripe.com/docs/stripe-js/elements/payment-request-button
The GooglePay works in the browser on a mobile phone but it does not work on a desktop browser.
I get this error when I click on checkout for Google Pay - Unable to download payment manifest "https://pay.google.com/about/redirect/".
My code snippet :
const paymentRequest = stripe.paymentRequest({ country: 'US', currency: 'usd', total: {label,amount}, requestPayerName: true, requestPayerEmail: true
});
let canMakePayment = await paymentRequest.canMakePayment()
let isPaymentOptionAvailable = Object.values(canMakePayment).includes(true)
if (isPaymentOptionAvailable) {
paymentRequest.show()
}
it stops at paymentRequest.show()
Nothings happens after this as you can see in the video demo I shared
This is the next set of code that is supposed to run but the screen blanks out.
paymentRequest.on('token', async (ev) => {
ev.complete("success")
resolve(ev.token.id)
})
Any advise or help with this regard is appreciated.
I can DM the demo of the issue and steps to check it on our dev app.
https://stripe.com/docs/js/payment_request/events
Links to the documentation I used to implement the Google Pay in my checkout
final sluice
The GooglePay works in the browser on a mobile phone but it does not work on a desktop browser.
Can you please share the link of your website
so that I can test
lyric kernel
You can see the demo of the issue here
https://www.awesomescreenshot.com/video/21900953?key=918ff9f31ba5f997b6266d0707781cfd
To check the issue on the dev app, follow the steps
- click on https://sandbox.dealmagik.com/
- Click on Go
- Click on Buy on any of the items you see on the screen
- Click on Checkout on the panel on the right
lyric kernel
can you click on Payment Method?
you will see GPay button
No Need to signin
if you have the google pay wallet setup, you will see GPay button when you expand Payment method
final sluice
I'm seeing Google Pay
lyric kernel
Yes
When you select that and click on Checkout as Guest and give the details asked there (dummy one should be fine)
The behavioir shouild be to show the payment window popup
But the screen grays out and freezes
I get the payment window if I change the browser to responsive mode and also in mobile browser
final sluice
After clicking on payment you need to remove your popup
Because the Google Pay popup will be triggered
You need to adapt your flow to not show that popup (yours with the green button)
lyric kernel
I am using the GooglePay popup when clicked on the Checkout Button
final sluice
What is the other popup displayed ?
lyric kernel
That is to capture the email id and phone number before completing the checkout
If you are logged in the you dont see that as you have already provided the requried details
final sluice
You need to update your flow to not show that popup with the Google Pay one
You need to trigger one by one (yours then Google Pay)
lyric kernel
Yes
That is how it works
My popup shows first and then Google's
I will show you another flow for clarity
This is where the screen greys out after I click the Checkout button after selecting GPay
This is the responsive mode in the browser, same steps as above but this time the GPay window shows
final sluice
I get the payment window if I change the browser to responsive mode and also in ...
But in this Screnshot both popups are shown
You need to let the customer finish completting the first popup
then show the next popup
but not show both at the same time
lyric kernel
The first in not a popup
It is the browser window
Only when I click on Checkout does the GPay popup shows
final sluice
I get the payment window if I change the browser to responsive mode and also in ...
I'm not understanding you. in the screenshot you are sharing where is marked in red "country code selected is ..."
isn't that a popup ?
lyric kernel
Yes
That is s modal popup
In the first case
However, if you look at the second set of screenshots, there are no popups there
final sluice
That is s modal popup
In the first case
So in the first case you need to not show two popups at the same time
lyric kernel
The GPay popup is from the Strip checkout
weak quarry
Hi! I'm taking over from my colleague. Please, give me a moment to catch up.
Could you please summarise the last question for me?
lyric kernel
I am trying to build a checkout screen with the Google Pay as payment mode.
When I click on the Pay button, the chrome browser goes blank.
The paymentRequest object is generated with all the necessary data and canMakePayment object has the googlePay set as "true".
In dev mode, If I change the browser configuration to responsive mode and click on the Pay button, the google pay payment window show up and I can proceed to pay and complete the purchase.
I am not able to see the Google Pay button here - https://stripe.com/docs/elements/express-checkout-element
I can see the Google Pay button here - https://stripe.com/docs/stripe-js/elements/payment-request-button
The GooglePay works in the browser on a mobile phone but it does not work on a desktop browser.
I get this error when I click on checkout for Google Pay - Unable to download payment manifest "https://pay.google.com/about/redirect/".
My code snippet :
const paymentRequest = stripe.paymentRequest({ country: 'US', currency: 'usd', total: {label,amount}, requestPayerName: true, requestPayerEmail: true
});
let canMakePayment = await paymentRequest.canMakePayment()
let isPaymentOptionAvailable = Object.values(canMakePayment).includes(true)
if (isPaymentOptionAvailable) {
paymentRequest.show()
}
it stops at paymentRequest.show()
Nothings happens after this as you can see in the video demo I shared
This is the next set of code that is supposed to run but the screen blanks out.
paymentRequest.on('token', async (ev) => {
ev.complete("success")
resolve(ev.token.id)
})
Any advise or help with this regard is appreciated.
I can DM the demo of the issue and steps to check it on our dev app.
https://stripe.com/docs/js/payment_request/events
Links to the documentation I used to implement the Google Pay in my checkout
In this window, I am not able to get the GPay window
In the browser responsive mode, I am able to get this and complete the payment
Also, it works on a mobile browser
You can see the demo of the issue here
https://www.awesomescreenshot.com/video/21900953?key=918ff9f31ba5f997b6266d0707781cfd
To check the issue on the dev app, follow the steps
click on https://sandbox.dealmagik.com/
Click on Go
Click on Buy on any of the items you see on the screen
Click on Checkout on the panel on the right
final sluice
@lyric kernel Did you update your flow to not display two popups at the same time ?
final sluice
I see that you are sharing the same details, so I understand that the issue isn't yet solved
Now we need to have a clear way to reproduce.
Trying to do the test again
Between you are using Stirpe Element in that page and not Stripe Request Button
lyric kernel
Yes
Correct
final sluice
You have a component/logic that is displaying this background:
<div style="display: block !important; position: fixed !important; z-index: 2147483647 !important; background: rgba(40, 40, 40, 0.75) !important; transition: background 400ms ease 0s !important; will-change: background !important; inset: 0px !important; margin: 0px !important; padding: 0px !important;" tabindex="-1"></div>
Which isn't a Stripe component
lyric kernel
This is not in our design
This div is injected when I select GPay and click on checkout
final sluice
I invite you to double check all the javascript updates on your website and see what is behind injecting that div
As far as I can tell that this isn't a Stripe component
Without getting having the complete project code it's hard to tell what is the original of this
Mayeb this is injected by Google Pay which Stripe has no control over it I'm affraid, and I'm not sure what is blocking it from displaying in your UI.
Between on my browser I'm not able to reproduce.
lyric kernel
Ok.
Looks like I will have to go back and check what is happening
Thanks for your time