<p>I was barking up the wrong tree for the whole time. The template code was fine. It turned out that jQuery was missing. I’ve had a console error telling me <code>ReferenceError: Can't find variable: $ in paymentForm.js:6</code>. The injected code doesn’t seem to make sure jQuery is available. </p>

<p>I’ve made sure jQuery was available and from then on it worked like a charm.</p>

<p>When the payment form looks like this, something is wrong:
<a href="https://i.sstatic.net/X6CUH.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/X6CUH.png" alt="Form looks like this? It might be jQuery missing"></a></p>

<p>When it looks like this, the injected JavaScript works properly:</p>

<p><a href="https://i.sstatic.net/GE0fm.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/GE0fm.png" alt="This is what the form is supposed to look like"></a></p>

<p>Oh man, I just wasted so much time...</p>

CC BY-SA 4.0
2019-05-21T16:07:49.823Z
2019-05-21T16:07:49.823Z
medoingthings
<p>So I had trouble with the demo's also. But if you head into the Craft Demo Store Templates you will find the following demo page you can use. Here's what I used to get it working.</p>

<pre><code>{% set plans = craft.commerce.getPlans().getAllPlans() %}

{% if currentUser and plans|length%}
    {% for plan in plans %}
        &lt;div class="md:flex service"&gt;
            &lt;div class="md:w-1/4"&gt;
                &lt;h2 class="mt-8"&gt;{{ plan.name }}&lt;/h2&gt;
                {% set information = plan.getInformation() %}
            &lt;/div&gt;
            &lt;div class="md:w-3/4 md:mt-8 md:pt-4"&gt;
                {% set subscriptions = plan.getActiveUserSubscriptions(currentUser.id) %}
                {% if subscriptions|length == 0 %}
                    &lt;p&gt;&lt;strong&gt;You have no subscriptions to this plan.&lt;/strong&gt;&lt;/p&gt;
                {% endif %}
                {% if subscriptions|length &gt; 1 %}
                    &lt;p&gt;&lt;strong&gt;You have multiple subscriptions to this plan.&lt;/strong&gt;&lt;/p&gt;
                {% endif %}
                {% for subscription in subscriptions %}
                    {% if subscription.isCanceled %}
                        Your subscription was canceled on {{ subscription.dateCanceled|date('Y-m-d') }} and will expire on {{ subscription.nextPaymentDate|date('Y-m-d') }}
                    {% else %}
                        You are subscribed and your next payment is due on {{ subscription.nextPaymentDate|date('Y-m-d') }}
                    {% endif %}
                    &lt;br /&gt;&lt;br /&gt;

                    &lt;a href="{{ url('/shop/services/subscription', {subscription: subscription.id}) }}"&gt;Manage subscription&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                {% endfor %}
            &lt;/div&gt;
        &lt;/div&gt;
        {% if loop.last %}
            &lt;hr /&gt;
        {% endif %}
    {% endfor %}
    &lt;div class="md:flex"&gt;
        &lt;div class="md:w-1/4"&gt;
            &lt;h2&gt;Available plans&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="md:w-3/4 md:pt-4"&gt;
            {% for plan in plans %}
                &lt;form method="POST"&gt;
                    &lt;input type="hidden" name="action" value="commerce/subscriptions/subscribe"&gt;
                    &lt;input type="hidden" name="planUid" value="{{ plan.uid|hash }}"&gt;
                    {{ redirectInput('shop/services') }}
                    {{ csrfInput() }}

                    &lt;h4&gt;{{ plan.name }}&lt;/h4&gt;

                    &lt;select name="trialDays" data-plan="{{ plan.id }}"&gt;
                        {% for i in [0, 3, 7, 14] %}
                            {% if i == 0 %}
                                &lt;option value="{{ (plan.uid~':0')|hash}}"&gt;No trial period.&lt;/option&gt;
                            {% else %}
                                &lt;option value="{{ (plan.uid~':'~i)|hash  }}"&gt;Trial for {{ i }} days&lt;/option&gt;
                            {% endif %}
                        {% endfor %}
                    &lt;/select&gt;

                    {% set paymentSources = craft.commerce.getPaymentSources().getAllGatewayPaymentSourcesByUserId(plan.gateway.id, currentUser.id ?? null) %}

                    {% if not paymentSources|length %}
                        &lt;div class="paymentForm"&gt;
                            {{ plan.gateway.getPaymentFormHtml({})|raw }}
                        &lt;/div&gt;
                    {% endif %}

                    &lt;button type="submit"&gt;{{ "Subscribe"|t }}&lt;/button&gt;
                &lt;/form&gt;
            {% endfor %}
        &lt;/div&gt;
    &lt;/div&gt;
{% endif %}
</code></pre>

