PayPal Smart Button (Deprecated by PayPal)

Overview

Note: The integration described on this page is deprecated by PayPal. For PayPal Integration, please see PayPal SDK JavaScript Smart Button.

PayPal Checkout (formerly called Express Checkout) gives buyers a simplified and secure checkout experience that keeps them local to store website or mobile app throughout the payment process. PayPal Checkout comes with a Smart Payment Buttons feature that presents shoppers with the most relevant online payment methods. With this integration, shoppers can pay withPayPal, Venmo, PayPal Credit, and major credit cards and debit cards on almost any device. When shoppers use PayPal Checkout, they can skip online forms and complete their checkout in just a few taps. Shoppers can start the checkout process on the product page or shopping cart page. PayPal passes customer contact and shipping details to the store site so shoppers can check out without needing to complete forms on store site.

Flow Diagram

The following flow diagrams show the system interactions that occur between a Customer Browser, Checkout.js, Merchant Server, Radial and PayPal.

Happy Path Flow

Order Cancellation Flow

Client Integration

Below are the steps to integrate PayPal Smart Payment Button to set up and execute payments directly from your browser. More information can be found at PayPal Developer Site

1. Import the checkout.js JavaScript Code

• To integrate PayPal Checkout, import checkout.js JavaScript code. This code always keeps you current with the latest button styles and payment features from PayPal. Add below script to store web page.

        <script> src="https://www.paypalobjects.com/api/checkout.js"</script>
        

• Render the checkout button on the store web page using the PayPal Render Component. This component renders a PayPal button onto your page, which opens PayPal and guides the shopper through the payment process. The Render Component has functions like payment, onAuthorize, onCancel, onError. The first step is to set up the payment by modifying payment function and the second step is to execute the payment by modifying onAuthorize function.

  Copy

          // Render the PayPal button
          paypal.Button.render({
              // Set your environment
              // Specify the style of the button
              payment: function (data, actions) {
  
              },
              onAuthorize: function (data, actions) {
  
              },
              onCancel: function (data, actions) {
  
              },
              onError: function (err) {
  
              }
          }, '#container-name');
          

2. Set Up Payment

• The payment function is called when the shopper clicks the PayPal button. Modify this function to make either a client or webstore call to Radial's PayPal SetExpress API and retrieve EC-Token from the SetExpress Response. It is critical to return only this EC-Token value in the payment function.

  Copy

          payment: function (data, actions) {
              //Set Express Call
              return paypal.request.post('<http:webstore.com/setexpress>', {
                  headers: {}
              }).then(function (response) {
                  return response.token;
              });
          }
          

3. Execute the Payment

• The onAuthorize function is called after shopper logs in and clicks on Pay Now button to authorize the payment.

• Either of the following implementation paths can be followed to modify onAuthorize function.

• After the shopper authorizes the payment, redirect the buyer to the Return URL specified in the Set Express API call by using the following code snippet. (Recommended.)

• Copy

                  onAuthorize: function (data, actions) {
                      // Redirect to return url specified in set_express call
                      return actions.redirect();
                  }
                  

• After the shopper authorizes the payment, they can also be redirected to a custom store-specific confirmation page by modifying the onAuthorize function. A sample code snippet follows

  Copy

                  onAuthorize: function (data, actions) {
                      // Get the payment details
                      return actions.payment.get()
                          .then(function (paymentDetails) {
                              // Show a confirmation using the details from paymentDetails
                              // Then listen for a click on your confirm button
                              document.querySelector('#confirm-button')
                                  .addEventListener('click', function () {
                                      // Execute the payment
                                      return actions.payment.execute()
                                          .then(function () {
                                              // Show a success page to the buyer
                                          });
                                  });
                          });
                  }
                  

4. Cancel the Payment

• If the shopper cancels the payment, they are redirected to the Cancel URL passed in the Radial's Set Express Request API. To handle cancellation and errors, use the following code.

  Copy

          onCancel: function (data, actions) {
              // Redirect to cancel url specified in set_express call
              return actions.redirect();
          },
          onError: function (err) {
              // log the error
          }