• Facebook
  • Twitter

PayPal HTML Shop


Thank you for purchasing this plugin. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!

 

Scope of free support

 

We can help you with:

  1. Responding to questions or problems regarding the item and its features
  2. Fixing any discovered item’s bugs
  3. Providing updates to ensure compatibility with new software versions

PayPal HTML Shop plugin allows you to add shop functionality with PayPal payments to your HTML website. You can customize it with number of various parameters. Change the skin, Paypal settings and much more.
Please read this documentation to discover all available options.


Installation


Remember: 
Please DO NOT test the plugin code directly from the package as the scripts may not load correctly.
The suggested way to test the plugin is via using LocalHost or (if possible) directly on a server.

 

PayPal HTML Shop requires the following scripts to be attached in HTML page:

 

You can also just use it for a body:

 

 

Once scripts are attached you can attach your HTML code and your own classes or use defaults. The default class names for product item are as follows:

You will need to add a <div/> which the plugin will use as a cart. The default is:

 

For the wishlist the default is:

 

We prepared for you 6 predefined skins of the shop. To enable any of them just attach proper CSS stylesheet in your HTML.

 

EXAMPLES:

Below you will find example: skin preview along with the stylesheet, which needs to be attached to use the skin.

 

DIANA

Skin: Diana

Skin: Diana

 

ESTATO

Skin: Estato

Skin: Estato

 

FARMFRESH

Skin: FarmFresh

Skin: FarmFresh

 

MACAROON

Skin: Macaroon

Skin: Macaroon

 

RENTICA

Skin: Rentica

Skin: Rentica

 

CORPRESS

Skin: Corpress

Skin: Corpress


Available parameters


Once scripts are attached – plugin is installed, so you can attach your HTML code with your own classes or use defaults.
The default product markup looks like the following:

You will need to add a <div/> which will be used by the plugin as a cart. The default is:

Settings

Remember to change default PayPal settings to the one matching your own. Below you will find a list of all available settings. You can defined them with the following markup:

 

Main:

 VARIABLE DEFAULT TYPE DESCRIPTION
 cart “ct-cart” string Cart Class Name
 product “ct-product” string Product Class Name
 product_title “ct-product-title” string Product Title Class Name
 product_price “ct-product-price” string Product Price Class Name
 product_button “ct-btn” string Add to Cart Button Class Name
 currency “$” string Currency
 currency_after_number “false” boolean Enable/Disable showing currency after price value
 permanent_cart_buttons “false” boolean Enable/Disable Permanent Checkout/Clear buttons in Cart
 permanent_total_value “false” boolean Enable/Disable Permanent Total Value in Cart
 animation ” “ string Add Cart Item Animation
 empty_disable false boolean Enable/Disable “Cart is empty” text
 empty_text “The Cart is Empty” string Change text visible when cart is empty
 product_image “ct-product-image” string Product Image Class Name
 product_wishlist “ct-wishlist” string Wishlist Class Name
 promo_codes “true” boolean Enable/Disable Promo Code Field
 shipping_options “true” boolean Enable/Disable Shipping Rates Dropdown Menu (paypal shipping need to be disabled to use this option)
 small_cart “ct-small-cart” string Adding custom class for small cart
 display_small_cart “false” boolean Enable/Disable small cart on the site
 display_name (small_cart_option) “Cart:” string Visible as the name of small cart on the site
 items_name (small_cart_option) “item(s)” string Visible as the name identifies items
 wishlist (small_cart_option) “false” boolean Enable/Disable wishlist in cart
scroll (small_cart_option) “false” boolean Enable/Disable scroll in small cart (requires jquery.mCustomScrollbar.min.css and jquery.mCustomScrollbar.min.js)
scroll_style (small_cart_option) “dark” string Set scroll style depending on the selected name from HERE
scroll_height (small_cart_option) “400” string Set height of the cart (avaliable when scroll is set to “true”)
(new) promo_amount “0” string The discount will be added only if the value of the cart will be greater than the one set for this variable
(new) promo_tooltips “true” boolean Enable/Disable tooltip for the promo code
(new) promo_tooltips_time “2000” numbers Time in which the tooltip will be display
(new) promo_tooltips_animation “false” boolean Enable/Disable animation for the tooltip
(new) promo_tooltips_text “Your savings” string Text that will be visible for the tooltip
(new) promo_tooltips_date “12-30-2018” mm/dd/yy Set expiration date for the discount code
(new) promo_tooltips_position “top” string Avaliable tooltip position:
–  “top” – Tooltip on top
–  “bottom” – Tooltip on botto
–  “left” – Tooltip on left
–  “right” – Tooltip on right
–  “auto” – The browser will decide the position of the tooltip

