Skip to main content
Rate this article:

PayPal Express Checkout gives your customer a simplified checkout experience replacing the classic full page redirect flow. Using this type of Checkout, your customer never has to leave your website and the checkout  experience is much more enhanced and easy for the customer to use.

On desktops, the PayPal payment flow takes place in a secure window that opens in front of the merchant website, while on small-screen devices (tablets and smartphones) the PayPal payment screens are optimized for full-page mode.

Express Checkout flow offers a streamlined checkout flow that keeps customers local to your website throughout the payment authorization process. The redesigned checkout experience presents PayPal screens in a secure overlay window that sits atop your webpage, providing a more natural and user-friendly checkout experience.

Checkout flow

Checkout flow

The following breaks down the checkout steps in the previous figure:

  1. The buyer chooses to checkout with PayPal and clicks on the button.
  2. The buyer logs in to PayPal in a secure window that overlays your website.
  3. The buyer also authorizes the payment in the secure window.
  4. PayPal returns the buyer to your website to review the charges and transaction details on your confirmation page.

Integration Steps

Prerequisites

  1. An Onboarded Payment Provider Contract
  2. PayPal Merchant Id
  3. Valid JWT Token

Add the Buttons

Add Smart Payment Buttons to your website. This integration guide helps you:

  • Render the PayPal Smart Payment Buttons
  • Set up a one-time transaction and immediately capture the funds into your account
  • Test the button and take it live on your site

Set Up Your Development Environment

  1. Get the Payment Provider Contract Id to be used while calling the APIs. Make sure it is onboarded with PayPal.
  2. Get your PayPal Merchant Id to be used with the SDK
  3. Get the ClientId to be used with the SDK

Add the PayPal JavaScript SDK to your web page

When you the above details available with you, the next step is to add the PayPal JavaScript SDK on your page.

Include the PayPal JavaScript SDK on the page hosting the PayPal button, then add your sandbox client-id to the script tag. Do not download a local copy. Use the full PayPal URL for the JavaScript file as follows:

<!DOCTYPE html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Optimal Internet Explorer compatibility -->
</head>

<body>
  <script
    src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&merchant-id=YOUR_MERCHANT_ID"> // Required. Replace YOUR_CLIENT_ID with your client ID  and YOUR_MERCHANT_ID with your PayPal merchantId
  </script>
</body>

To streamline the integration, the PayPal JavaScript SDK uses default values for parameters you don't pass. Depending on how you want your integration to work, you might want to override these default values by explicitly passing a different value. A few common parameters you might override:

  • currency - The PayPal JavaScript SDK defaults to USD.
  • intent - The PayPal JavaScript SDK defaults to capture, which results in the capturing the funds immediately. If you want to authorize funds immediately but capture the funds later, you have to explicitly pass authorize as the intent for the transaction.

 Learn more about valid values for parameters you can pass to the PayPal JavaScript SDK at Customize the PayPal JavaScript SDK Script

Render the Smart Payment Buttons

Render the PayPal Smart Payment Buttons to a container element on your web page.

<body>
  <script
    src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"> // Required. Replace YOUR_CLIENT_ID with your client ID.
  </script>

  <div id="paypal-button-container"></div>

  <script>
    paypal.Buttons().render('#paypal-button-container');
    // This function displays Smart Payment Buttons on your web page.
  </script>
</body>

 

Set up the transaction

Implement the createOrder function, which is called when the buyer clicks the PayPal button. This step:

  • Calls your server to set up the details of a one-time transaction, including the amount, line item details, and more.
  • Launches the PayPal Checkout window so the buyer can log in and approve the transaction on paypal.com.

For the list of parameters you can pass to the server  to set up the transaction, and example responses, see Create PayPal Transaction.

<script>
    paypal.Buttons({
        createOrder: function () {
            // replace the below URL with your own server URL
            return fetch('/my-server/create-paypal-transaction', {
                method: 'post',
                headers: {
                    'content-type': 'application/json',
                },
            })
                .then(function (res) {
                    return res.json();
                })
                .then(function (data) {
                    return data.orderId;
                });
        },
    })
        .render('#paypal-button-container');
</script>

In the Create Transaction API request, you need to pass line items to make sure the buyers can see the amount while completing the checkout at PayPal. The total amount of the transaction will not be displayed in the PayPal screen if line items are not passed. This is also a recommended and ideal way of implementing Express Checkout.

This is how the line items show up in the user interface.

 

Line Items

Now your client and server are set up to call the PayPal Orders API to create a transaction.

Once on the PayPal payment page, the buyer does the following:

  • Logs into PayPal.
  • Selects shipping and a funding source.
  • Continues the transaction and returns to your site.

Capture the transaction

Implement the onApprove function, which is called after the buyer approves the transaction on paypal.com. This function:

  • Calls your server to capture the funds from the transaction.
  • Shows a message to the buyer to let them know the transaction is successful.
onApprove: function() {
  return fetch('/my-server/capture-paypal-transaction', {
    headers: {
      'content-type': 'application/json'
    },
    body: JSON.stringify({
      transactionId: transactionId // transactionId is available as id in the create transaction response
    })
  }).then(function(res) {
    return res.json();
  }).then(function(details) {
    alert('Transaction funds captured');
  })
}

 

Test the integration

To test your buttons, complete these steps.

Run test transactions
  1. Create a new sandbox test account.
  2. Click the Smart Payment Buttons.
  3. Log in to PayPal using the test buyer account you created.
  4. Complete a transaction.
Verify test transactions

Verify your test transactions from both the merchant's and buyer's perspective:

  1. Log in to the sandbox using your sandbox merchant account to confirm that the funds have been received (minus any processing fees).

Merchant Summary

2. Log in to the sandbox using your sandbox buyer account to confirm that the funds have been sent.

Buyer Summary

 

Optional:

Authorize the transaction

If you have created the transaction using the intent as AUTHORIZE, then you would need to authorize the transaction instead of capturing. So, you would have to change the onApprove function to:

onApprove: function() {
  return fetch('/my-server/authorize-paypal-transaction', {
    headers: {
      'content-type': 'application/json'
    },
    body: JSON.stringify({
      transactionId: transactionId // transactionId is available as id in the create transaction response
    })
  }).then(function(res) {
    return res.json();
  }).then(function(details) {
    alert('Transaction funds authorized');
  })
}

 

 

Rate this article:
Logo of Verifone