Menu
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
368
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.
88
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.
20
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.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
