How to Add Option Selection to PayPal JavaScriptButtons

Question

I'm trying to use the new PayPal JavaScriptButtons: https://github.com/paypal/JavaScriptButtons. How can I add a product variation drop-down select?

<script src="paypal-button-minicart.min.js?merchant=YOUR_MERCHANT_ID"
data-button="cart"
data-name="Product in your cart"
data-amount="1.00"
data-quantity-editable="1" 
data-on0="size"
data-os0="small"
data-os0="large"
data-option_select0="small"
data-option_select0="large"
></script>

I'm getting the on0 and option_select0 variable names from HTML Variables for Shopping Carts: https://www.x.com/developers/paypal/documentation-tools/paypal-payments-standard/integration-guide/Appx_websitestandard_htmlvariables#id08A6HH0D0TA, but I can't find any reference on how to use them correctly.

I can only produce hidden fields, like <input type="hidden" name="os0" value="small">. How do I get the actual drop-down with a list to appear?

Answer 1

Try use the option fields in this format: data-option0="Color=Blue:8.00,Green:12.00,Red:10.00" data-option1="Size=Small,Medium,Large"

And sample button codes here:

    <script src="button.js?merchant=YOUR_MERCHANT_ID"
        data-button="cart"
        data-name="Product in your cart"
        data-amount="1.00"
        data-quantity-editable="1" 
        data-type="form"
        data-host="www.sandbox.paypal.com"
        data-option0="Size=Small:8.00,Large:12.00"
        data-option1="Color=Red,Green,Blue"
        ></script>