Log in Sign Up

Managing Products - Part 2: PayPal Checkout

In Part 1 of this HowTo, we showed you how to create a simple product listing, and make all the product details easily editable using MagicEdit. Now that you have the listings done, let's add the PayPal checkout portion.

Adding in the PayPal Form

The "Add to Cart" button actually lives inside a form, but the only part of the form you see is the actual button. Add the following code inside the repeated region (from Part 1) where you want the "Add to Cart" button to appear. Make sure to put the email address associated with your PayPal account in the value for the business hidden field.

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" class="paypalForm">
  <p class="noJS">Enable JavaScript to place orders!</p>
  <input type="hidden" name="business" value="yourPayPalEmail@yourdomain.com" />
  <input type="hidden" name="cmd" value="_cart" />
  <input type="hidden" name="add" value="1" />
  <input type="hidden" name="undefined_quantity" value="1" />
  <input type="hidden" name="item_name" value="Title" />
  <input type="hidden" name="item_number" value="111" />
  <input type="hidden" name="amount" value="1" />
  <input type="hidden" name="currency_code" value="USD" />
  <input type="image" style="display:none" disabled name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_cart_SM.gif"  alt="Add to Cart" />
  <img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" />
</form>

NOTE: Since we will use some JavaScript to populate the PayPal form, we're disabling and hiding the input, and displaying a message to enable JavaScript to place orders. This helps prevent issues in the rare case when a visitor does not have JavaScript enabled.

Adding the JavaScript

Now that all of the information we need is actually part of the page, we just need a little bit of scripting to populate the form and take care of some housecleaning. We'll also add a few span elements and classes to the HTML so the script can identify various details about the product. Here is our finished HTML.

<magicrepeat me_name="product">
  <div class="product">

    <img magicedit me_name="productImage" src="i/product.png" />
    <h2 class="productTitle"><magicedit me_plain me_name="productTitle">Product Title</magicedit></h2>

    <magicedit me_name="productDescription"><p>This is a product description.</p></magicedit>
    <p>Item Number: <span class="itemNumber"><magicedit me_plain me_name="productSku">12345</magicedit></span></p>

    <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" class="paypalForm">
      <p class="noJS">Enable JavaScript to place orders!</p>
      <input type="hidden" name="business" value="yourPayPalEmail@yourdomain.com" />
      <input type="hidden" name="cmd" value="_cart" />
      <input type="hidden" name="add" value="1" />
      <input type="hidden" name="undefined_quantity" value="1" />
      <input type="hidden" name="item_name" value="Title" />
      <input type="hidden" name="item_number" value="111" />
      <input type="hidden" name="amount" value="1" />
      <input type="hidden" name="currency_code" value="USD" />
      <input type="image" disabled style="display:none" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_cart_SM.gif"  alt="Add to Cart" />
      <img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" />
    </form>

    <magicrepeat me_repeat="yes" me_name="productOptions">
      <div>
        <label>
          <input class="pricingOption" name="option" type="radio" value="1" />
          <span class="optionName"><magicedit me_plain me_name="productOption">Option</magicedit></span>:
          $<span class="productPrice optionPrice"><magicedit me_plain me_name="optionPrice">10</magicedit></span>
        </label>
      </div>
    </magicrepeat>

  </div>
</magicrepeat>

The JavaScript file is available in the Downloads section below, so to finish things off add the following lines to your page once you have uploaded the cart.js file to your site. If you are already loading jQuery, just leave the first line out, but make sure you add the cart.js script after your jQuery script.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript" src="js/cart.js"></script>

Testing it all Out

That's about it! After a couple of edits to test products with options and without, here is what we end up with.

Clicking the "Add to Cart" button now takes the site visitor over to their PayPal shopping cart, where they can update quantities and check out (click the image to view it larger).

You may also want to display a "View Cart" button somewhere on the page. To do this, just put the following form where you want the "View Cart" button to show up. Usually this is at the top and/or bottom of the page, not inside the repeated product itself. Make sure you replace "yourPayPalEmail@yourdomain.com" with your real email address.

<form target="paypal" method="post" action="https://www.paypal.com/cgi-bin/webscr">
  <input type="hidden" value="yourPayPalEmail@yourdomain.com" name="business" />

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

  <input type="image" name="submit" alt="View Cart" src="https://www.paypal.com/en_US/i/btn/btn_viewcart_SM.gif" border="0" />
  <img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" height="1" width="1" border="0" />
</form>

Try MagicEdit today!

Sign Up for free Demo
Scroll to Top