PayPal checkout.js Integration

The Order API lets eBay guests pay for items with or without having a PayPal account without leaving your site. This flow requires Partners to integrate with PayPal's checkout.js JavaScript. This document provides an example of the code that pays for items using the PayPal Checkout flow.

REST based code for Sandbox

The code for Sandbox is the same as for Production except the value for data-stage-url is ebayqe.stage.paypal.com.

 

REST based code for Production

<!DOCTYPE html> 
<head>
  <script src="https://www.paypalobjects.com/api/checkout.js" data-stage="www.paypal.com"></script>  
</head> 
<body> 

 <!-- Call eBay's initiateGuestCheckoutSession method to start the checkout session and specify the items, buyer info, and shipping address.
      Call eBay's initiateGuestPayment method to set the payment to PayPal checkout and retrieve the PayPal cart ID.  -->

  <!-- Store the PayPal cart ID.
       For example: -->
  <div id='paypalCartIdDiv' style="display:none"><%= paypalCartId %></div>

  <!-- Store the checkout session ID. 
       For example: -->
  <div id='checkoutSessionDiv' style="display:none"><%= checkoutSessionId %></div>

 
  <!-- Put PayPal-button here. -->
  <div id="paypal-button"></div>
  
  <script> 
    paypal.Button.render({ env: 'sandbox', // Or 'production', 
    locale: 'de_DE', style: { fundingicons: true, size: 'small', shape: 'rect', color: 'gold' }, funding: {
    allowed: [paypal.FUNDING.CARD,paypal.FUNDING.ELV] },
    payment: function(data, actions) {

      //This function is called when the PayPal button is clicked.  
      return $('#paypalCartIdDiv').text(); //


      }, onAuthorize: function(data, actions) {
       // This function is called after the buyer finishes the PayPal flow to authorize the payment
       // Paypal payer ID is returned in data.payerID

       // Send eBay checkout session ID and PayPal payer ID to eBay's updateGuestPaymentInfo to update the checkout session with the Payer ID.
       // Send eBay checkout session ID to placeOrder to submit the payment.
       // For example:
        var redirectUrl = '.../placeorder?payerId=' +  data.payerID + '&checkoutSessionId='+$('#checkoutSessionDiv').text();
        return actions.redirect(window,redirectUrl);

    }, onCancel: function(data, actions) { /* * Buyer cancelled the payment */ 
       // Set Cancel URL. 
       var cancelRedirectUrl = "<your_cancel_page>";
       return actions.redirect(window,cancelRedirectUrl );
    }, onError: function(err) { /* * An error occurred during the transaction */
       // Set error URL. 
       var errorRedirectUrl = "<your_error_page>";
       return actions.redirect(window,errorRedirectUrl );
    } }, '#paypal-button');
  </script>
</body>
</html>