How to redirect to a success page After Stripe success with Meteor js

Question

I am doing some testing with stripe payments with meteor,

I am getting the payment to go through successfully to stripe from my server,

i am doing this within a meteor method,

but i need to

1. show a payment processing visual to the user and then when payment is successful
2. return a successful payment object back) to the client(which i can do and then render a success template with the various information

how could i do both of these?

the submit event

Template.step4.events({
  'submit #insertpaymentInfo':function(e){
      e.preventDefault();
      Stripe.setPublishableKey('PUBLISHABLEKEY');
      var $form = $('#insertpaymentInfo');
      $form.find('button').prop('disabled', true);
      Stripe.card.createToken($form, callbackStripe);

  }
});

the callback from the stripe server after token received

function callbackStripe(status, response){
  var $form = $('#insertpaymentInfo');
  console.log("hi 1")
  if (response.error) {
    $form.find('.payment-errors').text(response.error.message);
    $form.find('button').prop('disabled', false);
  } else {

    var token = response.id;

    //TODO build an array of relevant data that needs to be sent to the server
    //Token on its own only sent for testing

    Meteor.call('processPayment',token);
  }
}

Here is my meteor method server side

 Meteor.methods({
    'processPayment':function(stripeToken){
         console.log("stripe token = "+ stripeToken);
         check(stripeToken,String);
         console.log("payment and order can be processed and created");
         var Stripe = StripeAPI('TESTKEY');

      Stripe.charges.create({
       amount: 1000, // amount in cents, again
       currency: "usd",
       card: stripeToken,
       description: "payinguser@example.com"
      }, function (err, res) {
        console.log(err, res);
     });
 }
});

Answer 1

You could handle all of them in the same parent template using a reactive variable to show different child templates.

Template.step4.created = function(){
  this.state = new ReactiveVar("editing");
}

<template name="step4">
  {{#if state "editing"}}
    {{> payment_form}}
  {{/if}}
  {{#if state "processing"}}
    {{> processing}}
  {{/if}}
  {{#if state "success"}}
    {{> success}}
  {{/if}}
</template>

Template.step4.helpers({
  state: function(param){
    return Template.instance().state.get() === param;
  }
});

Template.step4.events({
  'submit #insertpaymentInfo':function(e, template){
    e.preventDefault();
    Stripe.setPublishableKey('PUBLISHABLEKEY');
    var $form = $('#insertpaymentInfo');
    $form.find('button').prop('disabled', true);
    template.state.set("processing");
    Stripe.card.createToken($form, function(err, res){
      if (error){
        template.state.set("editing");
        // error handle as you did above
      } else {
        template.state.set("success");
        // show info via response object
      }
    });
  }
});