Подключение Meteor + React + Stripe Checkout

Это React переписывание замечательного руководства Payments with Stripe Checkout, выполненного с помощью Blaze (https://themeteorchef.com/recipes/payments-with-stripe-checkout/).

По сути, я написал и организовал его так же, как репозиторий TheMeteorChef / base.

Базовое репо: v4.6.0 / Meteor: v1.4

Код доступен на Github здесь.

Вот анимация финального рендера:

Вот так !

Начать

Получите репозиторий TheMeteorChef / base: https://github.com/themeteorchef/base. Это отличное репо для начала всего вашего проекта с Meteor + React.

  • Добавьте пакет Stripe:
meteor add mrgalaxy:stripe
  • Создайте полосовую учетную запись здесь и получите ключи API здесь.

  • Отредактируйте файл settings-development следующим образом (ключи и планы будут храниться в этом файле, так что вы сможете менять их быстрее и проще! Вы заметите, что токен секретной полосы является частным, а все остальное - общедоступным):
  • Начните репо с:
meteor npm install

тогда:

meteor --settings settings-development.json

Добавляем логику (сервер + StripeAPI)

  • Отредактируйте файл политики браузера, чтобы избежать проблем при подключении к полосе (есть также строка с amazonaws.com для получения изображения ghostbuster в компоненте plan.jsx, если вы не используете это изображение, вы можете удалить строку) :
  • Отредактируйте файл api, чтобы добавить путь к методу полосы:
  • Создайте файл методов

Добавьте маршрут к компоненту

  • Отредактируйте файл общедоступной навигации, чтобы ссылка была внутри панели навигации:
  • Отредактируйте файл маршрутов для автоматической маршрутизации в компоненте «Планы» при запуске приложения:

Добавить компонент

На данный момент я заставляю дочерний компонент общаться с родительским компонентом. Если вы забыли, как это сделать, вот напоминание о взаимодействии компонентов в React. Я использовал третью стратегию (http://andrewhfarmer.com/component-communication/).

Я полагаю, вы уже знаете некоторые реакции, я не буду вдаваться в подробности, объясняя каждый компонент;)

  • Создайте файл «планы», который будет главной страницей для листинга плана, щелкните план и обработайте платеж. Я не использую пакет meteor / mdg: validated-method, потому что он был беспорядочным, поэтому я использую Meteor.call для вызова метода Stripe:
  • Создайте файл списка планов в папке контейнера для передачи данных в компоненты с помощью пакета react-komposer (см. Здесь: https://github.com/kadirahq/react-komposer). Он уже используется в репозитории TheMeteorChef / base:
  • Создайте файл списка планов в папке компонентов. Это компонент для отображения списка планов:
  • Создайте файл плана, который является компонентом для визуализации плана:

И вуаля !