CC BY-SA 4.0
2019-05-16T07:32:52.307Z
Does the subscribing to a plan without a predefined payment source work for you with this example? Because for me it has the same issues that I mentioned in my question (no errors when entering wrong credentials etc.). Because if it worked for you, maybe there is something else wrong with my installation.
medoingthings
CC BY-SA 4.0
2019-05-16T11:21:06.660Z
I would get started with the default dummy gateway first, get your subscriptions working. Once you've nailed that, try Stripe. I didn't get it working with Stripe but it should be fairly simple if it's working with the dummy gateway - make sure your webhook and everything is set up correctly. If all else fails - contact Andris through Discord, the docs for subscribing are fairly `loose` and need to be a bit more comprehensive.
JMKelley
CC BY-SA 4.0
2019-05-21T12:31:19.867Z
That was actually very helpful advice. I tried the dummy gateway and it worked flawlessly. Which meant that there must be something else wrong. Turns out: I only tested with the card details. But the Stripe backend requires address and etc. So when I add those details in the Stripe backend and then retry with the subscription form, it works. I’ll check what else there is to do and post the working example here. Thanks for the nudge into the right direction @JMKelley!
medoingthings
CC BY-SA 4.0
2019-05-14T14:59:19.770Z
2019-05-14T14:59:19.770Z
JMKelley
<p>I’m new to Craft Commerce and am really having trouble getting started with subscriptions.</p>

<p>I used the example from the <a href="https://docs.craftcms.com/commerce/v2/subscription-templates.html#subscribing" rel="nofollow noreferrer">docs</a> and nothing happened. When reloading the cp though, it kept telling me "Unable to start the subscription. Please check your payment details." I learned from the docs that "Subscribing a user to a plan requires that the user have a stored payment source." So I added the <code>getPaymentFormHtml</code> bit. Without any success. Not to mention error messages of any kind. </p>

<p>This is my template so far:</p>

<pre><code>&lt;ul&gt;
{% for item in craft.session.getFlashes() %}
    &lt;li&gt;{{item}}&lt;/li&gt;
{% endfor %}
&lt;/ul&gt;

{% set plans = craft.commerce.getPlans().getAllPlans() %}

