PayPal “Add to Cart” button enables you to create PayPal’s Shopping Cart on your website.

By PayPal Shopping Cart merchants can make a cart based website where buyers select multiple items and pay for them together with a single payment.

When buyers will click on”Add to cart” button the products will be added to their PayPal shopping carts and by clicking on “View Carts” button they can review the products added, before checkout to make payments.



In this blog post, we are going to demonstrate how we can customize PayPal “Add to Cart” button for making cart based website.


 Watch the live demo or download code from the link given below

PayPal-Shopping-Cart


Note : PayPal offers sandbox account for development and testing purpose. Here we are using Sandbox for demo. So if you would like to test our demo you can use your PayPal sandbox credentials.

 

Concept behind the script

In this script, we have used PayPal Add to Cart button, which can be simply created using one line HTML code.

<input type="hidden" name="cmd" value="_cart" />

The concept behind this script is, as soon as user will click this button after choosing the quantity then it will redirected to the PayPal site carrying the product details and will get added to cart.

User can change the product quantity from there itself or can revert back for further shopping or can do the payment for final checkout.

PayPal cart feature enables user to change the product quantity at different stages of the shopping, so as to provide flexibility to users.


 

PayPal Shopping Card in Details

The following diagram shows PayPal shopping card in details

paypal-shopping-cart-php

 

  1. Merchant’s company logo.
  2. Shopping card title.
  3. Product name.
  4. When you click on Continue Shopping button it’ll redirect to merchant’s website.
  5. Show product price.
  6. Update cart.
  7. Delete product from cart.
  8. Product price.
  9. Product total price.
  10. Checkout to PayPal for payment.

 

Tutorial Scripts in detail

Below are the details of the code used in this tutorial with proper explanation.

Index.php

Index.php file contain code for displaying product info with Add to cart and view cart button with  product’s quantity feature.

<html>
<head>
<title>PayPal Shopping Cart</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.pro1').click(function() {
$("div#loader1").show();

});
$('a.pro2').click(function() {
$("div#loader2").show();

});
$('a.pro3').click(function() {
$("div#loader3").show();

});
});
</script>
</head>
<body>
<!--form for view cart -->
<form id ="view-cart" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" name="viewcart">
<form id ="form3" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="display" value="1" />
<input type="hidden" name="business" value="merchants's email id" />
</form>
<div id="main">
<center><h1 id="head">PayPal Shopping Cart Example</h1></center>
<div id="container">
<h2>Smart Watch Store</h2>
<hr/>
<div id="loader1">
<div class="switchbox">
<div class="switch"></div>
<div class="switch" id="switch2"></div>
</div>
</div>

<!--adding product info -->
<div id="product">
<form id ="form1" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="21" />
<input type="hidden" name="business" value="merchants's email id" />
<input type="hidden" name="item_name" value="Red Smart Watch" />
<input type="hidden" name="amount" value="50" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="cancel_return" value="http://localhost/paypal-shopping-cart/index.php">
<input type="hidden" name="return" value="http://localhost/paypal-shopping-cart/success.php">
<img src="images/pro1.png">
<div id="product_details">
<div id="pro_price">
<p>Red Smart Watch</p>
<p>Price : <b>$50</b></p>
</div>
<div id="pro_quantity">
<p>Quantity</p>
<select name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<div id="add-cart"><a class="pro1" href="javascript:void(0);" onclick="document.getElementById('form1').submit()" id="cart-btn"><i class="fa fa-cart-plus"></i> Add to Cart </a></div>
<div id="view-cart"><a href="javascript:void(0);" onclick="document.getElementById('view-cart').submit()" id="cart-btn"><i class="fa fa-eye"></i> View Cart </a></div>
</form>
</div>
<div id="loader2">
<div class="switchbox">
<div class="switch"></div>
<div class="switch" id="switch2"></div>
</div>
</div>

<!--adding product info -->
<div id="product">
<form id ="form2" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value="merchants's email id" />
<input type="hidden" name="item_name" value="Sony's Smart Watch" />
<input type="hidden" name="amount" value="80" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="cancel_return" value="http://localhost/paypal-shopping-cart/index.php">
<input type="hidden" name="return" value="http://localhost/paypal-shopping-cart/success.php">
<img src="images/pro2.png">
<div id="product_details">
<div id="pro_price">
<p>Sony's Smart Watch</p>
<p>Price : <b>$80</b></p>
</div>
<div id="pro_quantity">
<p>Quantity</p>
<select name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<div id="add-cart"><a class="pro2" href="javascript:void(0);" onclick="document.getElementById('form2').submit()" id="cart-btn"><i class="fa fa-cart-plus"></i> Add to Cart </a></div>
<div id="view-cart"><a href="javascript:void(0);" onclick="document.getElementById('view-cart').submit()" id="cart-btn"><i class="fa fa-eye"></i> View Cart </a></div>
</form>
</div>
<div id="loader3">
<div class="switchbox">
<div class="switch"></div>
<div class="switch" id="switch2"></div>
</div>
</div>

<!--adding product info -->
<div id="product">
<form id ="form3" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value="merchants's email id" />
<input type="hidden" name="item_name" value="Window's Smart Watch" />
<input type="hidden" name="amount" value="60" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="cancel_return" value="http://localhost/paypal-shopping-cart/index.php">
<input type="hidden" name="return" value="http://localhost/paypal-shopping-cart/success.php">
<img src="images/pro3.png">
<div id="product_details">
<div id="pro_price">
<p>Window Smart Watch</p>
<p>Price : <b>$60</b></p>
</div>
<div id="pro_quantity" >
<p>Quantity</p>
<select name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<div id="add-cart"><a class="pro3" href="javascript:void(0);" onclick="document.getElementById('form3').submit()" id="cart-btn"><i class="fa fa-cart-plus"></i> Add to Cart </a></div>
<div id="view-cart"><a href="javascript:void(0);" onclick="document.getElementById('view-cart').submit()" id="cart-btn"><i class="fa fa-eye"></i> View Cart </a></div>
</form>
</div>
</div>
<img id="secure_paypal_logo" src="images/secure-paypal-logo.jpg">
</div>
</body>
</html>

 

