Создание виджета пожертвований с компонентами рейса

 this.onClick = function (event) {
    var stripeAmount = this.select('checkout').attr('data-stripe-amount');
    stripeAmount = stripeAmount + 0 + 0;
    this.trigger('callStripe', {
        amount: stripeAmount
    });
};

Сначала мы выбираем сумму из атрибута кнопки, затем делаем ее действительной для Stripe, добавляя два нуля. В этом нет ничего нового. Настоящее волшебство происходит в методе триггера , который запускает пользовательское событие и передает сумму в виде данных (также называемых полезной нагрузкой). Мы собираемся создать компонент, который будет прослушивать это событие в следующем. Готовый компонент должен выглядеть так:

 var getAmount = flight.component(function () {
    this.attributes({
        checkout: '#checkout',
        range: '#stripe-amount',
        display_amount: '[data-amount]'
    });

    this.onChange = function (event) {
        var amount = this.select('range').val();
        if (amount == 0) {
            alert('please enter an amount');
            this.select('checkout').prop('disabled', true);
        } else {
            this.select('checkout').prop('disabled', false);
            this.select('display_amount').text('$' + amount);
            this.select('checkout').attr('data-stripe-amount', amount);
        }
    };

    this.onClick = function (event) {
        var stripeAmount = this.select('checkout').attr('data-stripe-amount');
        stripeAmount = stripeAmount + 0 + 0;
        this.trigger('callStripe', {
            amount: stripeAmount
        });
    };

    this.after('initialize', function () {
        this.on(this.attr.range,'change', this.onChange); 
        this.on(this.attr.checkout, 'click', this.onClick);
    });
});

Прежде чем мы создадим последний компонент, мы должны initialize Поскольку сам модал инициализируется динамически, мы прикрепим его после того, как он был инициализирован. Приведенный ниже код является простым прослушивателем события нажатия кнопки, которую мы включили в первом компоненте, после чего мы присоединяем наш новый компонент. Метод openModal()

 $('#launch').on('click', function (event) {
    event.preventDefault();
    $('#stripe-widget').openModal();
    getAmount.attachTo('#stripe-widget'); 
});

Встретить полосу

В двух словах, Stripe — это PayPal, который вы всегда представляли, созданный для разработчиков. Stripe используется во многих веб-сайтах и ​​приложениях для обработки платежей (например, Twitter и Kickstarter). Они предлагают ряд услуг или API (как бы вы их ни называли), но мы будем использовать Checkout .

После того, как Stripe проверит чью-либо кредитную карту, ваш веб-сайт получит токен обратно, затем этот токен необходимо отправить в Stripe вместе с вашим секретным ключом. Поскольку ваш ключ является секретным, это не может произойти на внешнем интерфейсе, поскольку JavaScript не был и не должен быть, по крайней мере в его первоначальном виде, безопасным. Для этого вы можете использовать одну из библиотек Stripe для PHP , Sinatra , Python (Flask) , Rails или Node.js.

Я упомянул ключи правильно? Ну, чтобы получить ключ, вам нужно зарегистрировать бесплатный аккаунт Stripe. Вам даже не нужна кредитная карта, подойдет обычный старый банковский счет! После того, как вы получите свой собственный ключ, вам придется заменить мой открытый ключ на ваш при вызове Stripe (как показано ниже). Они предлагают «тестовые» и «настоящие» ключи, поэтому вы легко тестируете свое приложение без особых усилий. При использовании тестовых ключей Stripe также принимает тестовые кредитные карты.

Все должно работать до того момента, когда вы нажимаете кнопку пожертвования, и ничего не происходит. Давайте добавим последний бит магии.

 var launchStripe = flight.component(function () {
    // Magic
});

Этот компонент запустит Stripe для нас. Чтобы сделать это, мы сначала должны создать экземпляр Stripe вверху нашего документа (не внутри компонента).

 var handler = StripeCheckout.configure({
    key: 'pk_test_hue7wHe5ri0xzDRsBSZ9IBEC', //replace this with your key!
    image: 'http://freedesignfile.com/upload/2014/06/Cup-of-coffee-design-vector-material-03.jpg',
    locale: 'auto',
    token: function(token) {
        console.log(token);
        var html = 'Thank you! <i class="fa fa-beer"></i>';
        Materialize.toast(html, 3000);
        // Send to server
    }
});

Хотя знакомство с серверной частью немного выходит за рамки этой статьи, как уже упоминалось выше, в Stripe есть библиотека Node.js, которая может быть немного менее пугающей для тех, кто знаком с JavaScript. Вы можете отправить свой ключ на Node-сервер через HTTP-запрос, используя такой модуль, как Express . В ответе вашего Node-сервера на этот запрос вы бы сделали что-то вроде этого:

 var stripe = require("stripe")(
  "sk_test_yourkeyhere"
);

stripe.customers.create({
  description: 'Coffeehouse Customer',
  source: "tok_yourtoken" // This comes from our front end JavaScript code
}, function(err, customer) {
  // asynchronously called
});

Если вам нужен более полный пример использования Stripe и Node.js, в статье SitePoint о создании службы SMS ежедневных подтверждений с Stripe & Syncano более подробно рассматривается сторона процесса Node.js и даже показано, как вы можете использовать микросервисная платформа, такая как Syncano, для запуска кода Node.js из бэкэнда.

Теперь вернемся к нашему компоненту. Сначала мы добавим метод initialize

 this.after('initialize', function () {
    this.on('callStripe', this.launch);
});

В основном мы слушаем пользовательское событие, запускаемое изнутри, а не событие DOM. Все, что нам нужно сделать сейчас, это создать обратный вызов, который запустит Stripe.

 this.launch = function (event, data) {
    $('#stripe-widget').closeModal();
    handler.open({
        name: 'the Coffeehouse',
        description: 'Thank You!',
        currency: "usd",
        amount: data.amount
    });
};

Наша функция ожидает два аргумента, событие и данные. Событие такое же, как обычно, но данные включают полезную нагрузку, которую мы включили при первоначальном запуске события в предыдущем компоненте. Полезная нагрузка — это просто наша сумма, потому что это все, что мы добавили к событию. Но в более сложных случаях это может быть полным ответом на вызов API.

Другая вещь, которую мы делаем, — это запуск формы оплаты Stripe с использованием суммы, которую мы получили от предыдущего компонента. Вы можете найти полную документацию Checkout здесь .

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

 launchStripe.attachTo(document);

Наш готовый код должен выглядеть примерно так. Мы сделали довольно много за менее чем 100 строк JavaScript!

Вывод

Надеюсь, к настоящему моменту Flight имеет смысл, но в любом случае вы можете найти полную документацию здесь . Как вы можете видеть, система компонентов Flight обеспечивает чрезвычайно читаемый и модульный код. Например, вы можете повторно использовать компонент launchStripeenableButton Полет очень хорош, и потому что он не предписывает особый подход, возможности безграничны.

Если вы создали что-то интересное с помощью Flight или просто хотите поделиться своими мыслями об этом, пожалуйста, прокомментируйте ниже!