Plugin Installation & Configuration

Follow these steps to install the plugin!

❗️

Important!

Once you have installed and configured the plugin, be sure to:

  1. Test all its functionalities including order checkout flow and refund flow
  2. Appearance of Magic Checkout on product, mini-cart and cart pages.
  3. Correctly insert the API key to go live.

Install your WooCommerce Plugin

  1. Login at your admin panel with your credentials.
    The URL should be something like: yoursitename.com/wp-admin/
10441044
  1. After successfully Login to backend Admin from left navigation select Plugins > Add New .
334334
  1. The following screen will show up. Click on Upload Plugin and then on Browse.
19301930
  1. Select your Magic Checkout zip file using popup window.
  2. When you click on Install now button, the plugin will be uploaded and installed but not activated yet.
  3. Click on the Activate button to activate the plugin. You will be redirected to the plugin configuration page. Here you can start configuring your plugin accordingly to your needs and then save the settings.

To configure the plugin you can also go to the Installed plugins list on the left menu, find Magic Checkout and click on “settings”.

342342

Magic Payment Settings

To Enable Magic Checkout or to edit the plugin's configurations go to:

PluginInstalled PluginsMagic CheckoutSettings

1: Flag Enabled checkbox to enable the plugin

2: Click on the Save Changes button at the bottom of the page

To make sure you have installed the plugin with the Staging configurations correctly set, you have to find all this value in the configuration panel:

📘

Staging Environment

Magic API endpoint
https://api.stg.magiccheckout.com

Token
ea4db480-8a63-4b89-9a09-7e46f3092810

Secret Key
e684a129-36a0-46d3-8176-801f797f06ab

Widget CDN
Staging

Enable Magic Checkout - Product, Mini-Cart, Cart Page

You could add the Magic Checkout button in 3 different areas of your site:

1- Product Page
2- Mini-Cart
3- Cart Page

In the table below you can find the mapping of all the attributes you can find in the Magic Checkout Configuration panel on the Back-Office.

Current VersionVersion of the installed Magic Checkout Plugin
Enable/DisableStatus of the Magic Checkout Plugin
ModeSelect the Endpoint to the Magic CDN. Value: Staging / Production
Merchant TokenProvided in your merchant onboarding email
Secret KeyProvided in your merchant onboarding email
Product Page - Toggle MagicSelect "Yes" to show on Product Page or "No" to hide from that page
Button Position On ProductSelect Magic Checkout Button position to display on Product Page
Product Button Selector (for rendering Magic button)Add here the specific div element in which positioning Magic button on the Product Pages
Cart Page - Toggle MagicSelect "Yes" to show on Cart Page or "No" to hide from that page
Button Position On CartSelect Magic Checkout Button position to display on Cart Page
Cart Button Selector (for rendering Magic button)Add here the specific div element in which positioning Magic button on the Cart Page
Mini Cart - Toggle MagicSelect "Yes" to show on Mini Cart or "No" to hide from that page
Mini Cart Button Selector (for rendering Magic button)Add here the specific div element in which positioning Magic button on the Mini Cart
Order Waiting StatusIndicate the Order Waiting Status before the customer finalizes payment.
Order StatusSelect the status in which the order with Magic is to be saved
Hide Magic Button On Product TypesHide Magic button for selected product types (Simple Product, Grouped Product, Variable Product)
Hide Magic Button On CategoriesHide magic button for selected categories
Excluded Shipping MethodsSelect Shipping Methods not allowed inside Magic Checkout
Analytics ScriptsAll the Scripts used to track the Order flow
Button StyleAdd some style to the button. This style will be added to wrapper div of the button.
Enable Error LogsStatus of the collectable Magic Checkout Error Logs

👍

Magic Checkout Placement advice

For best product performance, Magic Checkout should appear as follows:

Product Page
Direct above the Add to Cart button

Mini-Cart Page
Directly above the View Cart / Checkout buttons

Cart Page
Directly above the Checkout button

Enable additional functions (Coupon Code, Fiscal Code, Marketing Option etc)

After you Go live with Magic, you can proceed enabling Coupon Code, Fiscal Code and Marketing Option fields and adding your Privacy and Cookie Policy and Terms&Conditions: you can find more info consulting the Merchant Portal instructions.