Paypal-checkout-components: Button is disappeared in mobile view

Created on 18 Jan 2018  Â·  7Comments  Â·  Source: paypal/paypal-checkout-components

Description

Hi,

We have been told that the checkout button is disappeared in mobile browser. (including responsive design mode) whilst it works fine in desktop browser such as chrome, firefox and IE.

We are not so sure if it's user side issue or product issue, haven't found the root cause yet.

Please provide a short description of the issue here, along with:

  • Screenshot
  • Desktop view (work fine)
    image
  1. Movile view (missing button)
    image
  • Your code

  • The paypal.version from your browser console
    4.0.173

  • The exact browser version
    Chrome: Version 63.0.3239.132 (Official Build) (32-bit)
    Edge: 38.14393.1066.0
    Firefox: 57.0.4 (64-bit)

  • A link to your page with the issue, if possible
    https://www.play-asia.com/rilakkuma-plush-tote-bag-rilakkuma/13/709i11

  • All console logs during the time of the issue, especially error messages

    ppxo_xc_ppbutton_error {error: "Error: No handler found for post message: xcompone…://www.paypalobjects.com/api/checkout.js:3080:13)", timestamp: 1516271315344, windowID: "347f4817ab", pageID: "f5bd7c116c", prev_corr_ids: "", …}

