How to Create Cart and Accept Major Payments On Blogspot Blog

ivt-banner

How to Install Complete Payment Cart System On Blogspot Blog


So, how do you get to have a complete shopping cart system that enables you display, sell items and receive payments on your blog without using external widget, site or jeopardizing your blog's SEO or leaving your Blogspot blog sluggishly loading? That's what we discuss here.


For every bloggers especially those using Blogspot platform, it was always a big issue to display, sell items and receive payments on their blogs. Even those few Blogspot theme that come pre-installed with Shopping cart system load too slowly and generally not good for SEO whereas as a blogger, it is even better if you have services to render or items to sell since you probably already have loyal audience and potential customers from your blog that would most likely buy your items but a good SEO is not something a wise blogger would jeopardise for that.


Moreso, you'll have one more additional means of making money off your blog thus; if you are already using AdSense which I believe 99% of bloggers do, selling items on your blog would also mean more money and another means through which you can be giving people, your followers what they want in exchange for money.


So, how can you integrate payment system with your Blogspot blog and process credit card payments right there on your blog without using a third-party widget or site? Well, that is exactly what we discuss here.


We show you how to get shopping cart system that allows you display, sell items and receive payments on your blog without jeopardising your blog SEO or leaving your Blogspot blog sluggisghly loading? That's what we discuss here.



The method discussed here utilizes simpleCart.js liberary that lets you accept payments from PayPal users and process payments from Visa and Mastercard card users/holders.


