Paypal-checkout-components: [Bug] Debit/Credit card button clicked and script crashes forcing form to disappear
🐞 Describe the Bug
Making this a new thread since I think the error is different than what other people are experiencing. I am currently trying to use the paypal buttons in sandbox mode, however when I click on the Debit or Credit Card option, it instantly takes me to the "Something went wrong. We'll take you back to checkout so you can try again." state. The console logs show this:
Basically, the script is trying to parse a JSON that's already a JSON so it ends up parsing [object Object] and throws an error within the debit/credit card form iframe and gets me to the "Something went wrong. We'll take you back to checkout so you can try again." state.
🔬 Minimal Reproduction
- Include the paypal checkout components into your site
- Click on the debit or credit card button
😕 Actual Behavior
I included the image of the error logs above, so I won't paste it again here. Basically as I said before, the script crashes forcing the whole checkout form to crash in the iframe.
🤔 Expected Behavior
I expect it to finish displaying the debit/credit card form and allow me to fill it out and pay without leaving the page.
🌍 Environment
- Chrome Version: - 79.0.3945.130
- OS version: - 10.15.4
- SDK version (
window.paypal.version): - 5.0.128
Affected browsers
It seems like only chrome is affected. I tested on safari and it worked fine!
➕ Additional Context
Here is a video of it:
kraj011
All 15 comments
Also tested on chrome version: 83.0.4103.97 but received the same error.
kraj011
on 11 Jun 2020
@kraj011 thanks for including a video in the bug report. It's quite helpful.
I'm having a difficult time reproducing this error. Can you share your implementation code?
gregjopa
on 12 Jun 2020
Sure! So I decided to create a new html file to ensure that it had nothing to do with any packages I was using. The html file contains:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://www.paypal.com/sdk/js?client-id=sb¤cy=USD&locale=en_US">
</script>
<script>
paypal.Buttons().render('body');
</script>
</head>
<body>
</body>
</html>
Even with this blank implementation, I still get the issue. I also tried to replace my client id with a sandbox id to test but the same thing occurred!
kraj011
on 12 Jun 2020
Thanks for sharing the minimal example. I am able to successfully run it locally in Chrome (Version 83.0.4103.61). I still can't reproduce the error 🤔.
Does this jsbin work for you? Or do you get the same error when clicking the Credit Card button? https://jsbin.com/guhuyeq/edit?html,output
gregjopa
on 13 Jun 2020
Same error unfortunately! I thought it may have been due to the way I was hosting the file but I guess not since the same error occured in the jsbin!
kraj011
on 13 Jun 2020
Well I think it may be one of my chrome extensions possibly interfering with the iframe; I just opened the jsbin in an incognito window and it worked just fine. I'll do my best to narrow it down and edit this comment!
EDIT: Found the culprit; It was an extension called "TwoSeven" (https://chrome.google.com/webstore/detail/twoseven-extension/cjdnfmjmdligcpfcekfmenlhiopehjkd?hl=en-US)
Still not sure why, though, the paypal sdk is throwing an error. I will be opening an issue on twoseven, but I think that there still might be a bug on paypal's end. The iframe shouldn't be crashing at all, regardless of what extensions I have installed.
kraj011
on 13 Jun 2020
@kraj011 nice find! I installed the TwoSeven Chrome extension and I am able to reproduce the problem.
I was debugging the issue and noticed that one of the paypal scripts fails to fully load which seems to break the Pay with Card experience.
gregjopa
on 15 Jun 2020
Thank you so much for isolating exactly what’s going on! I’m going to go ahead and forward this issue thread to the twoseven team to see what they can do!!
kraj011
on 15 Jun 2020
TwoSeven dev here. Sorry about the issue.
It looks like one of our regexes is being triggered by this script URL. Could you share the URL so I can determine which one is causing it to be blocked?
gurupras
on 15 Jun 2020
Here's the entire URL pulled from the jsbin linked above:
https://www.sandbox.paypal.com/smart/buttons?style.layout=vertical&style.color=gold&style.shape=rect&style.tagline=false&components.0=buttons&locale.lang=en&locale.country=US&sdkMeta=eyJ1cmwiOiJodHRwczovL3d3dy5wYXlwYWwuY29tL3Nkay9qcz9jbGllbnQtaWQ9c2ImY3VycmVuY3k9VVNEJmxvY2FsZT1lbl9VUyIsImF0dHJzIjp7fX0&clientID=AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R&sessionID=c2c9490ad1_mja6ndi6mzc&buttonSessionID=c16d34850f_mja6ndm6mji&env=sandbox&fundingEligibility=eyJwYXlwYWwiOnsiZWxpZ2libGUiOnRydWV9LCJjYXJkIjp7ImVsaWdpYmxlIjp0cnVlLCJicmFuZGVkIjp0cnVlLCJ2ZW5kb3JzIjp7InZpc2EiOnsiZWxpZ2libGUiOnRydWV9LCJtYXN0ZXJjYXJkIjp7ImVsaWdpYmxlIjp0cnVlfSwiYW1leCI6eyJlbGlnaWJsZSI6dHJ1ZX0sImRpc2NvdmVyIjp7ImVsaWdpYmxlIjp0cnVlfSwiaGlwZXIiOnsiZWxpZ2libGUiOmZhbHNlfSwiZWxvIjp7ImVsaWdpYmxlIjpmYWxzZX0sImpjYiI6eyJlbGlnaWJsZSI6ZmFsc2V9fX0sInZlbm1vIjp7ImVsaWdpYmxlIjpmYWxzZX0sIml0YXUiOnsiZWxpZ2libGUiOmZhbHNlfSwiY3JlZGl0Ijp7ImVsaWdpYmxlIjp0cnVlfSwic2VwYSI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJpZGVhbCI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJiYW5jb250YWN0Ijp7ImVsaWdpYmxlIjpmYWxzZX0sImdpcm9wYXkiOnsiZWxpZ2libGUiOmZhbHNlfSwiZXBzIjp7ImVsaWdpYmxlIjpmYWxzZX0sInNvZm9ydCI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJteWJhbmsiOnsiZWxpZ2libGUiOmZhbHNlfSwicDI0Ijp7ImVsaWdpYmxlIjpmYWxzZX0sInppbXBsZXIiOnsiZWxpZ2libGUiOmZhbHNlfSwid2VjaGF0cGF5Ijp7ImVsaWdpYmxlIjpmYWxzZX0sInBheXUiOnsiZWxpZ2libGUiOmZhbHNlfSwiYmxpayI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJ0cnVzdGx5Ijp7ImVsaWdpYmxlIjpmYWxzZX0sIm94eG8iOnsiZWxpZ2libGUiOmZhbHNlfSwibWF4aW1hIjp7ImVsaWdpYmxlIjpmYWxzZX0sImJvbGV0byI6eyJlbGlnaWJsZSI6ZmFsc2V9fQ==&platform=desktop¤cy=USD&intent=capture&commit=true
kraj011
on 15 Jun 2020
I took a look at what's going on, and here's what I have:
To the best of my knowledge, the URL above, is not being blocked by our extension. It might be some other extension responsible for blocking it.
The underlying issue is that PayPal is treating any message that arrives via window.postMessage as its communication, and I think this is incorrect. Obviously, the twoseven extension should try and do a better job than window.postMessage(data, '*'), but at the same time, the SDK(?) should at the very least have some checks/traps to catch errors or filter out messages that don't belong to it.
In the screenshot above, e.data is already an Object and it is being run through JSON.parse(e.data) causing it to throw.
I'm still fairly new to web development, and so please let me know if you think we can do something from our side to prevent errors like this in the future.
gurupras
on 15 Jun 2020
I think even a simple type check within the existing if statement would fix this issue, i.e. something like:
if (typeof e.data === String) { RUN PARSING CODE HERE }
Easy fix from paypal's end 😄
kraj011
on 15 Jun 2020
Thanks for the debugging help @gurupras and @kraj011! 🚀 🎸 Greatly appreciated. We will get this fixed on PayPal's end.
gregjopa
on 16 Jun 2020
Just wanted to provide a status update. We have not released a fix for this yet. We are coordinating this change internally and hope to have it released in the next couple weeks.
gregjopa
on 11 Aug 2020
Hi @kraj011 @gurupras, thank you for your patience as we addressed this issue! The fix is in production and we were able to verify that the TwoSeven extension plays nicely with the card form. I'm going to close this issue now since it has been resolved.
elizabethmv
on 14 Sep 2020
Related issues
i7eo
·
3Comments
MrMooky
·
3Comments
mtshare
·
5Comments
deejbee
·
5Comments
Warix3
·
4Comments
Most helpful comment
Thank you so much for isolating exactly what’s going on! I’m going to go ahead and forward this issue thread to the twoseven team to see what they can do!!