Stripe Checkout в ReactJS

Я использую Stripe Checkout в своем приложении React. Почему-то я не передаю свойства моей функции onToken правильно, так как получаю неопределенные ошибки.

В конце концов мне нужно отправить кучу реквизита, но пока я просто пытаюсь заставить его работать правильно.

import axios from 'axios'
import React from 'react'
import StripeCheckout from 'react-stripe-checkout';

const PAYMENT_SERVER_URL = '3RD_PARTY_SERVER';
const CURRENCY = 'USD';

export default class Stripe25 extends React.Component {

  onToken = (token) => {
    axios.post(PAYMENT_SERVER_URL,
        {
          description,
          source: token.id,
          currency: CURRENCY,
          amount: amount
        })
        .then(successPayment)
        .catch(errorPayment);
  }

  render() {
    return (
      <StripeCheckout
        token = {this.onToken}
        stripeKey = "STRIPE_PUBLIC_KEY"
        name = ""
        description = ""
        image = ""
        panelLabel = "Donate"
        amount = {2500} // cents
        currency = "USD"
        locale = "auto"
        zipCode = {false}
        billingAddress = {true}
      >
      <button className = "btn btn-primary">
        $25
      </button>
    </StripeCheckout>
    )
  }
}

Где определяется описание? Я его нигде не вижу, и он не передается в метод onToken.

Devin Fields 15.06.2018 01:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
1 060
3

Ответы 3

Попробуйте сменить source: token.id на source: token && token.id.

Токен может еще не быть определен, когда вы пытаетесь установить идентификатор. Это часто проблема с цепочкой точек в асинхронной среде.

Спасибо вам за помощь. Однако я получаю сообщение об ошибке в описании еще до того, как перейду к токену. Когда я отправляю Stripe Checkout, я получаю сообщения об ошибках. Не удалось загрузить ресурс: сервер ответил статусом 400 () checkout.stripe.com/api/… * удалил личную информацию и Uncaught ReferenceError: описание не определено в TokenCallback.r.onToken [как fn] (Contribute.3fc54992.js: 13) в TokenCallback. триггер (checkout.js: 3)

Chris Porter 14.06.2018 23:25

Из того, что я вижу, в вашем методе onToken единственная доступная переменная - токен. Но вы также ссылаетесь на описание и количество, ни один из которых не доступен нигде в области действия, насколько я могу судить.

Вам нужно будет передать описание и сумму в вашу константу onToken. Вы можете увидеть пример этого, а также то, как передать информацию о доставке в Stripe, в этой статье:

Отправить информацию о доставке в Stripe с помощью React-Stripe-Checkout

Решение будет выглядеть так:

const onToken = (amount, description) => (token, args) =>
  axios.post(PAYMENT_SERVER_URL,
    {
      description,
      source: token.id,
      currency: CURRENCY,
      amount: fromDollarToCent(amount),
      metadata: args
    })
    .then(successPayment)
    .catch(errorPayment);

(Токен, аргументы) и метаданные: аргументы являются необязательными, если вы хотите передать информацию о доставке в Stripe.

Привет! Хотя ответ может быть в предоставленной вами ссылке, полезно увидеть реальный пример того, как решать вопросы.

Erubiel 16.09.2018 18:12

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