В этом руководстве мы собираемся создать мертвую форму, которая позволит вам начать реализацию функций подписки в вашем приложении, используя Regurly API Отказ
Функции:
- METEOR 1.3.
- ES2015
- Поддержка первого класса для NPM на Meteor
- Будущее/волокно
Полное репо можно найти здесь
Хорошо, так давайте начнем.
Идите вперед и установите Meteor, если у вас его нет.
curl https://install.meteor.com/ | sh
Затем создайте проект Meteor следующим образом:
meteor create recurly cd recurly
Так будет выглядеть наша структура папки:
Примечание : Meteor 1.3 все еще находится в бета-версии, поэтому вам может потребоваться использовать --release Флаг (в момент этой записи 02/17/2016) версия выпуска – .8 Так что просто запустите это.
update --release 1.3-modules-beta.8
Для получения дополнительной информации не стесняйтесь проверять это Тема на форуме Meteor.
Теперь с этим вы можете начать использовать NPM установить В вашем проекте и у всех ваших зависимостей, как приложение Nodejs, отлично!?
Продолжай и создайте Package.json Внутри корневого каталога вашего приложения, который может выглядеть так:
{
"name": "meteor-recurly",
"version": "0.0.1",
"description": "Meteor + Recurly Example",
"author": "ethaan",
"repository": {
"type": "git",
"url": "https://github.com/Ethaan/playground/recurly"
},
"dependencies": {
"recurly-js": "2.1.3"
}
}
А потом бежать
npm install
Теперь вы готовы пойти, вы должны увидеть node_modules В корне вашего проекта.
Примечание : Мы собираемся использовать RECURLY-JS который является вилкой оригинала Узел – рецидивист библиотека. Просто чтобы вы узнали, это не «официальная» библиотека, поддерживаемая откровенно.
Код
Я уверен, что вы хотите начать кодировать, так что давайте сделаем это. Давайте начнем настроить материал сервера. Первое, что нам нужно сделать, это импортировать два библиотеки NPM, которые мы собираемся использовать. Да я говорю о Будущее и Отрывочно Отказ Продолжай и создайте /Сервер Папка, а внутри этого, создайте метод. Джейс файл, как следующее:
//methods.js
// This replaces the old:
//Future = Npm.require('fibers/future');
//Recurly = Meteor.npmRequire('recurly-js'); or if you use meteorhacks:npm
import Future from 'fibers/future';
import Recurly from 'recurly-js';
Теперь, следующая вещь, которую вам нужно сделать, это пойти на сайт RECURALLY для Регистрация и получи свой API_KEY & поддомен.
Затем мы собираемся создать папку в корневом каталоге с именем **/Настройки ** с Development.json Файл внутри, который должен выглядеть так.
{
"recurly":{
"API_KEY": "yourkey",
"SUBDOMAIN": "yourdomain-sandbox",
"ENVIRONMENT": "sandbox",
"DEBUG" : true
}
}
Вы можете получить свои учетные данные из левой боковой панели:
Теперь бегите с Meteor, как это (подробнее о настройках Metoor здесь ):
meteor --settings settings/development.json
После этого вернитесь к метод. Джейс и добавьте эту дополнительную строку.
const RECURLY_SETTINGS = Meteor.settings.recurly;
Теперь давайте пойдем и прыгаем на клиентскую сторону. Для CSS я собираюсь использовать меньше + Materizescss, поэтому сначала добавим пакеты.
meteor add poetic:materialize-scss less
Кроме того, поскольку библиотека NPM доступна только на сервере, нам нужно позвонить один скрипт, чтобы сделать рецензионные работы на стороне клиента, поэтому идите вперед и создайте этот файл main.html и положить эту линию внутри этого.
Recurly + Meteor 1.3
Теперь давайте создадим Клиент/стильисты папка. Если вы хотите, вы можете скопировать стиль из здесь
Кроме того, прежде чем мы начнем строить форму, вам нужно сделать минимальный конфиг на стороне клиента, чтобы создать рецидивируемую токену. Для этого можно поставить это внутри вашего Main.js.
Meteor.startup(() => {
recurly.configure({
publicKey: Meteor.settings.public.publicRecurlyKey
});
});
После этого иди и создайте форму внутри Клиент/Просмотр/Просмотр/Подписка/подписка .html Отказ Хорошая особенность о api api заключается в том, что вы можете добавить атрибут данных в свою форму. Например:
Вы видели:
data-recurly="first_name"
Окончательная форма должна выглядеть так:
Это облегчает вашу жизнь, просто позвонив QuerySelectorAll В вашем отправке события или даже путем передачи всей формы к RECURLAY API, которые считают, что мне лучше всего.
Вы можете увидеть полную форму здесь И вы также можете проверить список поддерживаемых элементов attr здесь Отказ
Теперь, когда мы готовы отправить форму, вот как должно выглядеть событие «Отправить».
const SUBSCRIPTION_FIXED_PRICE = 1500;
Template.subscriptionForm.events({
"submit #subscription-recurly-test": (event, template) =>{
event.preventDefault();
let formElement = $('#subscription-recurly-test'),
proceed = true;
if(proceed){
//You could add any form validation here
recurly.token(formElement, (error, token) =>{
if(error){
console.log(error);
}else{
Meteor.call('CreateSubscriptionAndAccount',{
subscription: {
plan_code: 'some-plan-thing-here-1',
currency: 'USD',
unit_amount_in_cents: SUBSCRIPTION_FIXED_PRICE,
account: {
account_code: 123456, // you could use Meteor.userId();
username: 'testuser', //you could use Meteor.user().username;
email: 'email', // you could use Meteor.user().emails[0].address
first_name: template.$('#first_name').val(),
last_name: template.$('#last_name').val(),
billing_info: {
token_id: token.id
}
}
}
}, callback);
}
});
};
}
});
Давайте попробуем объяснить это.
let formElement = $('#subscription-recurly-test')
Здесь мы схватываем элемент формы на селекторе идентификатора для передачи в
recurly.token(formElement, [callback]);
Что собирается искать все элементы, которые имеют «данные – рециркулируют» как атрибут, чтобы проверить их, а затем генерировать токен.
Наконец, мы называем Createsubscriptionandaccount Способ создания подписки. Если ответ на сервере хорош, вы можете (например) отобразить сообщение успеха, перенаправить пользователя, скрыть форму или делай все, что вы хотите. Ваша функция обратного вызова может выглядеть следующую:
callback = function(error, result){
if(error){
console.log(error); //display the errors
}else{
console.log(result); //do your redirects here
}
};
Сейчас в качестве последнего шага давайте снова вернемся к боковому коду сервера в метод. Джейс файл. Добавьте следующий код:
Meteor.methods({
CreateSubscriptionAndAccount: (options) => {
check([options], [Object]);
let recurlyFuture = new Future(),
recurly = new Recurly(RECURLY_SETTINGS);
recurly.subscriptions.create(accountAndSubscriptionObject.subscription,
function(error, subscription) {
if (error) {
return recurlyFuture.return(error.statusCode);
} else {
return recurlyFuture.return(subscription);
}
});
return recurlyFuture.wait();
}
});
Сам код легко читать. Сначала мы создаем экземпляр будущего.
Почему будущее?
Вам необходимо знать, что весь код метеора на сервере должен работать на «волокне» (для получения более подробной информации, не стесняйтесь проверить это Так что ответить Отказ Короче говоря, если вы хотите назвать 3-го вечеринки асинхронных функций, вы должны обернуть их внутри волокна.
Затем мы создаем экземпляр Regurly Class, а затем мы создаем учетную запись и подписываем его на план.
Зачем создать учетную запись, а затем подписаться на это ? Я выбираю это для учебного примера, но вы можете пропустить часть учетной записи и просто обновить подписку пользователя.
И там вы идете, если вы сделали все правильно, теперь вы должны пойти на свою страницу приборной панели, и вы должны увидеть что-то вроде этого:
Есть еще много работы, чтобы вы должны погрузиться в Regurly API Чтобыть твое приложение!