10.2 Configuration/Setup
"For the shopping cart to be enabled, there are a few configurations that has to be done from the Blubilling Application.
Below are the steps to be followed to enable this.
1. Log Into Blubilling and on the Menu Bar Goto>Plans>Plans and Charges.
2. On the Plans and Charges page, select the plan for which you want to have the Add to Cart button on your webpage and Click Edit.
3. On the Edit Plan page, Click on 'Show/Hide Advanced Options'
4. Under 'Show/Hide Advanced Options' you can accomplish the below tasks
Generate an Add to Cart button
Click on Generate (Add to Cart) Code.
This generates a HTML code for embedding this button inside your website to enable customers to buy this subscription or product.
A default style for the button with the color, font and font size will be created which can be edited by the Client according to their Webpage's look and feel
You also can Generate a Buy Now button which will take your customer directly to the Cart page.
To accomplish this you need to first add your BluSynergy URL or if you are embedding inside an iframe, add your Cart URL. Example if you embed iframe at https://yourdomain.com/cart enter this url
After adding the URL, click on the Generate [Buy Now] code to get the HTML code which you can insert in your webpage.
After generating the code for the button to be inserted on to your webpage, click on Save.
The button created now can be placed on the client's website for the products/subscriptions to be purchased through the webpage.
Now on cart URL page, https://yourdomain.com/cart Use below code in iframe.
<iframe src="http://yourdomain.blubilling.com/shoppingCart/cart" style="width: 100%;height: 100%" frameborder="0"></iframe>
If customer clicks on BUY NOW button, he would see below screen with Plan, custom fields and checkout section details.
If customer wants to see full detail view page which includes Charges, recurring billing details and other info, edit already generated Buy now code part and add as below.
Section A. If they are not using iframe
<form data-form="blusynergy_add_cart" target="blusynergy" action="http://yourdomain.blubilling.com/shoppingCart/add_to_cart" method="POST">
<input type="hidden" name="buttonId" value="485541574549"/>
<input type="hidden" name="profileId" value="DEFAULT"/>
<input type="hidden" name="buttonType" value="BUY_NOW"/>
<input type="hidden" name="cartUrl" value="http://yourdomain.blubilling.com
/shoppingCart/cart?displayMode=fullDetail"/>
<input type="submit" value="LocalMonthly" class="btn" style=""/>
</form>
Section B. If they are using Iframe
Add following section in your html head.
<head>
<script type="application/javascript" src="https://yourcompany.blubilling.com/js/shoppingCart.js"></script>
...
</head>
<iframe src="http://yourdomain.blubilling.com/shoppingCart/cart?displayMode=fullDetail" style="width: 100%;height: 100%" frameborder="0"></iframe>
Below is the screen with The Updated Buy now button code.
Note: All the product description is generated on the client's website and BluSynergy will enable the shopping cart functionality which will help the client to place the product in the cart, 'place order' and 'submit order'.
5. Navigate to System>Customer Care>Self-Service settings, click on your profile
Goto Shopping Cart tab and enable the below option if you would like to use the Shopping cart module as an iframe on your web page.
The below figure shows some of the other configuration settings available for the Shopping Cart module
Success URL: This field will enable you to enter the URL to which you want your customers redirected to after the payment is completed.
Express Checkout:
Yes - This option will allow the user to check out with minimal redirections and fewer clicks (reference image below)
No - This option will have Cart and Signup on different screens.
Username Option:
Yes - This will allow your customers to choose different username and email
No - This will save email ID of your customer by default as their username.
Confirm Email Option: Yes/No
This option will insert another field (below email) asking your customers to confirm their email ID again.
Address Fields: Show/Hide
This option will ask your customers to enter their address or not if this is enabled or disabled respectively.
Payment Process Order
Process Payment before Invoice: Click here
Process Payment after Invoice: Click here
Show/Hide profile after login: Skip/Show
This option will enable your customer to skip or allow them to update their profile information before proceeding towards payment page. Customer can update details before proceeding to make the payment if they select 'show profile after login'. If not the customer can skip this page and directly proceed to make payment by selecting 'skip profile after login'.
Payments Tab
On this form, enable payment methods that you would like your customer to use for making payments from your webpage.
If any of the above payment methods are enabled in the self service configuration page, these payment methods will be available for the users to choose during the order placement.
For eg: If 'cash on delivery' is enabled in the self service configuration page, this mode of payment will be available for the customer to choose when the customer reaches payment stage for the product they purchased.
7. On the same configuration page (System>Customer Care>Self-Service settings), a success URL can be added. This will be the page to which the customer will be re directed to after making a payment.
For Eg: The organization implementing the Shopping cart might want the customer to be redirected to the client's home page or the to a terms and conditions page.. etc
