Widget Installation

To install the widget simply:

Include Magic Checkout scripts in the page template
Add Magic Checkout HTML tag in the page template
Add custom js to manage the Magic Checkout Events

1. Include Magic Checkout scripts

Add Magic library scripts into head tag of product or cart HTML page:

<script src="https://cdn.stg.magiccheckout.com/widget/magic-widget.js"></script>

2. Add Magic Checkout HTML tag in the page template

Place the widget in the desired location in the HTML of the product, cart and mini cart page:

<magic-checkout
    mode="product"
    merchant-token='xxx-xxx-xxx-xxxxxxx-xxxx'
    language='it'
    country='IT'
></magic-checkout>

Below you can find values you can associate to the "mode" and "merchant-token" parameter:

Parameters	Value	Use
mode	product	widget on Product Page
mode	cart	widget on Cart Page and Mini-Cart
merchant-token	token ID	Merchant Token for Staging env or available on your Merchant Portal to Go-Live with Magic

📘
Staging Environment
Merchant Token
ea4db480-8a63-4b89-9a09-7e46f3092810
Secret Key
e684a129-36a0-46d3-8176-801f797f06ab

To be able to login to the Staging Merchant Portal and check all the Test Transactions, you have to send us an available email address in order to create a new user and send you the temporary password for the first login.

The Production Merchant Token will be available on the Production Merchant Portal once all the tests will be done with good results.

3. Add custom js to manage the Magic Checkout Events

The e-commerce platform will embed the following javascript into the product, cart and mini-cart page to allow the Magic checkout popup to call the relevant methods.

<script>
  class MagicError extends Error {
    constructor(code, message) {
    super(message);
    this.code = code;
  }
}
var magicCheckout = magicCheckout ||  {
    onExpressCheckout: function() {
        /*
        * Express checkout on product page
        * Get the product details on the current product page
        * returns the current product details and order amount details
        * throw error where is an exception
        */
    },
    onCheckout: function () {
        /*
        * Checkout on cart page
        * Get products details on the cart page
        * returns cart products details and order amount details
        * throw error when exceptions happen
        */
    },
    onShippingAddressChange: function (data) {
        /* 
        * Get shipping options with a given address and checkoutId
        * returns a list of shipping options with checkoutId
        * throw error when exceptions happen
        */
    },
    onShippingMethodChange: function (data) {
        /*
        * Get order amount details with selected shipping method
        * throw error when exceptions happen
        */
    },
    onCouponCodeAdd: function (data) {
        /*
        * Get updated checkout items, orderAmount and shippingMethods incorporating with adding the coupon code
        * throw error when exceptions happen
        */
    },
    onCouponCodeRemove: function (data) {
        /*
        * Get updated checkout items, orderAmount and shippingMethods incorporating with removing the coupon code
        * throw error when exceptions happen
        */
    },
    onCustomerUpdate: function(data) {
        /*
        * Send customer information (name, email and phone number) to e-commerce platform to save for abandon cart
        * throw error when exceptions happen
        */
    },
    onOrderCreate: function (data) {
        /* 
        * Request that the order get created on the e-commerce platform as well as the magic server
        * Retreive the orderId and the magicOrderToken
        * throw error when exceptions happen
        */
    },
    onOrderComplete: function (data) {
        /*
        * This is used to capture the order on e-commerce platform and the magic server backend after sucesfully taking payment
        * throw error when exceptions happen
        */
    }
}
</script>

Check more about the Magic Checkout Events.