Skip to main content

PayPal Express Client-Side Checkout in PHP

Screenshot
Body

This tutorial tackles on how to integrate Paypal Express Checkout using Client-Side API. Most E-commerce sites' payment method is with the use of credit card but if you want to integrate another payment method which is using Paypal, this tutorial will surely help you out. Paypal, as per the site description, is the faster, safer way to send money, make an online payment, receive money or set up a merchant account.

Getting Started

First, we need the jQuery library, Bootstrap for a better design to our app and Sweet Alert for a successful transaction alert. I've included these files in the downloadable of this tutorial but if you want, you can download them yourself using the links below:

Preparing our Sandbox Accounts

We need to prepare two sandbox accounts (merchant and buyer). Sandbox accounts are PayPal development accounts that you can use to test the integration of PayPal payments before going live.

If you haven't created the accounts yet, please refer to my tutorial, How to Create Paypal Sandbox Accounts.

We are going to use our created merchant account to create our App and the buyer account to buy products to our App.

Creating our App

  1. Go to Paypal Developer Page and login with your paypal account.
  2. After a successful login, on Dashboard menu, click My Apps & Credentials, input necessary info and click Create App button.
    create paypal app
  3. After successfully creating the App, please take note of the App's Client ID in both the sandbox and live production.
    paypal app client id

Creating our Sample E-Commerce

Next is we are going to create a simple e-commerce app to test our PayPal integration by creating a new project in our localhost server. In my case, I've name the app as paypal_client.

Creating our Database

