Integrate Magic Checkout With Shopify Store

Prerequisites

Fill in the

• Email address
• Mobile number
• Razorpay MID: You can find your MID on the top right corner of the

  Razorpay Dashboard

  .
• Razorpay API keys: Generate the

  API keys

  from the

  Razorpay Dashboard

  by navigating to Account & Settings → Website and app settings → API keys.
• If you are a Shopify Native user
• If you offer COD
• 4 digit-Shopify collaborator code:
  1. Log in to the

     Shopify Store

     using your admin credentials.
  2. Navigate to Settings → User and permissions.
  3. Scroll down to the Collaborators section and copy the Collaborator Request Code.
     
• Test Shopify theme name: Magic Checkout will be enabled on this test theme; you can then publish this on your live theme post-integration.

Integration Steps

Follow the steps given below:

1. Shopify Dashboard

1. Log in to the

   Shopify Store

   and navigate to Products.
2. Select all the products and click Include in sales channels.
   
3. Select the Magic Checkout check box and click Include products.
4. Navigate to Settings → Taxes and duties.
5. Scroll down to the Global settings section and select the Include sales tax in product price and shipping rate check box. Click Save.
   
6. In the Settings section, navigate to Checkout.
7. Scroll down to the Order status page additional scripts section and add the following code in the Additional scripts section:

javascript

copy

<script>
if (((document.getElementById("phone") && document.getElementById("phone").value) || (document.getElementById("email") && document.getElementById("email").value)) && document.getElementById("order_number") && document.getElementById("order_number").value) {
document.querySelector('form > div.section__content > div > button.btn').click();
}
</script>

Watch Out!

After customers place their order, they are redirected to an order status page confirming the order placement. Shopify adds two fields and a login button for extra security:

• Phone number or Email
• Order number

The above details are prefilled; customers only need to click the login button to view their address, order, and payment confirmation. If the script mentioned above is added, this login will be automated.

For some users on the Shopify basic plan, the Additional Scripts tab is disabled. In this case, customers must manually click the login button.

2. Razorpay Dashboard

1. Log in to the

   Razorpay Dashboard

   .
2. Navigate to Account & Settings and click Branding in the Checkout settings section.
3. Customise the following based on your requirement:
   • Theme Color: Choose a theme colour for your brand. The default theme colour appears if none is specified.
   • Your Logo: Click Choose File to add your brand logo. Ensure that the logo is a square image with minimum dimensions of 256x256 px and that the maximum file size allowed is 1MB.
   • Collect email address from users on Checkout page: By default, the email address field is hidden on checkout. You can choose to configure the email address field based on your requirements:
     • No (Default): Customers will not be shown this field on checkout.
     • As an optional field: Customers can either enter their email address or choose to skip it.
     • As a mandatory field: Customers must enter their email address to proceed.

Next Steps

After successfully integrating your Shopify website with Magic Checkout, you can perform the following configurations on the Razorpay Dashboard to suit your business needs:

• Cash on Delivery

  : Enable COD and configure rules for specific locations, products, and order amounts, catering to customer preferences and logistical needs to increase sales.

• Partial Cash on Delivery

  : Enable customers to pay a partial order amount online and use cash on delivery for the remaining balance to reduce order cancellation risk.

• RTO

  : Use automated COD intelligence or manual review to decide whether to offer COD based on customer buying history, thus reducing RTO rates.

• Convert COD Orders to Prepaid

  : Encourage COD customers to switch to prepaid by offering discounts or incentives, reducing cash handling risks.

• Shipping Options

  : Set up shipping rates at the product, zone and method levels to optimise costs and improve delivery efficiency.

• International Shipping

  : Allow customers to enter international PIN codes, expanding your market reach globally.

• Coupons

  : Provide discounts via coupons to enhance engagement and reduce cart abandonment.

• Offers

  : Create prepaid offers that appear on the Magic Checkout payment page, boosting conversions and average order value.

• Google Analytics

  : Integrate Google Analytics for insights into customer behaviour and optimised marketing strategies.

• Google Ads

  : Integrate Google Ads to attract more visitors and increase sales.

• Facebook Ads

  : Integrate Facebook Ads to expand your reach and drive traffic to your store.

• Gift Card

  : Enable gift card settings to allow multiple gift cards or restrict their combination with coupons or COD, boosting sales through gift purchases.

Related Information