Success.php

PayPal call this file when payment gets successfully completed and provide $_REQUEST array which contains product id, PayPal transaction ID, PayPal received amount value, PayPal received currency type and PayPal product status which is displayed in this page.

<html>
<head>
<title>PayPal Shopping Cart Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!----in success.php page PayPal send $_Request array with payment status, transaction id , currency code and item number --->
<div id="main">
<h1 style=" margin-left: 75px;">PayPal Shopping Cart Example</h1>
<div id="return">
<h2>Payment Status </h2>
<hr/>
<?php if (!empty($_REQUEST)) { ?>
<h3 id='success'>Payment Successful</h3>
<?php } else { ?>
<h3 id='fail'>something wrong</h3>
<?php } ?>
<P>Transaction Status - <?php
if (!empty($_REQUEST)) {
echo $_REQUEST['st'];
}
?></P><P>Transaction Id - <?php
if (!empty($_REQUEST)) {
echo$_REQUEST['tx'];
}
?></P><div class='back_btn'><a href='index.php' id= 'btn'><< Back to Products</a></div></div>
</div>
</html>

 

Style.css

Includes basic styling of HTML elements.

@import url(http://fonts.googleapis.com/css?family=Raleway);
#main{
width:960px;
margin:50px auto;
font-family:raleway;
}
span{
color:red;
}
h1#head{
position: absolute;
margin-left: 270px;
}
h2{
background-color: #FEFFED;
text-align:center;
border-radius: 10px 10px 0 0;
margin: -10px -40px;
padding: 15px;
}
hr{
border:0;
border-bottom:1px solid #ccc;
margin: 10px -40px;
margin-bottom: 30px;
}
#container{
width: 100%;
float: left;
border-radius: 10px;
font-family:raleway;
border: 1px solid #ccc;
padding: 10px 40px 38px;
height: auto;
background-color: #E0F2F6;
margin: 18px 0 30px -16px;
}
input[type=text],input[type=password]{
width:99.5%;
padding: 10px;
margin-top: 8px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}
#cart-btn{
width: 100%;
background-color:#FFBC00;
color: white;
border: 2px solid #FFCB00;
padding: 10px 24px;
font-size: 16px;
cursor:pointer;
margin-bottom: 15px;
}
#profile{
padding:50px;
border:1px dashed grey;
font-size:20px;
background-color:#DCE6F7;
}
#logout{
float:right;
padding:5px;
border:dashed 1px gray;
}
a{
text-decoration:none;
color: cornflowerblue;
}
i{
color: cornflowerblue;
}
#product{
width: 30%;
height: 450px;
float: left;
margin: 15px;
background-color: white;
}
#secure_paypal_logo{
float: right;
margin: -19px -67px 0 0;
}
#product_details{
width:100%;
height: 80px;
background: rgb(219, 219, 219);
}
#add-cart{
width: 50%;
height: 50px;
float: left;
}
#view-cart{
width: 50%;
height: 50px;
float: right;
}
#product i{
color: white;
text-decoration: none;
}
#pro_price{
width: 58%;
height: 80px;
float: left;
}
#pro_quantity{
width: 40%;
height: 80px;
float: right;
}
#product_details p{
font-size: 14px;
margin-left: 18px;
}
#product_details select{
font-size: 14px;
margin-left: 30px;
margin-top: -4px;
}
#loader1{
display: none;
width: 100px;
height: 100px;
margin: 143px 0 0 110px;
position: absolute;
}
#loader2{
display: none;
width: 100px;
height: 100px;
margin: 150px 0 0 420px;
position: absolute;
}
#loader3{
display: none;
width: 100px;
height: 100px;
margin: 142px 0 0 742px;
position: absolute;
}
.switchbox {
position: relative;
width: 80px;
height: 80px;
}
.switchbox {
-webkit-animation: spin 2s infinite linear;
}
.switch {
position: absolute;
top: 50%;
margin-top: -10px;
width: 20px;
height: 20px;
background-color: #ffbc00;
border-radius: 20px;
-webkit-animation: cross 2s infinite linear;
}
#switch2 {
-webkit-animation-delay: -1s;
}

@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes cross {
50% {
margin-left: 60px;
}
}
#return {
width: 492px;
height: 350px;
float: left;
border-radius: 10px;
font-family: raleway;
border: 2px solid #ccc;
padding: 10px 40px 11px;
margin: 16PX;
}
#btn {
width: 100%;
background-color: #FFBC00;
color: white;
border: 2px solid #FFCB00;
padding: 10px 70px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
margin-bottom: 15px;
margin: 0 auto;
}
#return .back_btn {
margin-top: 51px;
margin-left: 19%;
}
#return h3#success {
text-align: center;
font-size: 24px;
margin-top: 50px;
color: green;
}
#return h3#fail {
text-align: center;
font-size: 24px;
margin-top: 50px;
color: red;
}
#return P {
margin-left: 122px;
}
#formget {
float: right;
}

Pabbly Subscription Billing


Conclusion :

After reading the above post, I am sure you will give a try to the script provided and implement it in your own projects as well. Feel free to visit our website again in the future to get in touch with new coding tricks. You can let us know about your feedback in the space provided below :)