PayPal Smart Button

Overview

PayPal Checkout (formerly called Express Checkout) gives buyers a simplified and secure checkout experience that keeps them in the store website or mobile app throughout the payment process. PayPal Checkout's Smart Payment Buttons present shoppers with the most relevant online payment methods. On almost any device, customers can be given the option to pay with PayPal, Venmo, PayPal Credit, and major credit cards and debit cards. When customers use PayPal Checkout, they can skip online forms and complete their checkout in just a few taps. Customers can start the checkout process on the product page or on the shopping cart page. PayPal passes customer contact and shipping details to the webstore, so buyers can check out without needing to type this information into forms on the webstore.

Flow Diagram

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

Happy Path Flow

Order Cancellation Flow

Client Integration

To integrate PayPal Smart Payment Buttons to set up and execute payments directly from your browser, complete the following steps. More information can be found at the PayPal Developer Site.

  1. Use 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 the following script to store web page.

    
    <script> src="https://www.paypalobjects.com/api/checkout.js"</script>
    			
  2. Add the PayPal Render component, which renders a PayPal button on your page. The button takes care of opening up PayPal and guiding the customer through the payment process. The render component's functions include payment, onAuthorize, onCancel, and onError. You will set up the payment by modifying the payment function and execute the payment by modifying the onAuthorize function.

      // 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');
  3. Set up payment:

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

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

    The onAuthorize function is called after a customer logs in and clicks on the Pay Now button to authorize the payment. Either of the following implementations can be used to modify onAuthorize function.

    • After the customer authorizes the payment, it is recommended to redirect the customer to a Return URL which is specified in the Set Express API call by using the code snippet below.

          onAuthorize: function (data, actions) {
              // Redirect to return url specified in set_express call
              return actions.redirect();
          }
    • After the customer authorizes the payment, they can be redirected to a custom store-specific confirmation page by modifying the onAuthorize function, as in the example code snippet below.

        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
                    });
                });
            });
         }      
  5. Cancel the payment:

    A customer who cancels the payment is redirected to the Cancel URL that has been passed in Radial's SetExpress Request API. To handle cancellation and errors, use:

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