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.
- 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”.
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:
Magic API endpoint
You could add the Magic Checkout button in 3 different areas of your site:
1- Product Page
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:
Direct above the Add to Cart button
Directly above the View Cart / Checkout buttons
Directly above the Checkout button
Updated about 1 year ago