First, we create the database of our sample app. You should be able to create a database named dbtest. Then copy the code below and paste it into the SQL page of PHPMyAdmin to create a table for products in the database and also populating the table with some sample data.

  1. CREATE TABLE `products` (
  2. `product_name` text NOT NULL,
  3. `product_price` double NOT NULL
  4. INSERT INTO `products` (`id`, `product_name`, `product_price`) VALUES
  5. (1, 'Dell XPS', 1),
  6. (2, 'Notebook UX310 ', 2),
  7. (3, 'Lenovo Yoga Book', 3);

I Have also included a SQL file in the downloadable of this tutorial. All you have to do is import the said file. If you have no idea on how to import, please visit my tutorial How import .sql file to restore MySQL database.

Displaying our Products

Next, we display our sample products that our sandbox buyer account will purchase. Create a new file, name it as index.php and paste the codes below.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Paypal Express Client-Side Checkout</title>
  6. <link rel="stylesheet" type="text/css" href="asset/bootstrap4/css/bootstrap.min.css">
  7. <style type="text/css">
  8. .mt20{
  9. margin-top:20px;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <div class="container">
  15. <h1 class="text-center mt20">Paypal Express Client-Side Checkout</h1>
  16. <div class="row justify-content-center">
  17. <div class="col-sm-8">
  18. <table class="table table-bordered mt20">
  19. <thead>
  20. <th>Product Name</th>
  21. <th>Price</th>
  22. <th></th>
  23. </thead>
  24. <tbody>
  25. <?php
  26. //connection
  27. $conn = new mysqli('localhost', 'root', '', 'dbtest');
  28.  
  29. $sql = "SELECT * FROM products";
  30. $query = $conn->query($sql);
  31.  
  32. while($row = $query->fetch_assoc()){
  33. echo "
  34. <tr>
  35. <td>".$row['product_name']."</td>
  36. <td>".$row['product_price']."</td>
  37. <td><a href='checkout.php?id=".$row['id']."' class='btn btn-primary btn-sm'>Order</a></td>
  38. </tr>
  39. ";
  40. }
  41. ?>
  42. </tbody>
  43. </table>
  44. </div>
  45. </div>
  46. </div>
  47. </body>
  48. </html>

Creating our Checkout Script

Lastly, we create the page for our checkout and also our client side checkout script. Create a new file, name it as checkout.php and paste the codes below. Make sure to change the Client ID in the sandbox value on the PayPal Script. Just copy the Client ID from your created app in the PayPal Developer Dashboard.

  1. <!DOCTYPE html>
  2. <head>
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <link rel="stylesheet" type="text/css" href="asset/bootstrap4/css/bootstrap.min.css">
  6. <link rel="stylesheet" type="text/css" href="asset/swal2/sweetalert2.min.css">
  7. <script src="https://www.paypalobjects.com/api/checkout.js"></script>
  8. <style type="text/css">
  9. .mt20{
  10. margin-top:20px;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div class="container">
  16. <h1 class="text-center mt20">Paypal Express Client-Side Checkout</h1>
  17. <div class="row justify-content-center">
  18. <div class="col-sm-8 mt20">
  19. <h4>Order Details</h4>
  20. <table class="table table-bordered mt20">
  21. <thead>
  22. <th>Product Name</th>
  23. <th>Price</th>
  24. </thead>
  25. <tbody>
  26. <?php
  27. //connection
  28. $conn = new mysqli('localhost', 'root', '', 'dbtest');
  29.  
  30. $sql = "SELECT * FROM products WHERE id='".$_GET['id']."'";
  31. $query = $conn->query($sql);
  32. $row = $query->fetch_assoc();
  33. echo "
  34. <tr>
  35. <td>".$row['product_name']."</td>
  36. <td>".$row['product_price']."</td>
  37. </tr>
  38. ";
  39. ?>
  40. <tr>
  41. <td colspan="2" align="right"><span id="paypal-button"></span></td>
  42. </tr>
  43. </tbody>
  44. </table>
  45. </div>
  46. </div>
  47. </div>
  48.  
  49. <script src="asset/jquery.min.js"></script>
  50. <script src="asset/bootstrap4/js/bootstrap.min.js"></script>
  51. <script src="asset/swal2/sweetalert2.min.js"></script>
  52. <script>
  53. paypal.Button.render({
  54. env: 'sandbox', // change for production if app is live,
  55.  
  56. //app's client id's
  57. client: {
  58. sandbox: 'ASb1ZbVxG5ZFzCWLdYLi_d1-k5rmSjvBZhxP2etCxBKXaJHxPba13JJD_D3dTNriRbAv3Kp_72cgDvaZ',
  59. //production: 'AaBHKJFEej4V6yaArjzSx9cuf-UYesQYKqynQVCdBlKuZKawDDzFyuQdidPOBSGEhWaNQnnvfzuFB9SM'
  60. },
  61.  
  62. commit: true, // Show a 'Pay Now' button
  63.  
  64. style: {
  65. color: 'gold',
  66. size: 'small'
  67. },
  68.  
  69. payment: function(data, actions) {
  70. return actions.payment.create({
  71. payment: {
  72. transactions: [
  73. {
  74. //total purchase
  75. amount: {
  76. total: '<?php echo $row['product_price']; ?>',
  77. currency: 'USD'
  78. }
  79. }
  80. ]
  81. }
  82. });
  83. },
  84.  
  85. onAuthorize: function(data, actions) {
  86. return actions.payment.execute().then(function(payment) {
  87. //sweetalert for successful transaction
  88. swal('Thank you!', 'Paypal purchase successful.', 'success');
  89. });
  90. },
  91.  
  92. }, '#paypal-button');
  93. </script>
  94. </body>
  95. </html>
Demo

That ends this tutorial. I hope that this tutorial will help you with what you are looking for and for your future PHP Project with Online Payment using PayPal.

Happy Coding :)

Comments

Submitted byhappi (not verified)on Thu, 09/13/2018 - 22:23

Nice paypal checkout tutorial Please how can i redirect to some page after the sweetalert message Thanks
Submitted byafikah (not verified)on Wed, 06/03/2020 - 02:51

Hi, your tutorial is really easy.. But as i want to implement on my project, the paypal button does not come up.. Why this happen? Can you help me pleasee.. Thank youu..

Add new comment