- Overview
- Documents
The Minicart.js is a great way to improve your PayPal shopping cart integration. One simple change and your users will be able to manage their shopping cart directly from your website. Additional APIs provide you the power to customize the behavior to your needs.
Source: minicartjs.com
1. INCLUDE JS FILES
<script src="../dist/minicart.js"></script>
2. HTML
<form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <fieldset> <input type="hidden" name="cmd" value="_cart" /> <input type="hidden" name="add" value="1" /> <input type="hidden" name="business" value="[email protected]" /> <input type="hidden" name="item_name" value="Test Product" /> <input type="hidden" name="quantity" value="1" /> <input type="hidden" name="amount" value="1.00" /> <input type="hidden" name="currency_code" value="USD" /> <strong>Test Product</strong> <input type="submit" name="submit" value="Add to cart" /> </fieldset> </form>
3. JAVASCRIPT
paypal.minicart.render(); paypal.minicart.cart.on('add', function (idx, product, isExisting) { if (isExisting) { product.set('quantity', 1); alert('Sorry, you can only have one of those.'); } });
4. ADVANCED API
The minicart has a JavaScript API for advanced users to customize the behavior.
General
paypal.minicart.render(config) Renders the minicart to the page. Config is optional and can have the following properties:
- parent - HTMLElement the minicart should render to.
- target - HTML target property for the checkout form.
- action - PayPal URL (if you are accessing sandbox or another version of the PayPal website).
- template - HTML template for rendering.
- styles - CSS styles for rendering.
- strings - An object of text strings: button, buttonAlt, subtotal and discount.
paypal.minicart.reset() Resets the minicart back to its default state.
View
paypal.minicart.view.show() Triggers the minicart to show by adding a "minicart-showing" CSS class to the document.
paypal.minicart.view.hide() Triggers the minicart to hide by removing the "minicart-showing" CSS class on the document.
paypal.minicart.view.toggle() Toggles the visibility of the minicart.
paypal.minicart.view.bind(form) Binds an HTMLFormElement's submit event to the minicart. Useful for forms which may have been added to the page after the initial load.
Cart
paypal.minicart.cart.add(data) Adds an item to the cart. Fires the add event. Example data object:
{ "business": "[email protected]", "item_name": "Product", "amount": 5.00, "currency_code": "USD" }
paypal.minicart.cart.remove(idx) Removes an item from the cart by index. Fires the remove event.
paypal.minicart.cart.items(idx) Returns an array of items from the cart. If an index is passed then only that item is returned.
paypal.minicart.cart.settings(key) Returns an object of global cart settings. If a key is passed then only that value is returned.
paypal.minicart.cart.discount(config) Calculates the cart discount amount. config can be used for formatting.
paypal.minicart.cart.subtotal(config) Calculates the cart total minus discounts. config can be used for formatting.
paypal.minicart.cart.total(config) Calculates the cart total. config can be used for formatting.
paypal.minicart.cart.destroy() Destroys the cart data and resets it back to the default state. Fires the destroy event.
paypal.minicart.cart.on(event, fn, scope) Subscribe to cart events. Events include: * add - Fired when an item is added. function (idx, product, isExisting) * remove - Fired when an item is removed. function (idx, product) * checkout - Fired on checkout. function (evt) * destroy - Fired when the cart is destroyed. function ()
paypal.minicart.cart.off(event, fn) Unsubscribe from cart events.
Products
product.get(key) Returns a properties object for the product. If a key is passed then only that value is returned.
product.set(key, value) Sets a property for the product. Fires a change event.
product.options() Returns the options.
product.discount(config) Calculates the product discount. config can be used for formatting.
product.amount(config) Calculates the product amount discounts. config can be used for formatting.
product.total(config) Calculates the product total. config can be used for formatting.
product.isEqual(product2) Determines if the current product is the same as another.
product.destroy() Destroys the product. Fires the destroy event.
product.on(event, fn, scope) Subscribe to cart events. Events include: * change - Fired when a value is changed. function (key) * destroy - Fired when the product is destroyed.function ()
product.off(event, fn) Unsubscribe from product events.