Error: No handler found for post message: xcomponent_init from https://www.paypal.com in https://www.play-asia.com/rilakkuma-plush-tote-bag-rilakkuma/13/709i11
at https://www.paypalobjects.com/api/checkout.js:3129:37
at Function.ZalgoPromise.try (https://www.paypalobjects.com/api/checkout.js:9080:37)
at Object._RECEIVE_MESSAGE_TYPE.(anonymous function) [as postrobot_message_request] (https://www.paypalobjects.com/api/checkout.js:3128:70)
at receiveMessage (https://www.paypalobjects.com/api/checkout.js:3059:77)
at messageListener (https://www.paypalobjects.com/api/checkout.js:3080:13)
at Object._RECEIVE_MESSAGE_TYPE.(anonymous function) [as postrobot_message_response] (https://www.paypalobjects.com/api/checkout.js:3160:122)
at receiveMessage (https://www.paypalobjects.com/api/checkout.js:3059:77)
at messageListener (https://www.paypalobjects.com/api/checkout.js:3080:13)

[post-robot] iframe :: www.paypal.com/webapps/hermes/button 

 #receive response :: xcomponent_init :: https://www.play-asia.com

{hash: "xcomponent_init_577d3d5ca2", name: "xcomponent_init", type: "postrobot_message_response", ack: "error", error: "No handler found for post message: xcomponent_init…://www.paypalobjects.com/api/checkout.js:3080:13)", …}

VM851 checkout.js:5061 ppxo_unhandled_error {stack: "Error: No handler found for post message: xcompone…://www.paypalobjects.com/api/checkout.js:3080:13)", errtype: "[object Error]", timestamp: 1516271315367, windowID: "347f4817ab", pageID: "f5bd7c116c", …}

[post-robot] fullpage :: www.play-asia.com/rilakkuma-plush-tote-bag-rilakkuma/13/709i11 

 #send response :: xcomponent_error :: https://www.paypal.com

{target: undefined, hash: "xcomponent_error_b19f2e0844", name: "xcomponent_error", type: "postrobot_message_response", ack: "error", …}
(anonymous) @ log.js:121
setTimeout (async)
logLevel @ log.js:90
(anonymous) @ index.js:46
ZalgoPromise.try @ promise.js:372
sendMessage @ index.js:29
respond @ types.js:43
(anonymous) @ types.js:83
(anonymous) @ promise.js:164
ZalgoPromise.dispatch @ promise.js:198
ZalgoPromise.then @ promise.js:231
_RECEIVE_MESSAGE_TYPE.(anonymous function) @ types.js:71
receiveMessage @ index.js:112
messageListener @ index.js:138
postMessage (async)
(anonymous) @ VM851 checkout.js:3248
SEND_MESSAGE_STRATEGIES.(anonymous function) @ VM851 checkout.js:3247
(anonymous) @ VM851 checkout.js:3201
ZalgoPromise.try @ VM851 checkout.js:9080
(anonymous) @ VM851 checkout.js:3199
ZalgoPromise.map @ VM851 checkout.js:9072
(anonymous) @ VM851 checkout.js:3198
ZalgoPromise.try @ VM851 checkout.js:9080
sendMessage @ VM851 checkout.js:3183
(anonymous) @ VM851 checkout.js:3918
ZalgoPromise @ VM851 checkout.js:8891
(anonymous) @ VM851 checkout.js:3901
(anonymous) @ VM851 checkout.js:8947
ZalgoPromise.dispatch @ VM851 checkout.js:8971
ZalgoPromise.then @ VM851 checkout.js:8989
(anonymous) @ VM851 checkout.js:3900
ZalgoPromise.try @ VM851 checkout.js:9080
request @ VM851 checkout.js:3874
_send @ VM851 checkout.js:3957
ChildComponent.sendToParent @ VM851 checkout.js:4866
ChildComponent.error @ VM851 checkout.js:5034
(anonymous) @ VM851 checkout.js:4788
(anonymous) @ VM851 checkout.js:8957
ZalgoPromise.dispatch @ VM851 checkout.js:8971
ZalgoPromise.reject @ VM851 checkout.js:8931
(anonymous) @ VM851 checkout.js:8953
ZalgoPromise.dispatch @ VM851 checkout.js:8971
ZalgoPromise.reject @ VM851 checkout.js:8931
(anonymous) @ VM851 checkout.js:8969
(anonymous) @ VM851 checkout.js:8957
ZalgoPromise.dispatch @ VM851 checkout.js:8971
ZalgoPromise.reject @ VM851 checkout.js:8931
(anonymous) @ VM851 checkout.js:8897
respond @ VM851 checkout.js:3913
_RECEIVE_MESSAGE_TYPE.(anonymous function) @ VM851 checkout.js:3160
receiveMessage @ VM851 checkout.js:3059
messageListener @ VM851 checkout.js:3080
postMessage (async)
(anonymous) @ strategies.js:56
SEND_MESSAGE_STRATEGIES.(anonymous function) @ strategies.js:55
(anonymous) @ index.js:72
ZalgoPromise.try @ promise.js:372
(anonymous) @ index.js:66
ZalgoPromise.map @ promise.js:359
(anonymous) @ index.js:64
ZalgoPromise.try @ promise.js:372
sendMessage @ index.js:29
respond @ types.js:43
(anonymous) @ types.js:83
(anonymous) @ promise.js:164
ZalgoPromise.dispatch @ promise.js:198
ZalgoPromise.then @ promise.js:231
_RECEIVE_MESSAGE_TYPE.(anonymous function) @ types.js:71
receiveMessage @ index.js:112
messageListener @ index.js:138
postMessage (async)
(anonymous) @ VM851 checkout.js:3248
SEND_MESSAGE_STRATEGIES.(anonymous function) @ VM851 checkout.js:3247
(anonymous) @ VM851 checkout.js:3201
ZalgoPromise.try @ VM851 checkout.js:9080
(anonymous) @ VM851 checkout.js:3199
ZalgoPromise.map @ VM851 checkout.js:9072
(anonymous) @ VM851 checkout.js:3198
ZalgoPromise.try @ VM851 checkout.js:9080
sendMessage @ VM851 checkout.js:3183
(anonymous) @ VM851 checkout.js:3918
ZalgoPromise @ VM851 checkout.js:8891
(anonymous) @ VM851 checkout.js:3901
(anonymous) @ VM851 checkout.js:8947
ZalgoPromise.dispatch @ VM851 checkout.js:8971
ZalgoPromise.then @ VM851 checkout.js:8989
(anonymous) @ VM851 checkout.js:3900
ZalgoPromise.try @ VM851 checkout.js:9080
request @ VM851 checkout.js:3874
_send @ VM851 checkout.js:3957
ChildComponent.sendToParent @ VM851 checkout.js:4866
ChildComponent @ VM851 checkout.js:4779
(anonymous) @ VM851 checkout.js:5241
ZalgoPromise.try @ VM851 checkout.js:9080
Component.registerChild @ VM851 checkout.js:5239
Component @ VM851 checkout.js:5189
create @ VM851 checkout.js:7692
./src/components/button/component.jsx @ VM851 checkout.js:9638
__webpack_require__ @ VM851 checkout.js:11
./src/components/button/hacks.js @ VM851 checkout.js:10229
__webpack_require__ @ VM851 checkout.js:11
./src/components/button/index.js @ VM851 checkout.js:10383
__webpack_require__ @ VM851 checkout.js:11
./src/components/index.js @ VM851 checkout.js:12498
__webpack_require__ @ VM851 checkout.js:11
./src/interface.js @ VM851 checkout.js:13923
__webpack_require__ @ VM851 checkout.js:11
./src/index.js @ VM851 checkout.js:13801
__webpack_require__ @ VM851 checkout.js:11
./src/load.js @ VM851 checkout.js:16151
__webpack_require__ @ VM851 checkout.js:11
a../node_modules/Base64/base64.js @ VM851 checkout.js:38
(anonymous) @ VM851 checkout.js:39

Uncaught Error: No handler found for post message: xcomponent_init from https://www.paypal.com in https://www.play-asia.com/rilakkuma-plush-tote-bag-rilakkuma/13/709i11
at https://www.paypalobjects.com/api/checkout.js:3129:37
at Function.ZalgoPromise.try (https://www.paypalobjects.com/api/checkout.js:9080:37)
at Object._RECEIVE_MESSAGE_TYPE.(anonymous function) [as postrobot_message_request] (https://www.paypalobjects.com/api/checkout.js:3128:70)
at receiveMessage (https://www.paypalobjects.com/api/checkout.js:3059:77)
at messageListener (https://www.paypalobjects.com/api/checkout.js:3080:13)
at https://www.paypalobjects.com/api/checkout.js:3129:37
at Function.ZalgoPromise.try (https://www.paypalobjects.com/api/checkout.js:9080:37)
at Object._RECEIVE_MESSAGE_TYPE.(anonymous function) [as postrobot_message_request] (https://www.paypalobjects.com/api/checkout.js:3128:70)
at receiveMessage (https://www.paypalobjects.com/api/checkout.js:3059:77)
at messageListener (https://www.paypalobjects.com/api/checkout.js:3080:13)
at Object._RECEIVE_MESSAGE_TYPE.(anonymous function) [as postrobot_message_response] (https://www.paypalobjects.com/api/checkout.js:3160:122)
at receiveMessage (https://www.paypalobjects.com/api/checkout.js:3059:77)
at messageListener (https://www.paypalobjects.com/api/checkout.js:3080:13)

[post-robot] iframe :: www.paypal.com/webapps/hermes/button 

 #receive response :: xcomponent_error :: https://www.play-asia.com

{hash: "xcomponent_error_b19f2e0844", name: "xcomponent_error", type: "postrobot_message_response", ack: "error", error: "No handler found for post message: xcomponent_erro…://www.paypalobjects.com/api/checkout.js:3080:13)", …}

ppxo_unhandled_error {stack: "Error: No handler found for post message: xcompone…://www.paypalobjects.com/api/checkout.js:3080:13)", errtype: "[object Error]", timestamp: 1516271315400, windowID: "347f4817ab", pageID: "f5bd7c116c", …}

Uncaught Error: No handler found for post message: xcomponent_error from https://www.paypal.com in https://www.play-asia.com/rilakkuma-plush-tote-bag-rilakkuma/13/709i11
at https://www.paypalobjects.com/api/checkout.js:3129:37
at Function.ZalgoPromise.try (https://www.paypalobjects.com/api/checkout.js:9080:37)
at Object._RECEIVE_MESSAGE_TYPE.(anonymous function) [as postrobot_message_request] (https://www.paypalobjects.com/api/checkout.js:3128:70)
at receiveMessage (https://www.paypalobjects.com/api/checkout.js:3059:77)
at messageListener (https://www.paypalobjects.com/api/checkout.js:3080:13)
at https://www.paypalobjects.com/api/checkout.js:3129:37
at Function.ZalgoPromise.try (https://www.paypalobjects.com/api/checkout.js:9080:37)
at Object._RECEIVE_MESSAGE_TYPE.(anonymous function) [as postrobot_message_request] (https://www.paypalobjects.com/api/checkout.js:3128:70)
at receiveMessage (https://www.paypalobjects.com/api/checkout.js:3059:77)
at messageListener (https://www.paypalobjects.com/api/checkout.js:3080:13)
at Object._RECEIVE_MESSAGE_TYPE.(anonymous function) [as postrobot_message_response] (https://www.paypalobjects.com/api/checkout.js:3160:122)
at receiveMessage (https://www.paypalobjects.com/api/checkout.js:3059:77)
at messageListener (https://www.paypalobjects.com/api/checkout.js:3080:13)

Steps to reproduce

  1. Visit the homepage - https://www.play-asia.com
  2. Click any item
  3. Change the resolution of the browser (less than 760px width). Or change the mobile device in dev tools in the browser
  4. Checkout button is disappeared

Please provide each individual step required to reproduce the issue

Affected browsers

  • [ ] Chrome
  • [ ] Safari
  • [ ] Firefox
  • [ ] Edge
  • [ ] IE
  • [x] Chrome Mobile/Tablet
  • [x] Safari Mobile/Tablet
  • [ ] Web View / Safari ViewController
  • [ ] Other

Thanks,
JinSung

outdated
Source
picture zanneee

All 7 comments

Looks like the button is being rendered, but then something is immediately removing the element from the DOM. Do you have any code which manipulates the dom container elements for the button, after the render() call?

bluepnume picture bluepnume on 18 Jan 2018

@bluepnume It's been fixed by changing related codes. Thanks for your advice!

zanneee picture zanneee on 19 Jan 2018
👎3 👍1

I have a very similar issue, could you please explain what do you mean with _"changing related codes"_ ?

zuck picture zuck on 24 Jan 2018
👍1

Have a similar problem when i put the checkout button on my liferay page.
these are the two erros I have...help plz

[post-robot] iframe :: www.sandbox.paypal.com/webapps/hermes/button 

 #receive response :: xcomponent_error :: http://localhost:8080

{hash: "xcomponent_error_7827aef562", name: "xcomponent_error", type: "postrobot_message_response", ack: "error", error: "No handler found for post message: xcomponent_erro…://www.paypalobjects.com/api/checkout.js:2880:13)", …}
window.console.(anonymous function) @ VM1675 checkout.js:4802
(anonymous) @ VM1675 checkout.js:3701
setTimeout (async)
logLevel @ VM1675 checkout.js:3688
receiveMessage @ VM1675 checkout.js:2856
messageListener @ VM1675 checkout.js:2880
postMessage (async)
(anonymous) @ strategies.js:56
SEND_MESSAGE_STRATEGIES.(anonymous function) @ strategies.js:55
(anonymous) @ index.js:72
ZalgoPromise.try @ promise.js:372
(anonymous) @ index.js:66
ZalgoPromise.map @ promise.js:359
(anonymous) @ index.js:64
ZalgoPromise.try @ promise.js:372
sendMessage @ index.js:29
respond @ types.js:43
(anonymous) @ types.js:85
(anonymous) @ promise.js:164
ZalgoPromise.dispatch @ promise.js:198
ZalgoPromise.then @ promise.js:231
_RECEIVE_MESSAGE_TYPE.(anonymous function) @ types.js:71
receiveMessage @ index.js:112
messageListener @ index.js:138
postMessage (async)
(anonymous) @ VM1675 checkout.js:3202
SEND_MESSAGE_STRATEGIES.(anonymous function) @ VM1675 checkout.js:3201
(anonymous) @ VM1675 checkout.js:2657
ZalgoPromise.try @ VM1675 checkout.js:8872
(anonymous) @ VM1675 checkout.js:2655
ZalgoPromise.map @ VM1675 checkout.js:8864
(anonymous) @ VM1675 checkout.js:2654
ZalgoPromise.try @ VM1675 checkout.js:8872
sendMessage @ VM1675 checkout.js:2640
(anonymous) @ VM1675 checkout.js:2930
ZalgoPromise @ VM1675 checkout.js:8683
(anonymous) @ VM1675 checkout.js:2913
(anonymous) @ VM1675 checkout.js:8739
ZalgoPromise.dispatch @ VM1675 checkout.js:8763
ZalgoPromise.then @ VM1675 checkout.js:8781
(anonymous) @ VM1675 checkout.js:2912
ZalgoPromise.try @ VM1675 checkout.js:8872
request @ VM1675 checkout.js:2886
_send @ VM1675 checkout.js:2969
ChildComponent.sendToParent @ VM1675 checkout.js:4607
ChildComponent.error @ VM1675 checkout.js:4775
(anonymous) @ VM1675 checkout.js:4526
(anonymous) @ VM1675 checkout.js:8749
ZalgoPromise.dispatch @ VM1675 checkout.js:8763
ZalgoPromise.reject @ VM1675 checkout.js:8723
(anonymous) @ VM1675 checkout.js:8745
ZalgoPromise.dispatch @ VM1675 checkout.js:8763
ZalgoPromise.reject @ VM1675 checkout.js:8723
(anonymous) @ VM1675 checkout.js:8761
(anonymous) @ VM1675 checkout.js:8749
ZalgoPromise.dispatch @ VM1675 checkout.js:8763
ZalgoPromise.reject @ VM1675 checkout.js:8723
(anonymous) @ VM1675 checkout.js:8689
respond @ VM1675 checkout.js:2925
_RECEIVE_MESSAGE_TYPE.(anonymous function) @ VM1675 checkout.js:3301
receiveMessage @ VM1675 checkout.js:2859
messageListener @ VM1675 checkout.js:2880
postMessage (async)
(anonymous) @ strategies.js:56
SEND_MESSAGE_STRATEGIES.(anonymous function) @ strategies.js:55
(anonymous) @ index.js:72
ZalgoPromise.try @ promise.js:372
(anonymous) @ index.js:66
ZalgoPromise.map @ promise.js:359
(anonymous) @ index.js:64
ZalgoPromise.try @ promise.js:372
sendMessage @ index.js:29
respond @ types.js:43
(anonymous) @ types.js:85
(anonymous) @ promise.js:164
ZalgoPromise.dispatch @ promise.js:198
ZalgoPromise.then @ promise.js:231
_RECEIVE_MESSAGE_TYPE.(anonymous function) @ types.js:71
receiveMessage @ index.js:112
messageListener @ index.js:138
postMessage (async)
(anonymous) @ VM1675 checkout.js:3202
SEND_MESSAGE_STRATEGIES.(anonymous function) @ VM1675 checkout.js:3201
(anonymous) @ VM1675 checkout.js:2657
ZalgoPromise.try @ VM1675 checkout.js:8872
(anonymous) @ VM1675 checkout.js:2655
ZalgoPromise.map @ VM1675 checkout.js:8864
(anonymous) @ VM1675 checkout.js:2654
ZalgoPromise.try @ VM1675 checkout.js:8872
sendMessage @ VM1675 checkout.js:2640
(anonymous) @ VM1675 checkout.js:2930
ZalgoPromise @ VM1675 checkout.js:8683
(anonymous) @ VM1675 checkout.js:2913
(anonymous) @ VM1675 checkout.js:8739
ZalgoPromise.dispatch @ VM1675 checkout.js:8763
ZalgoPromise.then @ VM1675 checkout.js:8781
(anonymous) @ VM1675 checkout.js:2912
ZalgoPromise.try @ VM1675 checkout.js:8872
request @ VM1675 checkout.js:2886
_send @ VM1675 checkout.js:2969
ChildComponent.sendToParent @ VM1675 checkout.js:4607
ChildComponent @ VM1675 checkout.js:4517
(anonymous) @ VM1675 checkout.js:5253
ZalgoPromise.try @ VM1675 checkout.js:8872
Component.registerChild @ VM1675 checkout.js:5251
Component @ VM1675 checkout.js:5201
create @ VM1675 checkout.js:7295
./src/index.js @ VM1675 checkout.js:12243
__webpack_require__ @ VM1675 checkout.js:17
./src/load.js @ VM1675 checkout.js:15396
__webpack_require__ @ VM1675 checkout.js:17
0 @ VM1675 checkout.js:15492
__webpack_require__ @ VM1675 checkout.js:17
a../node_modules/Base64/base64.js @ VM1675 checkout.js:53
(anonymous) @ VM1675 checkout.js:54
VM1675 checkout.js:4802 ppxo_unhandled_error {stack: "Error: No handler found for post message: xcompone…://www.paypalobjects.com/api/checkout.js:2880:13)", errtype: "[object Error]", timestamp: 1518794021086, windowID: "6d88a31542", pageID: "5a811bb53a", …}

Andrelima92 picture Andrelima92 on 16 Feb 2018

@zanneee Hey man, how did you fix this issue?

abutizi picture abutizi on 3 Jul 2018

@zanneee Yeah I'd like to know as well. Please help.

daneloctober picture daneloctober on 27 Aug 2018

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

github-actions[bot] picture github-actions[bot] on 14 Dec 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

MrMooky picture MrMooky  Â·  3Comments
domtripodi picture domtripodi  Â·  5Comments
stevedeighton picture stevedeighton  Â·  6Comments
VivekVikranth picture VivekVikranth  Â·  6Comments
Warix3 picture Warix3  Â·  4Comments