条纹付款使用NodeJS / Vue添加付款来源/卡/方法

问题描述

我正在使用NodeJS with Express（用于API）和Vue（用于UI）构建一个具有定期付款功能的简单SaaS应用程序。我编写了添加客户，链接订阅和计划以及其他一些例程的代码。我们允许用户注册而无需输入付款方式，因此，现在，我需要为用户添加一种添加付款方式的方式。我已经阅读了太多的文档，以至于我的头一直在转动，而Stripe的支持（或缺少它）却无济于事。

我已经尝试了UI中的createSource，createtoken和createPaymentMethod的所有内容，然后将其提交给API，在那里我尝试使用从stripeapi.customers.createSource到stripe.paymentMethods.create的所有内容，但没有任何效果。一切都会返回有关对象中缺少的东西或对象不正确的错误。我试图查看支付意图API，但是，仅向客户添加卡似乎有点过头。

这是我最新的代码。

用户界面：创建元素

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);

用户界面：提交到API

await this.stripe.createSource(this.card,{ type: 'card' } ).then((source) => {
  this.$http.post(`/api/route`,source).then((response) => {
    if (response.status === 200) {

    } else {

    }
  }).catch(() => {

  });

API

await stripeapi.customers.createSource(customer_id,{ source: card });

这段代码产生了这个对象：

{ 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,phone: null,verified_address: null,verified_email: null,verified_name: null,verified_phone: null },statement_descriptor: null,status: 'chargeable',type: 'card',usage: 'reusable' } }

此代码和对象会产生此错误：

(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)

我要做的就是获取一个元素，创建一个付款来源/方法（无论它叫什么），然后将其与客户相关联。任何帮助表示赞赏。我看过很多例子，但对我没有任何帮助。一切似乎都会产生关于该对象的错误，或者不是。

解决方法

NodeJS错误消息显示为：

源哈希必须包含一个“对象”键，指示要创建哪种类型的源。

也可以找到here，但我不确定，如果不是，这是假的错误消息。如果确实适用，则为object: 'card'而不是object: 'source'；但我不这么认为。

使用Stripe有时可以完成一种方法：

source绝对应该是客户端生成的卡令牌，
但是您的客户端没有任何可以对卡进行令牌化的代码。

作为参考，必须将它们组合在一起

经过数小时的开发，我终于弄明白了！严重缺乏API参考，但本文在此处说明了如何做：https://stripe.com/docs/payments/save-card-without-authentication

基本上，您将创建并安装该元素。然后，您在UI中使用createPaymentMethod并将card元素传递给它。从那里，您将paymentMethod.id字符串提交到您的API，然后使用strip.paymentMethods.attach通过传递paymentMethod.id和Stripe客户ID将其附加到客户。

前端HTML

<div ref="card" class="credit-card"></div>

前端创建和挂载

this.stripe = await loadStripe('pk_test_YOURKEY');
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);

前端创建付款方式并提交到后端

await this.stripe.createPaymentMethod({ type: 'card',card: this.card }).then((method) => {
  this.$http.post(`/users/billing/cards`,{ id: method.paymentMethod.id }).then((response) => {

  }).catch(() => {

  });
}).catch(() => {

});

请注意：此代码并不完整，只是为了给您一个像我一样挣扎的人的例子。

javascript stripe-elements stripe-payments