Plugin Installation & Configuration

❗️
Important!
Once you have installed and configured the plugin, be sure to:

Test all its functionalities including order checkout flow and refund flow

Appearance of Magic Checkout on product, mini-cart and cart pages.

Correctly insert the API key to go live.

Install your WooCommerce Plugin

Login at your admin panel with your credentials.
The URL should be something like: yoursitename.com/wp-admin/

After successfully Login to backend Admin from left navigation select Plugins > Add New .

The following screen will show up. Click on Upload Plugin and then on Browse.

Select your Magic Checkout zip file using popup window.
When you click on Install now button, the plugin will be uploaded and installed but not activated yet.
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”.

Magic Payment Settings

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

Plugin → Installed Plugins → Magic Checkout → Settings

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 Version	Version of the installed Magic Checkout Plugin
Enable/Disable	Status of the Magic Checkout Plugin
Mode	Select the Endpoint to the Magic CDN. Value: Staging / Production
Merchant Token	Provided in your merchant onboarding email
Secret Key	Provided in your merchant onboarding email
Product Page - Toggle Magic	Select "Yes" to show on Product Page or "No" to hide from that page
Button Position On Product	Select 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 Magic	Select "Yes" to show on Cart Page or "No" to hide from that page
Button Position On Cart	Select 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 Magic	Select "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 Status	Indicate the Order Waiting Status before the customer finalizes payment.
Order Status	Select the status in which the order with Magic is to be saved
Hide Magic Button On Product Types	Hide Magic button for selected product types (Simple Product, Grouped Product, Variable Product)
Hide Magic Button On Categories	Hide magic button for selected categories
Excluded Shipping Methods	Select Shipping Methods not allowed inside Magic Checkout
Analytics Scripts	All the Scripts used to track the Order flow
Button Style	Add some style to the button. This style will be added to wrapper div of the button.
Enable Error Logs	Status 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.