AutoForm.js

AutoForm.addHooks("square-payment-form", {
  onSubmit: function (doc) {
    submitting = true;
    const template = this.template;
    hidePaymentAlert();
    const form = {
      cardNonce: doc.nonce      // Here is where we're placing our nonce
    };
    Meteor.subscribe("Packages", Reaction.getShopId());
    const packageData = Packages.findOne({
      name: "square-paymentmethod",
      shopId: Reaction.getShopId()
    });
    Square.authorize(           
      form,                     // This is where we're passing the nonce back to the server
      {
        total: Cart.findOne().getTotal(),
        currency: Shops.findOne().currency
      },
      function (error, transaction) {
        // Omitted for brevity
      }
    );
    return false;
  },
  beginSubmit: function () {
    this.template.$(":input").attr("disabled", true);
    this.template.$("#btn-complete-order").text("Submitting ");
    return this.template.$("#btn-processing").removeClass("hidden");
  },
  endSubmit: function () {
    if (!submitting) {
      return uiEnd(this.template, "Complete your order");
    }
  },
  onSuccess: function () {
    paymentForm.destroy();       // To prevent issues if they decided to continue shopping, we destroy the form
  }
});