Can't change plan | Stripe - node.js

Question

EDIT Project repo
I am using a boiler plate and have logged the issue with the creator but was hoping for help sooner. My issue is that when I go to change plans it tells me to please add a card before choosing a plan. The code for the page is as follows:
The form:
`<form {% if !user.stripe.last4 %}id="cardForm"{% endif %}
action="/user/plan" method="POST" class="form-horizontal">
<div class="form-group">
<label for="plan" class="col-sm-3 control-label">Plan</label>
<div class="col-sm-4">
{% for plan in plans %}
<div class="radio">
<label>
<input type="radio" {% if user.stripe.plan == loop.key
%}checked{% endif %} name="plan" value="{{loop.key}}" data-toggle="radio">
<span>{{plan.name}} - ${{plan.price}}</span>
</label>
</div>
{% endfor %}
</div>
</div>
{% if !user.stripe.last4 %}
<div id="cardWrapper">
<div class="form-group">
<label class="col-sm-3 control-label">Test Card Info</label>
<div class="col-sm-7">
<div class="form-control-static">4242424242424242, 11/19, 123 - additional test info</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Card Number</label>
<div class="col-sm-4">
<input id="card-num" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Card Details</label>
<div class="col-sm-4">
<div class="row">
<div class="col-xs-4">
<input id="card-month" type="text" size="2" maxlength="2"
class="form-control" placeholder="MM">
</div>
<div class="col-xs-4">
<input id="card-year" type="text" size="2" maxlength="2"
class="form-control" placeholder="YY">
</div>
<div class="col-xs-4">
<input id="card-cvc" type="text" size="3" maxlength="3"
class="form-control" placeholder="CVC">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<div id="cardFormError" class="alert alert-danger hidden"
role="alert">
<p>{{error}}</p>
</div>
</div>
</div>
</div>
{% endif %}
<div class="form-group">
<div class="col-sm-offset-3 col-sm-4">
<button type="submit" class="btn btn-primary">Update Plan</button>
</div>
</div>
</form>`
Calls the route /user/plan
app.post('/user/plan',
setRedirect({auth: '/', success: '/billing', failure: '/billing'}),
isAuthenticated,
users.postPlan);
users.postPlan is the issue I think:
exports.postPlan = function(req, res, next){
var plan = req.body.plan;
var stripeToken = null;
if(plan){
plan = plan.toLowerCase();
}
if(req.user.stripe.plan == plan){
req.flash('info', {msg: 'The selected plan is the same as the current plan.'});
return res.redirect(req.redirect.success);
}
if(req.body.stripeToken){
stripeToken = req.body.stripeToken;
}
if(!req.user.stripe.last4 && !req.body.stripeToken){
req.flash('errors', {msg: 'Please add a card to your account before choosing a plan.'});
return res.redirect(req.redirect.failure);
}
User.findById(req.user.id, function(err, user) {
if (err) return next(err);
user.setPlan(plan, stripeToken, function (err) {
var msg;
if (err) {
if(err.code && err.code == 'card_declined'){
msg = 'Your card was declined. Please provide a valid card.';
} else if(err && err.message) {
msg = err.message;
} else {
msg = 'An unexpected error occurred.';
}
req.flash('errors', { msg: msg});
return res.redirect(req.redirect.failure);
}
req.flash('success', { msg: 'Plan has been updated.' });
res.redirect(req.redirect.success);
});
});
};
This is the code I think that somewhere is messed up. If there appear to be more I can include let me know. I am not sure which section of code the issue lays in but I think it is the users.postPlan but I don't know enough about node to tell.

Answer 1

I'd be tempted to confirm that user.stripe.last4 has something in it; that seems to be why it's routing you to the card form.