How to Install Complete Shopping Cart System and Accept Payments On Blogspot Blog

  1. Login your Blogger account, then go to Theme. From the screen that appears, click Edit HTML. NOTE: we recommend that you make a full backup of your blogger theme so that you may be able to revert back in case there is any issues. Here is how to make a full backup of your blogger blog theme.
  2. Click anywhere inside the code area and press the CTRL + F keys on your keyboard. This will open the search box that enables you search from within the code area only.
  3. From the step 2 above, search for this code:
  4. <b:include data='blog' name='all-head-content'/>
    
    Just below the above line of codes, copy and paste the code below:
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'/>
    <script src='https://cdn.staticaly.com/gh/wojodesign/simplecart-js/51a9a38d/simpleCart.min.js'/>
    <script src='https://cdn.staticaly.com/gh/BlogrCart/widget/6b142346/send-form.min.js'/>
    
  5. Again, search for this code:
  6. </b:skin>
    
    Just above it, copy and paste the CSS lines in the code block below:
    /* Shopping Cart - ArykTECH
    ----------------------------------------------- */
    #shoppingCarts{background-color: #fff;
    float: left;
    color: #474747;
    width: 263px;
    padding: 0 10px 10px;
    border: 1px solid #ddd;}
    #shoppingCarts h2{background:url(http://2.bp.blogspot.com/-N9GvSMaH38A/T7qCGHb4ElI/AAAAAAAAGLo/sNUlCs3e8mo/s1600/icon_cart.png) no-repeat left top;display:block;font-size:16px;color:#5F5F5F;text-decoration:none;margin-bottom:10px;padding:0 0 10px 25px}
    .itemname{}
    .item_thumb{}
    .item_price{background-color:#fff;display:inline-block;height:auto;color:#660044;font-size:18px;font-weight:700;;border:1px solid #660099;border-radius:3px;padding:3px}
    .itemContainer{float:left;width:210px;text-align:center;display:block;position:relative;bottom:0}
    .itemQuantity input{border:none;color:#6e6e6e;background:none;float:left;font:bold 11px Arial,sans-serif;height:22px;text-align:center;width:25px;padding:5px}
    .itemQuantity input:focus{outline:none}
    .itemTotal{color:#6e6e6e;float:left;font:bold 11px Arial,sans-serif;text-align:right;width:55px;margin:15px 0 0 10px;padding:0}
    .simpleCart_finalTotal{color:#fff;font-size:18px}
    .cart table{border-collapse:collapse;margin-top:20px}
    .cart table td.odd{color:#fff;text-align:left;width:100px}
    .cart table td.even{color:#fff;text-align:right;width:100px}
    a.simpleCart_empty{background-color: #660099;
    display:block;font:bold 12px Arial;text-align:center;text-decoration:none;color:#fff;float:left;width:80px;margin:0 20px;padding:6px}
    .cartbuttons{margin:10px 0 0}
    a.simpleCart_checkout{display: inline-block;background-color: #444;border: 2px #eee solid;border-radius:5px;font-size: 18px;font-weight: 500;text-align:center;color:#fff;padding:10px;margin:3px}
    a.your_cart{background-color: #ddd;border: 1px solid #660044;margin-right: 30px;margin-top: 0;
    display:block;font:bold 12px Arial;text-align:center;text-decoration:none;color:#fff;float:right;width:80px;padding:6px}
    a.your_cart:hover{background:#660044;color:#FFF}
    input.item_add{display: inline-block;background-color: #fff;border: 1px #660044 solid;border-radius:5px 5px 5px 5px;font:bold 14px Arial;text-align:center;text-decoration:none;color:#660044;padding:4px;margin:3px;cursor: pointer}
    .simpleCart_quantitys{display:  inline-block; color: #000;font-size: 14px;font-weight: 300;text-align: center;border: 1px solid #660044;width: 25px;background-color: #fff;margin-right: 4px;margin-top: 2px; padding: 2px;  cursor: pointer;}
    #checkout{background:#D9D9D9;color:#000;text-decoration:none;font-size:80%;display:block;text-align:center;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;padding:10px}
    #checkout:hover{background:#660044;color:#FFF}
    .item_name,.hidden_value,.cartHeaders{display:none}
    a.simpleCart_empty:hover,a.simpleCart_checkout:hover{background:#d9d9d9;color:#000}
    .product_image{width:225px;height:200px;background:#fff;float:left;text-align:left;margin:0 15px 10px 0;padding:13px 10px 13px 13px}
    .product_image img{width:160px;height:160px}
    
  7. Finally, search for:
    </head>
    
    And just above it, copy and paste the js codes in the codes block below:
    
    <script id='js-cart-script'>
    simpleCart({
     
      currency: 'USD', // set the currency 
    
      checkout: {
        type: "PayPal",
        email: "[email protected]",
        success: "http://www.your-domain/p/success.html",
        cancel: "http://www.your-domain/p/return.html"
      },
    
      // shipping options refer docs
      // shippingFlatRate: 25,
      // shippingQuantityRate: 55,
      // shippingTotalRate: 0.1,
    
      //taxRate: 0.1,
    
      cartStyle: "table",
      cartColumns: [
        { attr: "name", label: "Cart Items"},
        { view: "currency", attr: "Price", label: "price"},
        { view: "decrement", label: false },
        { attr: "quantity", label: "Qty" },
        { view: "increment", label: false },
      ]
    });
    var CART_SETUP = {
      itemAdded : 'Item Added!',
      itemAddedTiming : 3000
    };
    
    </script>
    
  8. Now click Save theme. This will save and effect the recently added codes on your blog's functions. NOTE: Before you save, setup your cart in the codes as instructed below.
  9. You now have a fully functional shopping cart system ready to accept payments from PayPal users and process credit card payments from Visa and Mastercard card holders/users.

Setting Up the Shopping Cart for Payments Processing

  1. From the JS codes above, this shopping cart uses USD as the default currency. To use your local currency or switch to a currency of your choice, contact us here.
  2. The default payment processor used by this shopping cart is PayPal. If you wish to use another payment processor such as Google Checkout Payments, Amazon Pay or E-mail Checkout, you may also contact us.
  3. Replace the [email protected] in red ink from the JS code above to your own registered PayPal e-mail address. NOTE: we recommend that you use business PayPal account so that you may be able to process credit card payments without any limitations.
  4. Replace the http://www.your-domain/p/success.html in the JS codes to your own success page. That's where customers would be redirected on your website following a successful payment.
  5. Replace the http://www.your-domain/p/return.html in the JS codes with the link to your own return page - this is where customers would be redirected when they cancel a payment.

Shopping Cart Features
  • Can be installed, setup and use on any Blogger blog Theme
  • Best for SEO as it does not affect your existing implemented SEO techniques
  • Loads extremely fast! This shopping cart works as per the speed of your existing Blogger blog theme
  • Good for low and heavy traffic blogs
  • Completely responsive though relies on your existing Blogger blog theme's responsiveness
  • Works great on both web and mobile devices
  • Relatively fast or close to instant installation
  • Auto calculates and updates cart totals, shipping and taxes
  • Easy to customization
  • 3 preset shipping charge options
  • Add to cart button pre-rendered
  • Editable product price data
  • Ability to categorize products using Labels
  • Ability to mix products & post contents
  • Ability to arrange products display
  • Ability to include product select options
  • Ability to link selected item in cart to page
  • Preset currencies and custom currencies supported
  • Paypal checkout pre-installed
  • Ability to extend checkout with email notifier etc.

Creating A Standard Checkout Page On Blogspot Blog


In order to complement the work we have done so far, there is need to create a checkout page so that your customers and blog followers have a really smart-simple yet friendly shopping experience on your blog.


To achieve this, we need to designate a page by creating a new page using blogger static page. The new page would be used as the checkout cum cart page. Thus, on this same page, your customers would be able to view and see all the items they have added to cart, modify the items if there is need for that and also checkout (make payment) from the same page.


To Create Standard Checkout Page On Blogspot Blog

  1. Login your Blogger account and from the Menu to the left, locate Pages and click it.
  2. From the screen that appears, locate New Page and click it.
  3. On the post edit screen click HTML. Now, copy the entire codes in the codes block below and paste it onto the post editor.
  4. <style type='text/css'>
    #sidebar, .sidebar, .sidebar-wrapper1, #sidebar-wrapper1, .sidebar-wrapper2, #sidebar-wrapper2, #main-sidebar, .main-sidebar, .sidebar-wrapper, #sidebar-wrapper, .sidebar-right, #sidebar-right, #post-title, .post-title, #blog-pager, .blog-pager, .post-footer, #post-footer, .comments, #comments, .entry-title, #entry-title, .h1.post-title, #h1.post-title, .static-page-title, #static-page-title {display: none !important}
    
    .column-right-outer, #column-right-outer, .tabs-outer, #tabs-outer, .footer-outer, #footer-outer, .post-sidebar, .post-header, .post-header-line-1, .post-footer, .sidebar-container, .sidebar-invisible, .aside, .post-body-container::before, .PopularPosts {display: none !important}
    
    #main-wrapper, .main-wrapper, .main-content, #main-content, .wrapper, #wrapper, #content, .content, .post-wrapper, #post-wrapper, .blog-posts-wrapper, #blog-posts-wrapper, .container, #container, .blog-posts, #blog-posts, .post-outer, .post-body-container, .main-page-body-content, .post-body, .entry-content, .float-container {width: 100% !important}
    
    #main-wrapper, .main-wrapper{padding: 0 0 !important}
    
    body {background: #fff url('image-url-here') no-repaet scroll top center !important; margin: 0; padding: 0}
    </style>
    
    
    <div class="simpleCart_items"></div>
    
    <table border='0' cellspacing='2px' cellpadding='2px' width='100%'><tbody>
    <tr><td class='odd' width='50%'>Total Added: </td><td class='even' width='50℅'><span class='simpleCart_quantity'/></td></tr>
    <tr><td class='odd' width='50%'>Total Cost: </td><td class='even' width='50%'><span class='simpleCart_total'/></td></tr>
    <tr><td class='odd' width='50%'>Tax Cost: </td><td class='even' width='50%'><span class='simpleCart_tax'/></td></tr>
    </tbody></table>
    <br/>
    <a class='simpleCart_checkout' href='javascript:;'> <i class="fa fa-paypal"></i> Pay Now</a>
    
  5. Preview your page and if everything looks good to you, publish it.

How to Add Products for Sale On Any Posts or Static Pages
  1. To Add Products on any post or static pages, simply go to the page and click edit. On the edit screen click HTML.
  2. Copy the entire codes in the codes block below:
  3. <div class="simpleCart_shelfItem">
    
    <table border="0" cellspacing="2px" cellpadding="2px" width="100%">
    
    <caption> <span class="item_name"> Adidas Shoe </span> </caption>
    
    <tbody>
    
    <tr>
    <th width="33.33%"> Item Name </th> 
    
    <th width="33.33%"> Qty Selected </th>
    
    <th width="33.33%"> Price/Unit </th> </tr>
    
    <tr>
    <td width="33.33%"> <span class="item_Name"> Adidas Shoe </span></td> 
    
    <td width="33.33%"> <span class='simpleCart_quantity simpleCart_quantitys'></span></td> 
    
    <td width="33.33%"> <span class="item_price">$102.99</span> </td> </tr>
    
    <tr>
    <td width="33.33%"> <a class="item_add oprj6" href="javascript:;"> Add to Cart </a></td>
    
    <td> <a class='simpleCart_empty' href='javascript:;'>Empty List</a> </td>
    
    <td width="33.33%"> <a class="oprj6" href="/p/cart.html"> Pay Now </a> </td> </tr>
    
    </tbody></table>
    </div>
    
  4. Now, paste the codes you copied from the codes block above onto any portion of the post or static page where you want the product displayed.
  5. Edit the parameters as per your needs and preview your post or page.
  6. If everything looks good to you, continue writing your post or publish the post.
TIPS:
You may save these codes in a draft post so that you may always copy from there whenever there is need for it.

0 Comments

to top