PayPal Smart Buttons | How To Create Payment Checkouts

PayPal Smart Payment Buttons are website payment tools that give your buyers a simplified and secure checkout experience. Automatically, PayPal intelligently presents the most relevant payment types to your shoppers. Whilst, making it easier for them to complete their purchase.

And when we talk of purchase, they’ll do so using methods like Pay with Venmo. In addition, PayPal Pay later offers, credit card payments, iDEAL, Bancontact, Sofort, and other payment types too. But, you should note that Venmo is not currently supported in PayPal Sandbox. And there’s a good reason for this!

To enumerate, the PayPal Sandbox is a self-contained, virtual testing environment that simulates the live PayPal production environment. Eventually, the Sandbox provides a shielded space where you can initiate and watch while your app processes PayPal API requests. Without even touching any live PayPal accounts (learn more).

Why Use PayPal For Business?

In reality, there are just so many reasons why your online business should consider using the PayPal Smart Buttons. For example, millions of people trust PayPal to buy, sell, and send money — without sharing their financial information.

Notably, apart from just using one fish out of the bucket (PayPal Smart Buttons), there’s a world of ways to use PayPal. And we can learn more by considering How PayPal Works in detail. Let’s look into more ways that your online web business can benefit while using PayPal.

1. It simplifies your life

I strongly believe it should be simple to get, spend, and send your money. Fortunately, that’s why PayPal services are designed to fit into your everyday life. Whether you’re just shopping, splitting expenses, or getting paid for sales. For sure, they’re there to help make it as easy as possible.

2. Keep your costs down

Like most credit card processors, they charge a fixed percentage and a transaction fee on every sale. What makes PayPal different is that there are no extra fees for setup, downgrades, statements, withdrawals, or cancellation. Those hidden fees can really add up.

3. Shop online or buy online in person

Forthwith, you can choose PayPal at Checkout as your preferred payment method. Luckily, as you can even skip entering your financial info when you make a purchase. At large, the PayPal Purchase Protection helps you shop with confidence. You can also use PayPal to pay in person with QR codes.

4. Access your money quickly

With PayPal, you get your money fast. When the order is complete, the money usually shows up in your PayPal account within minutes. From there, transfer it directly to your bank account or spend it wherever PayPal is accepted.

5. Send your money more securely

Surprisingly, across the table or around the globe, PayPal makes it simple to transfer money to any of its users. Their advanced search makes it easy to find and know who you’re sending money to. Not to mention, if they don’t have an account with PayPal, it’s easy to open one.

6. Receive and collect money instantly

It’s easy for anyone using PayPal to securely send money to your account with PayPal. Share your unique (PayPal.me) link or QR code to make it even easier. When you need to collect money from groups, set up a Money Pool.

7. Provide a better experience for your customers

PayPal is always free for your customers to make a purchase. They don’t even need a PayPal account and can pay you in up to 25 currencies. And with their built-in mobile checkout, your smartphone customers will be happy, too.

8. Get paid by your business customers

Whether you’re selling on a marketplace, offering a service online, or setting up a store, the PayPal team can help you get paid online and in person. Having said that, you too can go ahead and join over 300 million PayPal users.

9. Setup is easy with your solution provider

PayPal is pre-integrated with top e-commerce platforms. If you already accept credit cards online, you can add PayPal as an alternative way to pay or you can make it the sole method of payment on your site. Once you sign up with PayPal, simply follow your solution provider’s instructions on how to add PayPal payments to your site.

10. Unlimited payment security solutions

Personally, what I like most is its Purchase Protection as elaborated further on the PayPal Security Centre weblog. Clearly, it covers all eligible purchases where PayPal is used. As well as payments made through their website. To take advantage of Purchase Protection, they require, among other things, that PayPal accounts be kept in good standing.

How to Add the PayPal Smart Buttons to your Website

Technically, I know that you’ve already seen the Smart Payment Buttons in action. It allows you to easily and securely, send, spend, and manage your money with just one account. And now, it’s time to add the button code to your website. That said, in order to get started, you’ll need to copy and paste this code into an HTML page and view it in your browser. Meaning, you’ll use the code to start a basic integration.

<script src="https://www.paypal.com/sdk/js?client-id=test"></script> <script>paypal.Buttons().render('body');</script>

Tip: To log in to PayPal after you click the Smart Payment Buttons, create a sandbox account.

How the PayPal Smart Buttons work

Basically, before you begin, here’s a big-picture view of how a PayPal Checkout with Smart Payment Buttons integration works:

In other words, the PayPal Smart Buttons allows you to:

