Stripe.confirmCardSetup не прикрепляет карту к клиенту

Я использую expressjs с sapper/svelte спереди.

Я пытаюсь использовать API-интерфейс Stripe SetupIntent и stripe.confirmCardSetup, чтобы сохранить данные карты и привязать ее к клиенту для будущих платежей. Я считаю, что после прочтения документации я понимаю ход процесса, и мой код основан на их примере из раздела пользовательского потока платежей

После отправки формы кредитной карты я ничего не получаю. Нет карты, прикрепленной к клиенту, нет вывода журнала консоли и нет ошибок в моем приложении. setupIntent успешно создан, и я могу просмотреть его на своей панели инструментов Stripe, но карта (paymentMethod) не создана и не привязана к клиенту. Вот мои шаги:

1- When a user create an account, I create a customer in stripe and
save the stripe customer's id in my db 
2- I use that stripe customerid to create a setupIntent on the server

const intent = stripe.setupIntents.create({
        customer: customer
    }).then(intent => {
        return res.end(JSON.stringify({ info: intent.client_secret }));
    });

На данном этапе мне нужен client_secret, чтобы использовать его на передней панели с элементом карты, чтобы безопасно отправить данные карты в полосу. Я подтверждаю, что setupIntent действительно находится на моей панели инструментов Stripe. Так что эта часть в порядке.

Теперь к передней части моего кода:

Я получаю client_secret в начале своего приложения и использую stripe.js для сбора и отправки данных карты, которые будут прикреплены к клиенту в качестве метода оплаты (который client_secret имеет customer.id), поэтому код:

 let clientsecret
  let stripe = null
  let cardelement = null



    stripe = await loadStripe('pk_test_mykeys');
    var elements = await stripe.elements();
  cardelement = await elements.create('card');

  cardelement.on('ready', ()=>{});

  cardelement.on('change', ({error}) => {
  const displayError = document.getElementById('card-errors');
  if (error) {
  displayError.textContent = error.message;
  } else {
  displayError.textContent = '';
  }
  });  //end of card.on fn

  cardelement.mount("#card-element");

  return{
  stripe : stripe,
  cardelement : cardelement

  }

 
  function clickhandle(){

      stripe = stripe
    stripe.confirmCardSetup( csec , {
  payment_method: {
  card: cardelement,
  billing_details: { user : "testing setupIntent"
  }
  },
  setup_future_usage :  'on_session'
  })
  .then(function(result) {
  if (result.error) {
  console.info("there is an error")
  }
  if (result.setupIntent){
  console.info("here is the setupintent success result")
  }
  }); 

  }

Stripe.js работает, потому что я протестировал платежное намерение и списание средств с кредитной карты в другой части приложения, а выполненные платежи отображаются на панели управления полосой, поэтому это не скрипт stripe.js.

Правилен ли мой технологический процесс? Используйте полосатый идентификатор клиента для создания setupIntent на моем сервере, а на лицевой стороне приведенный выше код, который собирает данные карты и отправляет его с помощью stripe.confirmCardSetup, который будет прикреплять данные платежного метода/карты к клиенту из setupIntent client_secret?

Любая помощь будет оценена, поскольку я прочитал документацию, и она ясна и проста. Я следовал этому шаг за шагом. Что мне не хватает?

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
1 589
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Правильный процесс описан здесь: https://stripe.com/docs/payments/save-and-reuse#web-create-setup-intent и вы делаете что-то немного другое, что может вызывать некоторые проблемы .

Я подозреваю, что ваше включение future_usage - , которое на самом деле не является параметром для этого вызова функции , вероятно, является проблемой.

Спасибо. Я проверю свой код и исправлю все несоответствия. Я отчитаюсь о результатах.

Marco 13.12.2020 16:35

Прочитав комментарии @floatingLomas, я вернулся и снова внимательно прочитал документацию. Вот вопросы, которые необходимо прояснить:

1- форма, в которую вы будете монтировать #card-elements, должна включать client_secret, будь то в скрытом поле или с использованием атрибута data-. читайте здесь, если не знаете об этом

Итак --обратите внимание на атрибут data-secret -- теперь мой код формы:

 <form data-secret = {customersecret} on:submit = {stripehandle} id = "payment-form">
   
  <label for = "card-element">Enter Your Credit Card Details:</label>
  <div id = "card-element"></div>
  <div id = "card-errors" role = "alert"></div>
  <button id = "submit">Pay -svelte2 component</button>

</form>

2- удалите future_usage, как предложил @floatingLomas. Правильным параметром является «Использование»: «on_session», потому что future_usage предназначен для API-интерфейса paymentMethod, а не для API-интерфейса setupIntent.

3- Неверный параметр billing_details: { "user" : "testing setupIntent" }. API имеет параметр для имени, телефона, адреса, но не для пользователя;)

Таким образом, код подтвержденияCardSetup() выглядит следующим образом:

 stripe.confirmCardSetup( csec , {
  payment_method: {
  card: cardelement,
  billing_details: { "name" : "testing setupIntent" }
  }
  })
  .then(function(result) {
   console.info("result :", result)
  
  })

Рад, что у вас все получилось; хотел бы, чтобы мой ответ был принят, так как он сработал. :)

floatingLomas 14.12.2020 01:45

;) Сделанный. Еще раз спасибо.

Marco 14.12.2020 18:52

Другие вопросы по теме