无法更改计划| 条纹

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 - <a 
href="https://stripe.com/docs/testing">additional test info</a></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.