Paypal-checkout-components: Polymer support
I try the demo in a clean html file, all work well.
But if i let pay.Button work with Polymer component, it can't complete the whole process.
It redirects to paypal profile page when i tap continue button.
Here is the component code:
<dom-module id="my-pay">
...
<div id="paypal"></div>
...
class MyPay extends Polymer.Element {
static get is() { return 'my-pay'; }
...
initPay(){
var self = this;
setTimeout(() => {
paypal.Button.render({
env: 'sandbox',
commit: true, // Show a 'Pay Now' button
style: {
color: 'silver',
shape: 'rect',
},
client: {
sandbox: '...',
production: '...',
},
payment: function() {
console.log(self.amount);
return paypal.rest.payment.create(this.props.env, this.props.client, {
transactions: [{
amount: { total: self.amount, currency: 'USD' },
}],
});
},
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function(payment) {
console.log("ok")
});
},
}, self.shadowRoot.querySelector('#paypal'));
}, 500);
}
}
</dom-module>
txthinking
All 15 comments
Hey, thanks for the report! This is a strange issue -- looks like the popup isn't correctly identifying itself as a popup. Do you have the code hosted somewhere so I can try to repro?
bluepnume
on 22 May 2017
First thanks for your reply.
Here is a online demo(sandbox): [Removed]
And sometimes it may not works well, if you open console now, you will see some 401 or 400 responses, if you refresh page times, it may works. (This is another bug?)
Here is one 401 request:
POST /v1/payments/payment HTTP/1.1
Host: www.sandbox.paypal.com
Connection: keep-alive
Content-Length: 289
Pragma: no-cache
Cache-Control: no-cache
authorization: Bearer A21AAF4yUnevy0BldwIvSoUe-to_r3Jsb77sOo0hWLDMmNRcGzbQyWdhj-lbji8CXoAy5aEmfQ2UKKM_8k_6chocKF8-gKr0g
Origin: https://www.sandbox.paypal.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
content-type: application/json
accept: application/json
DNT: 1
Referer: https://www.sandbox.paypal.com/webapps/hermes/button?env=sandbox&style.color=silver&style.shape=rect&version=4.0.75&uid=923db47b54&locale.x=zh_CN&xcomponent=1
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.6,en;q=0.4
Cookie: nsid=s%3A73QITx8XfZ829S8fdKlNppTGoLEe11yl.FluzE2bDcD9h9OLhqD%2Bpw5zzEurr5fLzuMbKSBffRXI; LANG=zh_XC%3BUS; x-csrf-jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbiI6ImJPd1QzTDlfanI3NFN2YWs4UUxEMER1ZGU3YkFhbmI0b3hqS0lYdWtTaVZMNTRaZkpZeWVpcTI4WC15dGpnSzZCRVRsaE1ScEVIUDg5MGFHRmNjM09oMXhlQUxGazZFU3FXVy13Z1hXa1ZHT3IzS21ZZlBwRmttTnlCeElaRHZmbEdsZ2wwaFZzb3RacF9na3BxeXJZVXRqbVhtblljOTRGaUpGN3JlSnJZSDh6TVo2eEYtblpxODFrVVciLCJpYXQiOjE0OTU0OTc0OTEsImV4cCI6MTQ5NTUwMTA5MX0.wO1IueoQz8enBeQCVzAVIiBZkcTkBbCaE4Bh9_pKn7Y; X-PP-SILOVER=name%3DSANDBOX3.WEB.1%26silo_version%3D1880%26app%3Dplatformapiserv_web%26TIME%3D377168729%26HTTP_X_PP_AZ_LOCATOR%3Dslcb.slc
{"transactions":[{"amount":{"total":"9.99","currency":"USD"},"custom":"123456789"}],"note_to_payer":"Brook One Key: 123456789","intent":"sale","redirect_urls":{"return_url":"https://www.sandbox.paypal.com","cancel_url":"https://www.sandbox.paypal.com"},"payer":{"payment_method":"paypal"}}
HTTP/1.1 401 Unauthorized
Date: Mon, 22 May 2017 23:58:14 GMT
Server: Apache
paypal-debug-id: 2d10b7bb6fb8e
Paypal-Debug-Id: 2d10b7bb6fb8e
Set-Cookie: X-PP-SILOVER=name%3DSANDBOX3.WEB.1%26silo_version%3D1880%26app%3Dplatformapiserv_web%26TIME%3D377168729%26HTTP_X_PP_AZ_LOCATOR%3Dslcb.slc; Expires=Tue, 23 May 2017 00:28:14 GMT; domain=.paypal.com; path=/; Secure; HttpOnly
Set-Cookie: X-PP-SILOVER=; Expires=Thu, 01 Jan 1970 00:00:01 GMT
Vary: Authorization,Accept-Encoding
Content-Encoding: gzip
Strict-Transport-Security: max-age=14400
Keep-Alive: timeout=5, max=99
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html
and the console output:
checkout.4.0.75.js:4250 ppxo_xc_ppcheckout_error Object {error: "Error: Request to post https://www.sandbox.paypal.鈥aypalobjects.com/api/checkout.4.0.75.js:1969:13)", timestamp: 1495497736282, windowID: "84a5bb3bca", pageID: "125dc51bed", referer: "https://dev-brook.txthinking.com"鈥
Error: Request to post https://www.sandbox.paypal.com/v1/payments/payment failed with 401 error
Error: Request to post https://www.sandbox.paypal.com/v1/payments/payment failed with 401 error
at XMLHttpRequest.<anonymous> (https://www.paypalobjects.com/api/checkout.4.0.75.js:10960:39)
Error: Request to post https://www.sandbox.paypal.com/v1/payments/payment failed with 401 error
Error: Request to post https://www.sandbox.paypal.com/v1/payments/payment failed with 401 error
at XMLHttpRequest.<anonymous> (https://www.paypalobjects.com/api/checkout.4.0.75.js:10960:39)
at Object._RECEIVE_MESSAGE_TYPE.(anonymous function) [as postrobot_message_response] (https://www.paypalobjects.com/api/checkout.js:2041:118)
at receiveMessage (https://www.paypalobjects.com/api/checkout.js:1949:73)
at messageListener (https://www.paypalobjects.com/api/checkout.js:1969:13)
at Object._RECEIVE_MESSAGE_TYPE.(anonymous function) [as postrobot_message_response] (https://www.paypalobjects.com/api/checkout.4.0.75.js:2041:118)
at receiveMessage (https://www.paypalobjects.com/api/checkout.4.0.75.js:1949:73)
at messageListener (https://www.paypalobjects.com/api/checkout.4.0.75.js:1969:13)
__webpack_require__.i.window.console.window.console.(anonymous function) @ checkout.4.0.75.js:4250
print @ checkout.4.0.75.js:307
log @ checkout.4.0.75.js:401
error @ checkout.4.0.75.js:436
error @ checkout.4.0.75.js:7452
Component.logError @ checkout.4.0.75.js:4616
(anonymous) @ checkout.4.0.75.js:5844
(anonymous) @ checkout.4.0.75.js:3662
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.then @ checkout.4.0.75.js:3690
SyncPromise.try @ checkout.4.0.75.js:3724
ParentComponent.error @ checkout.4.0.75.js:5843
(anonymous) @ checkout.4.0.75.js:6657
(anonymous) @ checkout.4.0.75.js:3662
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.then @ checkout.4.0.75.js:3690
SyncPromise.try @ checkout.4.0.75.js:3724
descriptor.value @ checkout.4.0.75.js:6656
(anonymous) @ checkout.4.0.75.js:5228
(anonymous) @ checkout.4.0.75.js:3662
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:5832
(anonymous) @ checkout.4.0.75.js:3662
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3675
(anonymous) @ checkout.4.0.75.js:3662
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3672
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3714
(anonymous) @ checkout.4.0.75.js:3662
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3672
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3672
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3672
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3714
(anonymous) @ checkout.4.0.75.js:3662
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3672
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3672
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3714
(anonymous) @ checkout.4.0.75.js:3662
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3672
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3672
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3714
(anonymous) @ checkout.4.0.75.js:3662
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3672
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3675
(anonymous) @ checkout.4.0.75.js:3662
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3672
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3672
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3625
flush @ checkout.4.0.75.js:3545
(anonymous) @ checkout.4.0.75.js:3558
(anonymous) @ checkout.4.0.75.js:3662
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3672
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3675
(anonymous) @ checkout.4.0.75.js:3662
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3675
(anonymous) @ checkout.4.0.75.js:3662
SyncPromise.dispatch @ checkout.4.0.75.js:3677
SyncPromise.reject @ checkout.4.0.75.js:3649
(anonymous) @ checkout.4.0.75.js:3625
flush @ checkout.4.0.75.js:3545
(anonymous) @ checkout.4.0.75.js:3558
options.respond @ checkout.4.0.75.js:3304
_RECEIVE_MESSAGE_TYPE.(anonymous function) @ checkout.4.0.75.js:2041
receiveMessage @ checkout.4.0.75.js:1949
messageListener @ checkout.4.0.75.js:1969
checkout.4.0.75.js:2041 Uncaught Error: Request to post https://www.sandbox.paypal.com/v1/payments/payment failed with 401 error
Error: Request to post https://www.sandbox.paypal.com/v1/payments/payment failed with 401 error
at XMLHttpRequest.<anonymous> (https://www.paypalobjects.com/api/checkout.4.0.75.js:10960:39)
Error: Request to post https://www.sandbox.paypal.com/v1/payments/payment failed with 401 error
Error: Request to post https://www.sandbox.paypal.com/v1/payments/payment failed with 401 error
at XMLHttpRequest.<anonymous> (https://www.paypalobjects.com/api/checkout.4.0.75.js:10960:39)
at Object._RECEIVE_MESSAGE_TYPE.(anonymous function) [as postrobot_message_response] (https://www.paypalobjects.com/api/checkout.js:2041:118)
at receiveMessage (https://www.paypalobjects.com/api/checkout.js:1949:73)
at messageListener (https://www.paypalobjects.com/api/checkout.js:1969:13)
at XMLHttpRequest.<anonymous> (https://www.paypalobjects.com/api/checkout.4.0.75.js:10960:39)
Error: Request to post https://www.sandbox.paypal.com/v1/payments/payment failed with 401 error
Error: Request to post https://www.sandbox.paypal.com/v1/payments/payment failed with 401 error
at XMLHttpRequest.<anonymous> (https://www.paypalobjects.com/api/checkout.4.0.75.js:10960:39)
at Object._RECEIVE_MESSAGE_TYPE.(anonymous function) [as postrobot_message_response] (https://www.paypalobjects.com/api/checkout.js:2041:118)
at receiveMessage (https://www.paypalobjects.com/api/checkout.js:1949:73)
at messageListener (https://www.paypalobjects.com/api/checkout.js:1969:13)
at Object._RECEIVE_MESSAGE_TYPE.(anonymous function) [as postrobot_message_response] (https://www.paypalobjects.com/api/checkout.4.0.75.js:2041:118)
at receiveMessage (https://www.paypalobjects.com/api/checkout.4.0.75.js:1949:73)
at messageListener (https://www.paypalobjects.com/api/checkout.4.0.75.js:1969:13)
Thanks for the demo link!
Yeah the 400/401 errors are hitting me too. There's a problem with one of the auth services on sandbox, I'm trying to track down the right team to fix it. I'd recommend testing in production mode for now.
bluepnume
on 23 May 2017
Seems like this is happening because the button iframe is being rendered into the shadow dom -- https://www.polymer-project.org/2.0/docs/devguide/shadow-dom
So the iframe loads, but then the child window can't find a reference to it.
Still not sure what the fix would be. I'll keep looking into it.
bluepnume
on 23 May 2017
We have to remove PayPal as payment method to use Shadow Dom. =/
andrew-silva-movile
on 18 Jun 2017
We have the same problem : "the iframe loads, but then the child window can't find a reference to it."
The popup open correctly. But after the payment, rather than calling onAuthorize(), there is a redirection to the returnUrl in the pop window.
javamaniac
on 11 Jul 2017
Could you estimate when this gonna be handled?
How much work does it take?
What needs to be done?
xliiv
on 29 Sep 2017
Or is there any other Polymer Supported PayPal API out there that you guys can recommend?
atifwaqar
on 7 Oct 2017
I switched to old PayPal button because I could.
It's just a regular native form.
Note about this relation:
- PayPal buttons IMPLIES IPN
- Express Checkout IMPLIES webhooks
xliiv
on 8 Oct 2017
@txthinking I was trying add the <div id="paypalbtn"> in the dom template, then in the connectedCallback method I was adding the paypal button render to the div "paypalbtn". I think my scripts was similar to your scripts, but I got the error and the paypal button never appears on the page :
Uncaught Error: WeakMap expected key
at CrossDomainSafeWeakMap.get (weakmap.js:126)
at Object.linkUrl
What do you think the cause of error?
Then, I changed the plan to be element cloning. Here I add <div id="paypalbtn"> inside
And then, I added the paypal button render on connectedCallback of the shadow dom element :
` paypal.Button.render({
env: 'sandbox', // sandbox | production
client: {
sandbox: '...'
},
commit: true,
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '50.01', currency: 'AUD' }
}
]
}
});
},
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function() {
window.alert('Payment Complete!');
});
}
}, "#paypalbtn");
`
There was a delay time lines using setTimeout for element cloning, below :
let payClone = document.createElement("div"),self=this;
setTimeout(function(){
let payBtn = document.querySelector("#paypalbtn");
payClone.innerHTML = payBtn.innerHTML;
document.body.removeChild(payBtn);
payClone.setAttribute("id","paypalbtn");
payClone.style.visibility = "visible";
self.shadowRoot.appendChild(payClone)
},5000)
Here, the paypal button appears on the page of the shadow dom element. But it shows the new error :
Error: No handler found for post message: xcomponent_init from https://www.sandbox.paypal.com in http://localhost:8000/checkout
at https://www.paypalobjects.com/api/checkout.js:2833:37
And also, if I click the button the new popup appear and close directly in a few microsecond..
Do you think clone plan will work here? I still can't found any other solution to work with Client Side REST API on polymer 2.
mahdiridho
on 30 Oct 2017
We are also after a polymer solution for paypal buttons.
I notice this issue is pretty old now ... anyone @ paypal planning to do something about it ?
flatmax
on 31 Oct 2017
I created a workaround. This component renders the button inside an iframe (so outside of shadowdom) and communicates responses back via post-message, for more infos see the readme.
morbidick
on 2 Nov 2017
the component stopped working, after you add the user and the password, it stays in the login padlock.
tovileo
on 15 May 2019
@tovileo are you talking about the webcomponent wrapper? If so would you mind opening an issue at the project directly and adding a little more info, or even a reproduction? Thank you :)
morbidick
on 18 May 2019
FYI, this commit enables support for shadow-dom/slots: https://github.com/krakenjs/zoid/commit/53cc6e3980478ecc20fd2561449e1303e9c490e5
So next version we push of this sdk should work for shadow dom integrations.
bluepnume
on 6 Mar 2020
Related issues
mtshare
路
5Comments
webdeb
路
3Comments
stevedeighton
路
6Comments
PhilibertDugas
路
5Comments
Wr4i7h
路
4Comments
Most helpful comment
Could you estimate when this gonna be handled?
How much work does it take?
What needs to be done?