Why isn't my subscription app displaying purchase options on the product page?

[Mkarrar]

I am developing a subscription in which i have created a selling plan group and added product and its variant now when i am trying to show the purchase option on product page so the sellingplangroups array shows nothing.
this is the liquid code i added to my product template

{%- liquid
assign current_variant = product.selected_or_first_available_variant | default: product.variants.first
assign current_selling_plan_allocation = current_variant.selected_selling_plan_allocation

if current_selling_plan_allocation == nil and current_variant.requires_selling_plan
assign current_selling_plan_allocation = current_variant.selling_plan_allocations | first
endif

assign offer = current_selling_plan_allocation | default: current_variant
-%}

{{ product.title }}
{% for planGroup in product.selling_plan_groups %}
{{ planGroup.name }}
{% endfor %}
{{ offer.price | money }}

{% if offer.compare_at_price > offer.price %}
<s>{{ offer.compare_at_price | money }}</s>
<span>{% if offer.selling_plan %}Purchase options{% else %}Sale{% endif %}</span>
{% endif %}

{% form 'product', product %}
<input type="hidden" name="id" value="{{ current_variant.id }}">
<input type="hidden" name="selling_plan" value="{{ current_selling_plan_allocation.selling_plan.id | default: '' }}">

<fieldset>
<legend>Product options</legend>

{% for option in product.options_with_values %}
<label>{{ option.name }}</label>

<select>
{% for value in option.values %}
<option>{{ value }}</option>
{% endfor %}
</select>
{% endfor %}
</fieldset>

<!-- Pass the product object as JSON so it can be used to update selling plan information using JavaScript -->
<fieldset class="selling-plan-fieldset" data-product={{ product | json }}>
<legend>Purchase options</legend>
{% unless product.requires_selling_plan %}
<input type="radio" name="purchase_option"> One-time purchase
{% endunless %}

{% for group in product.selling_plan_groups %}
<input type="radio" name="purchase_option"> {{ group.name}}

{% for option in group.options %}
<label>{{ option.name }}</label>

<select data-position="{{ option.position }}">
{% for value in option.values %}
<option>{{ value }}</option>
{% endfor %}
</select>
{% endfor %}
{% endfor %}
</fieldset>
{% endform %}

i have confirmed that the selling plan group is associated with the product by retrieving the product data through graph ql query

but still on the product page looks like this

no purchase options are showing

and please guide me what is this subscription contract, should i create it as on the shopify doc it says shopify will create it by itself if the product is purchased through checkout

thanks in advance.

[Mkarrar · Accepted solution]

found the solution,
the issue was that our store did not meet the requirements to apply selling plan groups on product page, so the one which I was missing was the payment method, as for selling plan groups your store should use shopify pay, paypal or stripe.
after enabling shopify pay testing mode the product object selling plan groups got the plan groups which i created through my app