&lt;form method="POST"&gt;
    &lt;input type="hidden" name="action" value="commerce/subscriptions/subscribe"&gt;

    {{ csrfInput() }}

    &lt;div&gt;
        {% for plan in plans %}
            &lt;input type="hidden" name="planUid" value="{{ plan.uid|hash }}"/&gt;

            {# Display only if the user does not have a payment soure saved #}
            {{ plan.getGateway().getPaymentFormHtml({})|raw }}

        {% endfor %}
    &lt;/div&gt;

    &lt;button type="submit"&gt;{{ "Subscribe"|t('commerce') }}&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p>I’ve set up a subscription in the cp, added store information and tried a valid testing card from the <a href="https://stripe.com/docs/testing#cards" rel="nofollow noreferrer">stripe docs</a>. But even then it keeps giving me the above flash notice.</p>

<p>Could anybody shed some light here? Am I missing anything obvious? </p>

<plugin-craftcommerce2>
Getting started with Craft Commerce 2 subscriptions using Stripe
# Getting started with Craft Commerce 2 subscriptions using Stripe

(Asked by: username_0 on 2019-05-14)

I’m new to Craft Commerce and am really having trouble getting started with subscriptions.
I used the example from the docs and nothing happened. When reloading the cp though, it kept telling me "Unable to start the subscription. Please check your payment details." I learned from the docs that "Subscribing a user to a plan requires that the user have a stored payment source." So I added the getPaymentFormHtml bit. Without any success. Not to mention error messages of any kind. 
This is my template so far:

{% for item in craft.session.getFlashes() %}
    {{item}}
{% endfor %}


{% set plans = craft.commerce.getPlans().getAllPlans() %}


    

    {{ csrfInput() }}

    
        {% for plan in plans %}
            

            {# Display only if the user does not have a payment soure saved #}
            {{ plan.getGateway().getPaymentFormHtml({})|raw }}

        {% endfor %}
    

    {{ "Subscribe"|t('commerce') }}


I’ve set up a subscription in the cp, added store information and tried a valid testing card from the stripe docs. But even then it keeps giving me the above flash notice.
Could anybody shed some light here? Am I missing anything obvious?

**Tags:** plugin-craftcommerce2

---

## 2 answers

### Answer by username_0 on 2019-05-21. Score: 3 | Accepted answer

I was barking up the wrong tree for the whole time. The template code was fine. It turned out that jQuery was missing. I’ve had a console error telling me `ReferenceError: Can't find variable: $ in paymentForm.js:6`. The injected code doesn’t seem to make sure jQuery is available.

I’ve made sure jQuery was available and from then on it worked like a charm.

When the payment form looks like this, something is wrong:
[![Form looks like this? It might be jQuery missing](https://i.sstatic.net/X6CUH.png)](https://i.sstatic.net/X6CUH.png)

When it looks like this, the injected JavaScript works properly:

[![This is what the form is supposed to look like](https://i.sstatic.net/GE0fm.png)](https://i.sstatic.net/GE0fm.png)

Oh man, I just wasted so much time...


---

### Answer by username_1 on 2019-05-14. Score: 2

So I had trouble with the demo's also. But if you head into the Craft Demo Store Templates you will find the following demo page you can use. Here's what I used to get it working.
{% set plans = craft.commerce.getPlans().getAllPlans() %}

{% if currentUser and plans|length%}
    {% for plan in plans %}
        
            
                {{ plan.name }}
                {% set information = plan.getInformation() %}
            
            
                {% set subscriptions = plan.getActiveUserSubscriptions(currentUser.id) %}
                {% if subscriptions|length == 0 %}
                    You have no subscriptions to this plan.
                {% endif %}
                {% if subscriptions|length > 1 %}
                    You have multiple subscriptions to this plan.
                {% endif %}
                {% for subscription in subscriptions %}
                    {% if subscription.isCanceled %}
                        Your subscription was canceled on {{ subscription.dateCanceled|date('Y-m-d') }} and will expire on {{ subscription.nextPaymentDate|date('Y-m-d') }}
                    {% else %}
                        You are subscribed and your next payment is due on {{ subscription.nextPaymentDate|date('Y-m-d') }}
                    {% endif %}
                    

                    Manage subscription
                {% endfor %}
            
        
        {% if loop.last %}
            
        {% endif %}
    {% endfor %}
    
        
            Available plans
        
        
            {% for plan in plans %}
                
                    
                    
                    {{ redirectInput('shop/services') }}
                    {{ csrfInput() }}

                    {{ plan.name }}

                    
                        {% for i in [0, 3, 7, 14] %}
                            {% if i == 0 %}
                                No trial period.
                            {% else %}
                                Trial for {{ i }} days
                            {% endif %}
                        {% endfor %}
                    

                    {% set paymentSources = craft.commerce.getPaymentSources().getAllGatewayPaymentSourcesByUserId(plan.gateway.id, currentUser.id ?? null) %}

                    {% if not paymentSources|length %}
                        
                            {{ plan.gateway.getPaymentFormHtml({})|raw }}
                        
                    {% endif %}

                    {{ "Subscribe"|t }}
                
            {% endfor %}
        
    
{% endif %}

> **Comments:**
> **username_0**: Does the subscribing to a plan without a predefined payment source work for you with this example? Because for me it has the same issues that I mentioned in my question (no errors when entering wrong credentials etc.). Because if it worked for you, maybe there is something else wrong with my installation.  
> **username_1**: I would get started with the default dummy gateway first, get your subscriptions working. Once you've nailed that, try Stripe. I didn't get it working with Stripe but it should be fairly simple if it's working with the dummy gateway - make sure your webhook and everything is set up correctly. If all else fails - contact Andris through Discord, the docs for subscribing are fairly `loose` and need to be a bit more comprehensive.  
> **username_0**: That was actually very helpful advice. I tried the dummy gateway and it worked flawlessly. Which meant that there must be something else wrong. Turns out: I only tested with the card details. But the Stripe backend requires address and etc. So when I add those details in the Stripe backend and then retry with the subscription form, it works. I’ll check what else there is to do and post the working example here. Thanks for the nudge into the right direction @JMKelley!  

---