add the PayPal Smart Payment Buttons to your web page.
the ability for your buyers to click on the button.
add the button calls for PayPal Orders API to set up a transaction.
have a button that launches the PayPal Checkout experience.
an easy way for the buyers to approve their payments.
the button calls for PayPal Orders API to finalize the transaction.
to show the transaction confirmation to your buyer.

How to Add the PayPal Smart 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 on your live site.

Notes:

This integration uses the PayPal JavaScript SDK. If you’re looking for the checkout.js integration, see the archived Checkout integration guide.
(UK merchants) Credit is a regulated activity in the UK. Before integrating a PayPal Credit button, you must be authorized to act as a credit broker and have a credit agreement with PayPal.

For more information, contact business customer support through paypal.com or by calling 0800 358 7929.

1. How to Set up Your Development Environment

To generate REST API credentials for the sandbox and live environments:

Log in to the Developer Dashboard with your PayPal account.
Under the DASHBOARD menu, select My Apps & Credentials.
Make sure you’re on the Sandbox tab to get the API credentials you’ll use while you’re developing code. After you test and before you go live, switch to the Live tab to get live credentials.
Under the App Name column, select Default Application, which PayPal creates with a new Developer Dashboard account. Select Create App if you don’t see the default app.

Note:

First of all, to get credentials for the Marketplaces and Platforms product, see that Get Started page.
Additionally, for the US and Canada, if you need help setting up your account or environment, reach out to our Sales team.
Equally important, they can help you with the account setup. As well as the approval process.

More so, to connect with a PayPal integration engineer, you can call 855-787-1007.

2. How to Add the PayPal JavaScript SDK to your web page

This integration uses the PayPal JavaScript SDK to integrate the Smart Payment Buttons into your site without any server code.

<!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"> // Required. Replace YOUR_CLIENT_ID with your sandbox client ID.
  </script>
</body>

Default values for the PayPal JavaScript SDK

Eventually, to streamline the integration, the PayPal JavaScript SDK uses default values for parameters you don’t pass. Of course, depending on how you want your integration to work, you might want to override these default values.

Especially, by explicitly passing a different value. As an example, below are a few common parameters you might consider overriding:

currency – The PayPal JavaScript SDK defaults to USD.
intent – The PayPal JavaScript SDK defaults to capture, which results in capturing the funds immediately.

Likewise, if you want to authorize funds immediately but capture the funds later, you have to explicitly pass authorize as the intent for the transaction.

3. How to Render the Smart Payment Buttons

By the same token, you can also render the PayPal Smart Payment Buttons to a container element on your web page. Perse, consider using the following HTML code in order to render them correctly.

<body>
  <script
    src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"> // Required. Replace YOUR_CLIENT_ID with your sandbox 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>

Important Note: If you already added the PayPal script from the Try the buttons demo, swap .render('body') for the element into which you want to render the PayPal buttons.

Some PayPal Smart Buttons Placement and Rendering Tips

For instance, let’s say you’re using the default vertical button layout. One thing for sure, the buttons might take up a dynamic amount of height on your web page. Oftentimes, all this can happen:

depending on the buttons that are rendered,
the funding source is chosen by the user,
or even other features such as Standard Card Fields.

In that case, it’s always good to ensure that Smart Payment Buttons render inside an element that does not have a fixed height. But, why? Simply, because you’d want to create the best checkout experience for your customers.

And as a result, you’ll eventually increase your conversion rates. Therefore, you must always consider where you’ll place the PayPal Checkout button on your site. With that in mind, below are some resourceful links for you to gather more details.

Learn more about how to:

4. How to Set up the Transaction

On one side, you can also implement the createOrder function. Particularly, the one to be called when the buyer clicks the PayPal button. And, in this case, you can consider using the following steps:

Calls PayPal using actions.order.create() 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.

Here is an HTML code for Transaction:

<script>
  paypal.Buttons({
    createOrder: function(data, actions) {
      // This function sets up the details of the transaction, including the amount and line item details.
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: '0.01'
          }
        }]
      });
    }
  }).render('#paypal-button-container');
</script>

On the other side, for the list of parameters, you can pass to actions.order.create() to set up the transaction. And as an example, for the responses, you can learn more about how to create order in the Orders API reference.

Note: At times, you can also call from your server to set up a transaction. Bearing in mind, calling from your server provides more control over the payment.

5. How to Capture the Transaction

In the first place, to capture the transaction, you’ll need to implement the onApprove function. All in all, which is called after the buyer approves the transaction on paypal.com. This function carries with it the following key features:

Calls PayPal using actions.order.capture() to capture the funds from the transaction.
Shows a message to the buyer to let them know the transaction is successful.

