How to Enable magic checkout options for razorpay in store

Payments + Shipping & Fulfilment
, ,
1

I have been asked by my client to integrate the razorpay magic checkout to the store. I have tried razorpay form fillup method but no solution found yet. can it be done ?

2

Hello @K_Kundan please use this code

Step 1 — Open Mobile Menu File

Search these files:
header-drawer.liquid
mobile-menu.liquid
menu-drawer.liquid
Find code similar to:
<summary>
{{ link.title }}
</summary>
or:
<details>

Step 2 — Replace Parent Item Structure
Replace the parent menu block with this:
<li class="mobile-menu-item">

<div class="mobile-menu-parent">

<a href="{{ link.url }}" class="mobile-parent-link">
{{ link.title }}
</a>

{% if link.links != blank %}
<button
type="button"
class="submenu-toggle"
aria-expanded="false"
>
+
</button>
{% endif %}

</div>

{% if link.links != blank %}
<ul class="mobile-submenu">
{% for childlink in link.links %}
<li>
<a href="{{ childlink.url }}">
{{ childlink.title }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}

</li>
Step 3 — Add JavaScript
Add before or in theme JS:
document.querySelectorAll('.submenu-toggle').forEach((button) => {

button.addEventListener('click', function (e) {

e.preventDefault();

const parent = this.closest('.mobile-menu-item');
const submenu = parent.querySelector('.mobile-submenu');

submenu.classList.toggle('active');

this.setAttribute(
'aria-expanded',
submenu.classList.contains('active')
);

});

});
Step 4 — Add CSS
.mobile-submenu {
display: none;
}

.mobile-submenu.active {
display: block;
}

.mobile-menu-parent {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.mobile-parent-link {
flex: 1;
}