Stripe Payments 使用 NodeJS/Vue 添加支付源/卡/方法

Question

我正在构建一个简单的 SaaS 应用程序，使用 NodeJS 和 Express 作为 API，Vue 作为 UI 使用定期付款。 我编写了代码来添加客户并链接订阅和计划以及其他一些例程。 我们允许用户在不输入付款方式的情况下进行注册，所以现在，我需要为用户添加一种添加付款方式的方法。 我已经阅读了太多文档，以至于我头晕目眩，而 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);

UI：提交给 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(() => {

  });

应用程序接口

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,
        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' } }

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

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

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

Answer 1

经过几个小时的开发，我终于弄明白了！ 严重缺乏 API 参考，但这里的这篇文章解释了该怎么做： https : //stripe.com/docs/payments/save-card-without-authentication

本质上，您创建并挂载元素。 然后，您在 UI 中使用createPaymentMethod并将卡元素传递给它。 从那里，您将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(() => {

});

请注意：这段代码并不完整，它只是为了给那些像我一样挣扎的人提供一个例子。

Answer 2

NodeJS 错误消息如下：

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

它也可以在这里找到，但我不确定，如果不是，这是一个虚假的错误消息。 如果这确实适用，它将是object: 'card'而不是object: 'source' ; 但我不这么认为。

---

使用 Stripe 有时有不止一种方法可以完成某件事：

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

作为参考，这些必须结合起来：

• https://stripe.com/docs/js/tokens_sources/create_token?type=cardElement
• https://stripe.com/docs/api/cards/create