Hey Rohit, its not possible to do this entirely from the frontend. You will need to setup a serverless backend to handle this use case. Basically, the backend here will be responsible for creating a line item in the cart with the entered price.
This is how it would work.
You will need to create a product and set the price to 0.
Create a new template just for this product and assign it to the product created in the previous step.
Create a new section to render the important information about the product along with the price input field.
Add this section to the template created previously.
Setup click listener for the ‘Add to Cart’ button which, after performing some basic input validation, will send out a request to the serverless backend with all the required information such as the product ID, the price etc.
The backend will fire a mutation using the Admin API and create a product with the custom price. It will also add it to the cart.
Once done, you will send a response to the frontend indicating that the process was successful.
In the frontend, you can then proceed to the cart or the checkout pages.
I hope it gives you an idea of how it can work.