Подключение 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
- Отредактируйте файл 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:
- Создайте файл списка планов в папке компонентов. Это компонент для отображения списка планов:
- Создайте файл плана, который является компонентом для визуализации плана:
И вуаля !