Updating of selling plan error 400

[Jun_Kuan]

I followed this documentation:
https://shopify.dev/docs/themes/pricing-payments/purchase-options/support-purchase-options#the-selli...

My current code is this:

<select name="selling-plan" data-line="{{ forloop.index }}" data-quantity="{{ item.quantity }}" id="selling-plan-selector-{{ item.id }}">
  <option value="">One-time purchase</option>
  {% for allocation in item.variant.selling_plan_allocations %}
    {% assign selling_plan = allocation.selling_plan %}
    <option value="{{ selling_plan.id }}"
      {% if item.selling_plan_allocation and item.selling_plan_allocation.selling_plan_id and item.selling_plan_allocation.selling_plan_id == selling_plan.id %}selected="selected"{% endif %}>
      {{ selling_plan.name }}
    </option>
  {% endfor %}
</select>

<script>
  document.querySelectorAll('[name="selling-plan"]').forEach(function(element) {
    element.addEventListener('change', function(e) {
      console.log('Select Element InnerHTML:', e.target.innerHTML);
      console.log('Selected Selling Plan ID:', e.target.value);
      let data = {
        'line': e.target.dataset.line,
        'quantity': e.target.dataset.quantity,
        'id': e.target.value
      };
  
      console.log('Sending data:', JSON.stringify(data)); // Check the data object again
  

      // Log the data object that will be sent in the request
      console.log('Sending data:', JSON.stringify(data));

      fetch('/cart/change.js', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      })
      .then(response => {
        // Log the response status and status text
        console.log('Response Status:', response.status);
        console.log('Response Status Text:', response.statusText);

        return response.json();
      })
      .then(responseData => {
        // Log the full response data
        console.log('Response Data:', responseData);

        // Refresh page, or re-render cart
      })
      .catch((error) => {
        console.error('Error:', error);
      });
    });
  });
</script>

But when I try to change the selling plan through my select element, Im getting error 400 from cart/change.js. Here's the error:

{
"status": "bad_request",
"message": "Parameter Missing or Invalid",
"description": "Required parameter missing or invalid: 'line' or 'id' param is required"
}

[Liam]

Hi Jun,

It sounds like the request you're sending to the /cart/change.js endpoint is incomplete or doesn't contain correct values for the 'line' or 'id' parameters. Can you log the data object to check that it returns the correct line, quantity, and id values? If these are not being logged correctly then you can identify that data is not being pulled from Shopify correctly. 

I'd also recommend reviewing the Ajax documentation to ensure you're accessing the cart/change.js endpoint correctly.