Using @shopify/theme-product-form and {{ form | payment_button }}

[LukaszFormela]

Hello,

I'm building my theme and got to a point of designing product page. I installed theme-product-form (and theme-product) with npm, included the package, used the exact same example as per package readme:
https://www.npmjs.com/package/@shopify/theme-product-form

Now - the following error is thrown in browser console on product page:
Uncaught (in promise) TypeError: Cannot read property 'value' of undefined

I narrowed down issue to few elements:
- issue appears when {{ form | payment_button }} is added,
- a script throwing the error is payment-sheet, when returning value here:

{
  key: "getVariantId",
  value: function() {
    var t = this.checkoutForm.elements;
    return Number(t.id.value)
  }
}

- a comment on sample product page states: In order for this form to submit, it needs to contain an input with name="id". ProductForm() will automatically create this input (or make sure it has the right value set if it already exists) on form submit based on the currently selected variant, but the input is not there yet,
- theme-product-form.js declares _setIdInputValue function, which is bound to _onSubmit function, which now contradicts what the comment says, as it adds a specific input on submit - when the payment button expects it on a page already.

What am I missing?

------------------------------
EDIT:
The following code creates an instance of ProductForm:

fetch(`/products/${productHandle}.js`)
  .then(response => {
    return response.json();
  })
  .then(productJSON => {
    const productForm = new ProductForm(formElement, productJSON, {
      onOptionChange
    });
  });

Third parameter passed to ProductForm is an options object. A definition of onOptionChange is:
A callback method that is fired whenever the user changes the value of an option input. The callback receives the event object described below as an arguement.

Is it possible that I would need to force an option change with code to jump start the whole process?

[LukaszFormela]

So almost 2 years ago people reported the same issue:
https://github.com/Shopify/theme-scripts/issues/85
https://github.com/Shopify/theme-scripts/issues/91

Can't believe this hasn't been addressed so far...

[LukaszFormela · Accepted solution]

So a solution to that would be putting the following input somewhere within the form:

<input type="hidden" id="defaultOption" name="id" value="{{ product.selected_or_first_available_variant.id }}">