Paypal:

 VARIABLE DEFAULT TYPE DESCRIPTION
 business  ” “  string Your PayPal ID or an email address associated with your PayPal account. Email addresses must be confirmed.
 currency_code  “USD”  string The currency of the payment.
 lc  “EN” string The locale of the login or sign-up page, which may have the specific country”s language available, depending on localization.
 cpp_cart_border_color  ” “ 6 single-byte hexadecimal characters The HTML hex code for your principal identifying color. PayPal blends your color to white in a gradient fill that borders the cart review area of the PayPal checkout user interface.
cpp_payflow_color  ” “ 6 single-byte hexadecimal characters The background color for the checkout page below the header.
 no_note  “0” 0/1 Do not prompt buyers to include a note with their payments. (1 – hide the text box and the prompt)
 no_shipping  “0” 0/1/2 Do not prompt buyers for a shipping address. Allowable values are: (0 – prompt for an address, but do not require one; 1 – do not prompt for an address; 2 – prompt for an address, and require one)
 return  ” “ url The URL to which PayPal redirects buyers” browser after they complete their payments.
 cancel_return  ” “ url A URL to which PayPal redirects the buyers” browsers if they cancel checkout before completing their payments.

Callbacks:

VARIABLE TYPE DESCRIPTION
init function fires after first initialization
before_add_to_cart function fires before append to cart happen
after_add_to_cart function fires after append to cart happen
remove_item_from_cart function fires after click a remove button in cart
before_checkout function fires before redirecting to paypal
after_clear_cart function fires after clearing the cart
after_value_changes function fires when total value changes
before_add_to_wishlist function fires before append to wishlist happen
after_add_to_wishlist function fires after append to wishlist happen
remove_item_from_wishlist function fires after remove button in wishlist

Adding Promo Codes


Before using Promo Codes remember to enable this option by setting promo_codes to true. When the option is enabled the field will be visible in the Shopping Cart.

Enabled Promo Code option

Enabled Promo Code option

 

You can define new Promo Codes using following markup:

 

Promo Codes (examples) Discount value DESCRIPTION
“discount30%” “30%” Customer will get discount equal to 30% of the full price
“discount300$” 300 Customer will get discount equal to 300 in the currency which is used in the shop

Creating promotional codes you need to remember that the codes that your clients will use, need to be a string value in the script.
The discount value for the Promo Codes can be set as a string (it has to end with %) or as a number.


Adding Wishlist


In PayPal HTML Shop you have two options to show the wishlist option for your products

DEFAULT: 

By adding this default markup to your product page:

Default Wishlist

Default Wishlist

INSIDE SMALL CART:

By activating small cart wishlist (when small cart wishlist is activated default option for the wishlist even if added will be ignored)

 

 

Wishlist in small cart

Wishlist in small cart


Shipping Options


Before using Shipping Options remember to enable this option by setting shipping_options to true. When the option is enabled the field will be visible in the Shopping Cart like in the image below.

Shipping

Shipping option in cart

You can defined new Shipping Options with the following markup:

Shipping option Cost DESCRIPTION
“Standard Mail” 20 To the prices  for products in cart will be added 20 in the currency which is used in the shop
“Express Mail” 50 To the prices for products in cart will be added 50 in the currency which is used in the shop

Examples of usage


Please check the live examples of shop pages: here

In purchased package you will find separate folders:

  • corpress
  • diana
  • estato
  • farmfresh
  • macaroon
  • rentica

With demo examples ready to use, including HTML code and CSS stylesheets. Feel free to just copy HTML markup to your website.


Elite Author
We are elite
CreateIT
Who we are

Hi, we are createIT. We create IT. Web applications and websites to be precise.

And we are REALLY good at it.

Get to know us at www.createIT.pl
Thanks for buying!