Failing to submit

[ndarilek]

Hey, looks like a nice package. Trying to integrate this with Stripe tokenization on the client-side, but I can't get my form to submit. I looked at your example in tests/ and it looks like you write to a collection. I'm attempting to pass the data to either a submit or success hook so Stripe's JS can be called. Here's my LiveScript/Jade:

@CreditCardSchema = new SimpleSchema do
cardNumber:
type: String
autoform:
type: "payments/creditCard"
custom: PaymentsHelpers.CreditCardValidation
cvc:
type: String
autoform:
type: "payments/creditCardCVC"
custom: PaymentsHelpers.CVCValidation
expiration:
type: String
autoform:
type: "payments/creditCardExpiry"
custom: PaymentsHelpers.CCExpiryValidation

And my form:

template(name = "newCard")
h1 New Credit Card
+quickForm(id = "newCardForm" schema = "CreditCardSchema" buttonContent = "Update")

When I submit the form, I get this error:

error:
Validation error
TypeError: $.payment is undefined

aldeed_...d0c01da (line 7795)

And indeed, calling $.payment from the console is in fact undefined. I see the ppayments library in my page source.

Am I missing something other than the submit hooks, which still fail the same way even when they're added?

Thanks.

[jimmiebtlr]

In you're template

{{> quickForm schema=addCardSchema id="market_addCard" type="normal"}}

In you're js

AutoForm.hooks({
  'market_addCard': {
    onSubmit: function(card){
      this.event.preventDefault();
      exp = card.expiry.split('/');
      card.exp_month = parseInt(exp[0]);
      card.exp_year = parseInt(exp[1]);
      delete card.expiry;
      Market._stripe.token.create({
        card: card
      },function(err,doc){
        Meteor.call(' /*meteor method for adding source from token*/ ',doc.id,function(err,doc){
              // Do something on error or success
          }
        });
      });
    }
  }
});

schema = new SimpleSchema({
  name: {
    type: String,
    label: "Name on card"
  },
  number: {
    type: String,
    label: "Card Number",
    autoform: {
      type: 'payments/creditCard'
   },
    custom: PaymentsHelpers.CreditCardValidation 
  },
  cvc: {
    type: String,
    autoform: {
      type: 'payments/creditCardCVC'
    },
    custom: PaymentsHelpers.CVCValidation 
  },
  expiry: {
    type: String,
    autoform: {
      type: 'payments/creditCardExpiry',
      placeholder: "MM / YY"
    },
    custom: PaymentsHelpers.CCExpiryValidation 
  }
});

I'm also working on additional packages to make this easier, the above code comes directly from them. I haven't published to atmosphere yet, but you can take a look at

https://github.com/ElevateDev/meteor-stripe-marketplace
https://github.com/ElevateDev/meteor-stripe-marketplace-bootstrap

[jimmiebtlr]

I may have missed you're issue a bit, is the error on client or server when you submit? I believe you'll need type="normal" with prevent default and onSubmit for the autoform portion of it.

[ndarilek]

I solved this sort of, not sure if the issue is local to my setup or not. For some reason, the jquery-payment Meteor package you seem to be including doesn't register $.payment at all. I'm using mquandalle:bower so I can use Bower for front-end package management, and installing the actual jquery.payment package resolved this for me. So I'm not sure if I'm expected to install this package myself, or if yours should have brought it in for me. But it didn't work until I explicitly installed jquery.payment via Bower.

[jimmiebtlr]

If you're using bower to include jquery, does that mean that jquery is actually in you're application directory? If so the load order would be off since the package manager no longer controls it.

[jimmiebtlr]

This may be fixed in version 0.0.7-rc.1, I didn't have a dependency in package.js on jquery.