Drop down option for products in Payment field

I have three products with different prices and a customer can choose only one of them. So, I want a drop down menu with all three products listing, and a customer to be charged according to the product he chooses. I saw product selection by check boxes, but in this way multiple products can be chosen.

It is possible to use drop down for your products in payment field. Please check this demo that I created. You can clone it if you like. Here's a guide on how to do it.

1. Click the payment field then click the "Wizard" icon.

2. Press the "Next" button twice to reach the products page.

3. Click "Add New Product" button.

4. After adding the product, click the "Add New Option".

5. Select "Add a Custom Property".

6. Put a label name "Choose One" and then put the values separated by breaks or another line.

item 0 - Select a Product - $0.00
item 1
item2
item3

7. After that, you can put the prices for each item.

8. Click finish and save the form.

Now you need to inject this custom CSS code to hide the price beside "My Products".

.form-product-details { display: none; }

This is how it should look like:

Hope this works. Thank you.