Trigger PayPal checkout button click

Question

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

score 15 · Accepted Answer · answered Apr 09 '17 at 23:05

15

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.

answered Apr 09 '17 at 23:05

bluepnume

16,460
8
38
48

Thank you. Is there any other way to achieve this? Doesn't this PayPal Javascript API provide any other way to register event handlers? Or is there any other best practices of use of paypal checkout button to keep user friendlieness? – Arsen Alexanyan Apr 14 '17 at 16:23
I am choosing this as the right answer, because there weren't any other suggestions. – Arsen Alexanyan Apr 16 '17 at 06:18
Given this is all JS and HTML it's a lie to say it's not supported. You could say it's not officially supported because paypal wants to force it's spyware and branding on you but given the users host the site and control the JS it is possible, you just don't want to help do it. – Ryan Hamilton Oct 15 '17 at 18:02
5

It's literally not supported. You can't programmatically send a message to an iframe (in this case, the paypal button) and have it open a popup window -- because that makes the `window.open` asynchronous (not immediately on the button click) and causes browsers' popup blockers to prevent it. Why even have an iframe? Well, aside from allowing us to present a pixel perfect button, it also solves a nasty problem in IE where you literally can't send messages between a popup and a parent window on different domains. So it ends up being the least hacky way to ensure everything works seamlessly. – bluepnume Oct 15 '17 at 19:05

score 7 · Answer 2 · answered Mar 26 '18 at 17:42

7

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.

answered Mar 26 '18 at 17:42

Danil

176
2
6

Can you add a code snippet for clarity please? – Mattia Rasulo Aug 26 '22 at 16:27

score 1 · Answer 3 · answered Jun 10 '17 at 23:24

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.

score 0 · Answer 4 · answered Nov 21 '20 at 06:24

First of it need to clear what you are using.

Checkout js then checkout with checkout.js. Valid before February 2019.
JavaScript sdk then there is no official announcement from paypal, if anyone do reverse engineering then would be possible. It's literally not supported. You can't programmatically click on paypal button.

Please visit for more clarification: https://github.com/paypal/paypal-checkout-components/issues/512

Trigger PayPal checkout button click

4 Answers4

Linked