title: Trigger PayPal checkout button click
body: <p>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:
  <a href="https://i.stack.imgur.com/mpitV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mpitV.png" alt="enter image description here"></a></p>
  
  <p>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?</p>
  
  <p>Here is the HTML code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://www.paypalobjects.com/api/checkout.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="paypal.js"&gt;
  
      &lt;/script&gt;
      &lt;body&gt;
          &lt;div&gt;
          &lt;span style="vertical-align: 50%"&gt;&lt;input id="rd" name="aaa" type="radio"/&gt;&lt;/span&gt;
          &lt;div id="paypal-button-container" style="display: inline-block"&gt;&lt;/div&gt;&lt;hr/&gt;
          &lt;input id="rd1" name="aaa" type="radio"/&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And Javascript code:</p>
  
  <pre><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');
  });
  </code></pre>
  
  <p>EDIT: As a working example I would suggest this site, but this is little bit different what I need <a href="https://developer.paypal.com/demo/checkout/#/pattern/mark" rel="noreferrer">https://developer.paypal.com/demo/checkout/#/pattern/mark</a></p>