Easy Checkout To PAYPAL, Google Wallet, Amazon - BlogrShop Responsive Template

Update
As informed by Google in the third quarter of 2013, Google Checkout (add ons for Google Wallet) has been retired. But users of Google Wallet can still make on-line transactions via Google Play and other services and further notices will be updated accordingly by Google. 

Users of our Blogr Shopping Cart integrated e-commerce Blogger Blogspot template collection can still use the checkout options to Paypal and Send Orders via e-mail. No changes or updates to the Blogger template shopping cart plug-in is required. 

Probably most of you have noticed that the built-in shopping cart installed in BlogrShop responsive Templates and also our list of FREE templates here, can easily change your blogshop or blog store checkout system with simple tweaks. You can change to PAYPAL merchant account checkout, Google Wallet and Amazon Pay apart from the auto e-mail invoice which is already pre-installed in Blogger template.

We recently received e-mails from friends and clients asking for tutorials or how to integrate the PAYPAL, Google Wallet, Amazon and even our own automated e-mail invoice checkout with custom minimalist/custom form.

Checkout to PAYPAL options

Powered by simplecart.js, a lightweight e-commerce Add to Cart feature, integration is made easy for users who's using our BlogrShop templates. The documentation for advance features using simpleCartjs could be reached here at simplecartjs.org and even in their GitHub page by wojodesign..

What this tutorial will help you with?

• Change your default checkout to your registered PAYPAL merchant account.
• Change your currency setting for your BlogrShop responsive template.
• Drop e-mail form features and checkout e-mails.
• Change the currency setting in shopping cart tabs section.

Note: Please make sure you have registered and pre-setup your PAYPAL merchant account with all the necessary authorizations. Tutorials and tips can be found in PAYPAL help and support page.

Integrate BlogrShop template with PAYPAL checkout.

Go To Template > (Back-up Template if required) >Edit Template and find this piece of codes between Line 1850 and 1864 in our BlogrShop Responsive Blogger template:-

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
simpleCart.currency({
    code: "MYR" ,
    name: "Malaysia Ringgit" ,
    symbol: "RM" ,
    delimiter: " " ,
    decimal: "." ,
    after: false ,
    accuracy: 2
});
});
//]]>
</script>

For the pieces of javascript codes here, if your country currency settings is not available with simpleCartjs plug-in, example shown here for Malaysian Ringgit, you can add the codes here just like the above format. If you required your PAYPAL checkout in US Dolars, you can just delete the codes here because simplecart has already been configured to USD currency by default.

or:-

You can replace the codes with the code snippet. Example below is shoppingcart plug-in currency settings for Euros-

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    simpleCart.currency( "EUR" );
});
/]]>
</script>

or;

Another example, a currency settings for British Pounds:-

<script type='text/javascript'>
//<![CDATA[
simpleCart({
    currency: "GBP"
});
//]]>
</script>

Note: Please browse your PAYPAL merchant account and find the correct currency codes (including capitalization) with your country's currency. PAYPAL has already provided several currency options which you can include for your BlogrShop responsive Blogger template checkout.

More details can be found here at simplecartjs.org checkout documentation page. 

After determine your checkout currency (and codes), now find this pieces of codes located between Line 3459 and Line 3480:-

<script type='text/javascript'>
//<![CDATA[
simpleCart({
    checkout: {
      type: 'SendForm',
      url: 'http://blogshop-cart.net76.net/sendcart.php',
      method: 'POST',
      currency: 'MYR',
      extra_data: {
        first_name: document.getElementById('first_name').value,
        last_name: document.getElementById('last_name').value,
        email: document.getElementById('email').value,
        phone: document.getElementById('phone').value,
        deliveryLocation: document.getElementById('deliveryLocation').value,
        address: document.getElementById('address').value,
        postcode: document.getElementById('postcode').value,
        comments: document.getElementById('comments').value
        }
     }
});
//]]>
</script>  

Now change the entire codes above to this:-

<script type='text/javascript'>
//<![CDATA[
simpleCart({
    checkout: {
    type: "PayPal",
    email: "you@yours.com"
    }
});
//]]>
</script> 

Note: Please include your registered PAYPAL merchant account e-mail address in the e-mail section above.

Lastly, find this piece of code, it should be between Line 1915 and Line 1930, for the checkout button to your PAYPAL merchant account:-

  <!-- Shopping Cart -->
          <div class='tabs-shoppingCart'>
              <ul id='tabsList1'>
                <li class='tabsclose'/>
                <li><a onclick='if(document.getElementById(&apos;tabs1-1&apos;) .style.display==&apos;none&apos;) {document.getElementById(&apos;tabs1-1&apos;) .style.display=&apos;&apos;}else{document.getElementById(&apos;tabs1-1&apos;) .style.display=&apos;none&apos;}'>Cart</a>
                </li>
              </ul>
              <div class='tabs-container' id='tabs1-1' style='display: none;'>
               <div class='arrow-up inactive'>  </div>
                <div class='simpleCart_items'>  </div>
                <a class='simpleCart_empty' href='javascript:;'>Clear Car </a>
                 <a class='simpleCart_checkout' href='/p/checkout.html'>Checkout</a>
                 <div class='clear'> </div>
              </div>
         </div>
  <!-- Shopping Cart -->

From the reference above, change this piece of code below:-

<a class='simpleCart_checkout' href='/p/checkout.html'>Checkout</a>

To this:

<a class='simpleCart_checkout' href='javascript:;'>Checkout</a>

Click Save Template and your checkout is ready.

Now check your checkout via the shopping cart tab (upper right corner) by selecting a few products (Add to Cart) and clicking the Checkout link.

You should be redirected to your PAYPAL merchant account with the product description titile, price, descriptions and even the URL image to your product too.

If you are not redirected to your PAYPAL page or the page redirects to an error e-mail address PAYPAL page, please double check you e-mail caps in the email checkout section above. You can also check on your javascript codes above with trailing commas and brackets. additional commas and brackets  will not let simpleCart.js plug-in functions to work.

We have tested it regularly in it is working as it should. More options for your web store or blogshop to pay/receive payments with simplecartjs integration via BlogrShop responsive templates.

Additonal options by simpleCart.js for Blogger Store Checkout

1. E-mail Form and Submit - Included in BlogrShop responsive Blogger Template
2. PAYPAL - As per tutorial
3. Google Wallet - Find detail documentation here at simpleCart.js
4. Amazon Pay - Find detail documentation here at simpleCart.js 

Need Help? Contact us HERE.or use the comment form below.