Блог

Я создаю простое приложение SaaS с повторяющимися платежами, используя NodeJS с Express для API и Vue для пользовательского интерфейса. У меня есть код, написанный для добавления клиента и привязки подписки и плана, а также нескольких других процедур. Мы разрешаем пользователям регистрироваться без ввода способа оплаты, поэтому теперь мне нужно добавить способ для пользователя добавить способ оплаты. Я просмотрел так много документации, что у меня голова идет кругом, и поддержка Stripe (или ее отсутствие) не помогла.

Я перепробовал все, начиная с createSource, createToken и createPaymentMethod в пользовательском интерфейсе, а затем отправил это в API, где я пробовал использовать все, начиная с stripeapi.customers.createSource и заканчивая stripe.PaymentMethod.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,
        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)
  

Все, что я хочу сделать, это взять элемент, создать источник / метод оплаты (как бы он ни назывался), а затем связать его с клиентом. Любая помощь приветствуется. Я просмотрел так много примеров, но у меня ничего не сработало. Кажется, что все выдает ошибку об объекте или что-то еще.

После нескольких часов разработки я наконец понял это! Ссылка на API сильно отсутствует, но в этой статье объясняется, что делать:https://stripe.com/docs/payments/save-card-without-authentication

По сути, вы создаете и монтируете элемент. Затем вы используете createPaymentMethod в пользовательском интерфейсе и передаете ему элемент card. Оттуда вы отправляете paymentMethod.id строку в свой API, а затем используете strip.paymentMethods.attach для прикрепления ее к клиенту, передавая paymentMethod.id идентификатор клиента Stripe.

Интерфейс 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(() => {

});
  

Пожалуйста, обратите внимание: этот код неполный, он просто предназначен для того, чтобы дать вам пример для тех, кто испытывал трудности, как я.

Сообщение об ошибке NodeJS гласит:

Хэш источника должен включать ключ ‘object’, указывающий, какой тип источника создавать.

Его также можно найти здесь, но я не уверен, если это не поддельное сообщение об ошибке. Если это действительно должно применяться, это было бы object: 'card' вместо object: 'source' ; но я так не думаю.

С Stripe иногда есть более одного способа что-то сделать:

source Определенно должен быть сгенерированный на стороне клиента токен карты,
но на стороне вашего клиента нет кода, который бы маркировал карту.

Для справки, они должны быть объединены:

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