{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Ridiculous、 的问题《Trigger PayPal checkout button click》','https://www.manongdao.com/q-1271474.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
How can I trigger PayPal Checkout button click?
We have a website were beside the Credit Cards we are going to accept also PayPal payments and I have decided to put radio buttons for the customers to choose which way the customer is going to pay and also PayPal Checkout button:
PayPal Checkout button click itself opens the PayPal secure window and the rest works fine. When customer click the 1st radio button I want again open PayPal secure window i.e. trigger click on PayPal checkout button. How can I do that if the button itself appearing in iframe and I am not able to trigger click event of that button cross domain? Is there any way to trigger checkout button click?
Here is the HTML code:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script type="text/javascript" src="paypal.js">
</script>
<body>
<div>
<span style="vertical-align: 50%"><input id="rd" name="aaa" type="radio"/></span>
<div id="paypal-button-container" style="display: inline-block"></div><hr/>
<input id="rd1" name="aaa" type="radio"/>
</div>
</body>
</html>
And Javascript code:
// paypal.js
// Render the PayPal button
$(function(){
paypal.Button.render({
// Set your environment
//TODO: Dynamically provide sandbox or production
env: 'sandbox', // sandbox | production
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
//TODO: Dynamically provide clientID
client: {
sandbox: 'ZZZZZZ',
production: '//TODO: Provide this later'
},
// Wait for the PayPal button to be clicked
payment: function() {
// Make a client-side call to the REST api to create the payment
return paypal.rest.payment.create(this.props.env, this.props.client, {
transactions: [
{
amount: { total: '13.10', currency: 'USD' }
}
]
});
},
// Wait for the payment to be authorized by the customer
onAuthorize: function(data, actions) {
return actions.payment.get().then(function(paymentData) {
$('#paypal-button-container').style.display = 'none'; //hide button
//TODO: Show user payment details
//TODO: Create input hidden fields and set payerID, paymentID, etc..for later authoriza/capture
});
},
onClick: function(){
$('#rd').trigger('click');
},
}, '#paypal-button-container');
});
EDIT: As a working example I would suggest this site, but this is little bit different what I need https://developer.paypal.com/demo/checkout/#/pattern/mark
I guess I am a little bit late, but I hope this will help people who faced this problem, just like me.
You can set paypal's button opacity to 0 and put it over your own checkout button. Then you can set it's display to 'none' or 'block' depending on radio button value.
In my case, I just wanted to use a completely customized button for space reasons. In the end, I hid the paypal button until it on mouse over wrapped in an overflow:hidden div. It looks ok - like a square paypal button without left/right padding..
Background: Paypal's current express checkout documentation says they only support buttons at 80px minimum size, but playing with CSS, seems like the real minimimum on desktop is appx 120px wide.
This isn't something that's supported by the PayPal button right now. The official policy is, only a click on the button itself should open a checkout window.