title: Stripe Payments Add Payment Source / Card / Method using NodeJS / Vue
body: <p>I am building a simple SaaS application with recurring payments using NodeJS with Express for the API and Vue for the UI. I have code written to add a customer and link a subscription and plan as well as a few other routines. We allow users to sign up without entering a payment method so now, I need to add a way for a user to add a payment method. I have been through so much documentation that my head is spinning and Stripe support (or lack thereof) has been no help.</p>
  <p>I have tried everything from createSource, createToken, and createPaymentMethod in the UI and then submitted that to the API where I have tried using everything from stripeapi.customers.createSource to stripe.paymentMethods.create and nothing works. Everything returns an error about either something missing in the object or the object being incorrect. I have attempted to look at the payment intents API however, this seems like overkill to just simply add a card to a customer.</p>
  <p>Here is my latest code.</p>
  <p><strong>UI : Create Element</strong></p>
  <pre><code>this.stripe = await loadStripe('pk_test_');
  let stripeElem = this.stripe.elements();
  
  this.card = stripeElem.create('card', { hideIcon: true, hidePostalCode: false, style: { base: { color: '#363636', fontSize: '22px', fontSmoothing: 'antialiased' }}});
  this.card.mount(this.$refs.card);
  </code></pre>
  <p><strong>UI: Submit to API</strong></p>
  <pre><code>await this.stripe.createSource(this.card, { type: 'card' } ).then((source) =&gt; {
    this.$http.post(`/api/route`, source).then((response) =&gt; {
      if (response.status === 200) {
  
      } else {
  
      }
    }).catch(() =&gt; {
  
    });
  </code></pre>
  <p><strong>API</strong></p>
  <pre><code>await stripeapi.customers.createSource(customer_id, { source: card });
  </code></pre>
  <p>This code produces this object:</p>
  <pre><code>{ source:
     { id: 'src_1HLFsEDfvqoM1TxYXmFvlcK9',
       object: 'source',
       amount: null,
       card:
        { exp_month: 1,
          exp_year: 2022,
          last4: '4242',
          country: 'US',
          brand: 'Visa',
          address_zip_check: 'unchecked',
          cvc_check: 'unchecked',
          funding: 'credit',
          three_d_secure: 'optional',
          name: null,
          address_line1_check: null,
          tokenization_method: null,
          dynamic_last4: null },
       client_secret: 'src_client_secret_VILuqM6ZikLzp9nMq4gizfN8',
       created: 1598653002,
       currency: null,
       flow: 'none',
       livemode: false,
       metadata: {},
       owner:
        { address: [Object],
          email: null,
          name: null,
          phone: null,
          verified_address: null,
          verified_email: null,
          verified_name: null,
          verified_phone: null },
       statement_descriptor: null,
       status: 'chargeable',
       type: 'card',
       usage: 'reusable' } }
  </code></pre>
  <p>This code and object produce this error:</p>
  <pre><code>(node:352976) UnhandledPromiseRejectionWarning: Error: The source hash must include an 'object' key indicating what type of source to create.
      at Function.generate (/data/api/node_modules/stripe/lib/Error.js:39:16)
      at IncomingMessage.res.once (/data/api/docroot/node_modules/stripe/lib/StripeResource.js:190:33)
      at Object.onceWrapper (events.js:286:20)
      at IncomingMessage.emit (events.js:203:15)
      at IncomingMessage.EventEmitter.emit (domain.js:448:20)
      at endReadableNT (_stream_readable.js:1145:12)
      at process._tickCallback (internal/process/next_tick.js:63:19)
  </code></pre>
  <p>All I want to do is take an element, create a payment source/method (whatever it's called) and then associate that with a customer. Any help is appreciated. I have look at so many examples but nothing has worked for me. Everything seems to produce an error about the object or what not.</p>