<script>
  paypal.Buttons({
    createOrder: function(data, actions) {
      // This function sets up the details of the transaction, including the amount and line item details.
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: '0.01'
          }
        }]
      });
    },
    onApprove: function(data, actions) {
      // This function captures the funds from the transaction.
      return actions.order.capture().then(function(details) {
        // This function shows a transaction success message to your buyer.
        alert('Transaction completed by ' + details.payer.name.given_name);
      });
    }
  }).render('#paypal-button-container');
  //This function displays Smart Payment Buttons on your web page.
</script>

In general, for the list of order details you receive from; actions.order.capture(), you can see the Capture payment for the order in the Orders API reference. Not forgetting, you can also call from the server to capture a transaction.

6. Testing the PayPal Smart Buttons integration

To test your buttons, complete these steps.

Run test transactions

Log in to the Developer Dashboard and create a new sandbox test account.
Click the Smart Payment Buttons. Make sure to also test the credit card buttons.
Log in to PayPal using the test buyer account you created.

After all that, it’s time to complete a transaction.

How to Verify Test Transactions For PayPal Smart Buttons

As a matter of fact, you can also verify your test transactions too. From both the merchant’s and buyer’s perspectives as such. But, firstly, you’ll need to log into the Sandbox at large. To clarify, you can do so using your Sandbox Merchant Account only. Not to mention, all this allows you to confirm that the funds have been received (minus any processing fees).

Secondly, you’ll need to log into the Sandbox once again while using your Sandbox Buyer Account this time. Considerably, in order to confirm that the funds have been sent.

By all means, as soon as your test is complete and you’re satisfied with the results, you can now launch your new PayPal Smart Buttons into production.

7. How to go live on a website

By definition, to go live on a website means that you’ll start accepting payments almost immediately. Keeping in mind, PayPal is the faster, easier, more secure way to get paid. All you’ll ever need is to Set up a PayPal Business Account sooner than later. And by doing so, you’ll tap into the millions of active buyers who look for the PayPal way to pay.

Your customers don’t need a PayPal account
Signup is fast and setup is easy
Clear pricing, no hidden fees Fee details

Simply put, in order to launch your button into production, all you’ll need now is to complete the following simple steps. The first one is to create a PayPal business account.

Note: If you already have a PayPal business account, skip to Replace sandbox credentials with live credentials.

Go to the PayPal home page and click Sign Up.
Select Business Account and follow the on-screen instructions.

Replacing sandbox credentials with live credentials

Below are the simple steps to replace sandbox credentials with live credentials:

Change the script tag to use your live client ID.

  <script
    src="https://www.paypal.com/sdk/js?client-id=LIVE_CLIENT_ID">
  </script>

Change any API calls from https://api-m.sandbox.paypal.com to https://api-m.paypal.com and use your production client ID and secret for these calls.

  // Add your client ID and secret
    var PAYPAL_CLIENT = 'PAYPAL_LIVE_CLIENT';
    var PAYPAL_SECRET = 'PAYPAL_LIVE_SECRET';

  // Point your server to the PayPal API
    var PAYPAL_ORDER_API = 'https://api-m.paypal.com/v2/checkout/orders/';

How to Test a Live Transaction

First, click the PayPal Smart Payment Buttons.
Secondly, log into the PayPal window using a buyer account.
- If you don’t have a PayPal buyer account, go to the PayPal website and click Sign Up.
Lastly, complete a transaction.

You can also verify live transactions from both the merchant and buyer perspectives.

To do so:

Log in to PayPal using your PayPal business account to confirm that the funds have been received (minus any processing fees).
Log in to PayPal using a PayPal buyer account to confirm that the funds have been sent.

You have completed the basic PayPal Smart Payment Buttons integration. Your new buttons set up and capture simple, one-time payments. What’s Next for PayPal Smart Buttons is to add these features to your integration:

Listen for shipping changes and update the cart
Configure a webhook listener for Alternative Payment Methods
Handle funding failures
Show a cancellation page
Handle errors
Optimize the performance of the PayPal buttons

In addition, you can also try the interactive PayPal Smart Buttons demo. And as such, you can go ahead and test the button code in the interactive demo. Learn also more about PayPal REST APIs in detail. As well as a complete PayPal sandbox testing guide for beginner webmasters.

Get Free Updates

Notice: All content on this website including text, graphics, images, and other material is intended for general information only. Thus, this content does not apply to any specific context or condition. It is not a substitute for any licensed professional work. Be that as it may, please feel free to collaborate with us through blog posting or link placement partnership to showcase brand, business, or product.