Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

payments-ui

**DEPRECATED & UNMAINTAINED** The payments frontend interface

Subscribe to updates I use payments-ui


Statistics on payments-ui

Number of watchers on Github 131
Number of open issues 324
Main language JavaScript
Average time to merge a PR about 7 hours
Open pull requests 219+
Closed pull requests 35+
Last commit over 3 years ago
Repo Created over 4 years ago
Repo Last Updated over 1 year ago
Size 120 MB
Organization / Authormozilla
Contributors8
Page Updated
Do you use payments-ui? Leave a review!
View open issues (324)
View payments-ui activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating payments-ui for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

No Maintenance Intended Build Status Dependency Status devDependency Status

Note This project is no longer maintained.

Sauce Test Status

Note Sauce Labs tests are only run on PRs from the main repo or commits to master.

Payments UI

This project comprises all styles, behaviour and interfaces for mozilla/payments.

Grunt tasks

Run tasks with grunt e.g. grunt watch-static or grunt serve.

Task name Description
build build all CSS/JS files for deployment
serve watch CSS/JS for changes; serves static files via webpack dev server to enable hot module reloading
test run tests locally
test-sauce run full Sauce Labs test suite
watch-email watch email-specific static files for changes; updates CSS/JS on change
watch-static watch files for changes; updates CSS/JS on change

Developers

Email Styles

To get the right paths for the email CSS and rebuild files as they change run:

DEV=1 grunt watch-email

Dependency installation and updates

Install grunt-cli globally with npm install -g grunt-cli. Then run npm install to install the local deps needed for development.

Dependencies are automatically kept up-to-date using greenkeeper.

npm deps only

We're aiming to only use npm packaged deps rather than bower. This is to be able to track dep versions in one place.

Libraries + external deps

Normally built artifacts aren't committed. However, to manage dep changes more tightly, production libs (JS, CSS + fonts) are committed to the tree.

JS libs are committed from node_modules as webpack knows how to find deps in node_modules.

Whilst this creates noise it does help ensure deps in the browser are identical and can't get mangled by a broken deps installation.

dealing with bower

Unfortunately some deps only work with bower. For these cases, make sure bower.json has the package name and version, run bower install, and commit the distributed files to public/bower_components. Hopefully these cases will be rare.

Watching for file changes in development.

If you're using payments-env to run the complete payments system then you'll want to use grunt watch-static on your host to watch for file changes. In other words, start docker to run all the things but keep a shell open on the host machine just to compile static assets for the docker VM to serve.

Hot module reloading

If you run the webpack-dev-server you can get hot module reloading. This turns on a feature where the code automatically updates in the browser as you change the code in your editor.

For example run grunt serve to run the webpack-dev-server.

And then visit:

http://localhost:8080/webpack-dev-server/management.html

You should find that changes to the react modules are reflected immediately without refresh. Read on if you want to also interact with the API server.

Developing with webpack-dev-server + docker for hot reloading.

If you are running the full stack with payments-env then you'll also be able to interact with the API when using hot reloading.

First, create an /etc/hosts entry like 127.0.0.1 pay.webpack so that you can access your webpack server on a predictable host.

To see the purchase interface with hot module loading enabled visit the example site at:

http://pay.dev?webpack

To see the management interface:

http://pay.webpack:8080/webpack-dev-server/management.html

JavaScript Linting

We're using eslint for JavaScript linting. Most editors will have instructions for enabling eslint (see below for how to configure vim + syntastic). Alternatively just run the grunt eslint command which is self-contained.

Eslint Vim settings (Syntastic)

You'll need the packages listed below installed globally:

npm install -g eslint babel-eslint eslint-plugin-react

Using syntastic, the following snippet turns on eslint selectively for projects with a .eslintrc.

autocmd FileType javascript let b:syntastic_checkers = findfile('.eslintrc', '.;') != '' ? ['eslint'] : ['jshint']

Tests

To run the tests locally run: grunt test. This will run the unit tests against Firefox.

Cross-browser testing

The tests are run only on Firefox when a PR is submitted. When that code is landed on master, Travis will run the tests on Sauce Labs.

Running Sauce Labs on a PR [Team Only]

If you're a member of the payments team and you want to get Sauce Labs coverage for a PR - push the branch to the main mozilla/payments-ui repo and make a PR from that.

Running the tests on SauceLabs locally

First Sign-up for a Sauce Labs 'Open Sauce' account to get your keys.

Then you'll need to export the SauceLabs username and access key as env vars:

export SAUCE_USERNAME=<YOUR_OPEN_SAUCE_USERNAME>
export SAUCE_ACCESS_KEY=<YOUR_ACCESS_KEY>

Then you should find you can run: grunt karma:sauce and run all the tests on SauceLabs.

Styleguide

The styleguide is based on the styles and templates that live in the tree.

It can be build statically with the grunt build-styleguide command.

The styleguide is published here.

Updating the styleguide

Run grunt publish-styleguide

Running the styleguide locally

Run grunt styleguide (defaults to running on localhost:4001).

Localization (l10n)

We're using grunt-i18n-abide to run the extraction commands.

Because we're using React we need to operate on the compiled JS file. This also means we aren't running extraction on un-used code.

To run an extraction, checkout out the payments-l10n repository so that it has the same parent directory as payments-ui (../payments-l10n from the current location). Then do the following:

npm install
grunt webpack abideExtract
payments-ui open issues Ask a question     (View All Issues)
  • almost 4 years Typo in the commons chunk config
  • about 4 years Reduce noise in tests
  • about 4 years replace card submission error dispatches with a processing result
  • about 4 years Add helper for mounting redux dependent components in tests
  • about 4 years When a test creates a stack trace, all tests pass
  • about 4 years Can't enter a new credit card after first one is declined
  • about 4 years Update/Patch react-maskedinput
  • about 4 years Add retry to all failed XHR requests
  • about 4 years Add tests for card-input.
  • about 4 years Generate static files
  • about 4 years Donations do not show up in receipts/history
  • about 4 years Combine components for credit card entry and pay method choice
  • about 4 years Make tests not depend on payments-config
  • over 4 years Persist login in session
  • over 4 years move stop-event-propagation to actions themselves
  • over 4 years Fix the a11y of the pay-method-choice radio buttons.
  • over 4 years Investigate if commons.js does have all the shared code.
  • over 4 years Make transaction history sortable
  • over 4 years Paginate transaction history results in management
  • over 4 years Localize transaction history amount with currency symbol
  • over 4 years Show detailed transaction receipt in management app
  • over 4 years Add in privacy policy and terms of use
  • over 4 years Using "per month" as a standalone localization string
  • over 4 years Hook up change payment account
  • over 4 years Hook up cancel subscription
  • over 4 years Remove access token from the URL
  • over 4 years Rename delete account
  • over 4 years Add history API to management so the user has URLs/back/forward
  • over 4 years Write all reducers with a switch statement
  • over 4 years Check image paths in sprite css (generated)
payments-ui open pull requests (View All Pulls)
  • Update grunt-eslint to version 18.0.0 ?
  • Update karma to version 0.13.21 ?
  • Update babel-core to version 6.5.2 ?
  • Update karma to version 0.13.20 ?
  • Update react-redux to version 4.0.0 ?
  • Update braintree-web to version 2.20.0 ?
  • Update react-maskedinput to version 3.1.0 ?
  • Update babel-core to version 6.5.1 ?
  • Update babel-core to version 6.5.0 ?
  • Update react-redux to version 4.4.0 ?
  • Update react-redux to version 4.3.0 ?
  • Update babel-loader to version 6.2.2 ?
  • Update react-redux to version 4.2.1 ?
  • Update react to version 0.14.7 ?
  • Update babel-core to version 6.4.5 ?
  • Update karma-sourcemap-loader to version 0.3.7 ?
  • Update webpack-dev-server to version 1.14.1 ?
  • Update grunt-svg-sprite to version 1.2.19 ?
  • Update braintree-web to version 2.18.0 ?
  • Update jquery to version 2.2.0 ?
  • Update fecha to version 1.2.2 ?
  • Update classnames to version 2.2.3 ?
  • Update babel-loader to version 6.2.1 ?
  • Update eslint to version 2.4.0 ?
  • Update babel-core to version 6.7.2 ?
  • Update react-maskedinput to version 3.1.1 ?
  • Update babel-core to version 6.7.0 ?
  • Update eslint-plugin-react to version 4.2.1 ?
  • Update karma to version 0.13.22 ?
  • Update karma-mocha-reporter to version 2.0.0 ?
  • Update karma-mocha-reporter to version 1.3.0 ?
  • Update redux-thunk to version 2.0.1 ?
  • Update redux-thunk to version 2.0.0 ?
  • Update eslint-plugin-react to version 4.2.0 ?
  • Update eslint to version 2.3.0 ?
  • Update babel-core to version 6.6.5 ?
  • Update grunt-contrib-csslint to version 1.0.0 ?
  • Update grunt-contrib-copy to version 1.0.0 ?
  • Update babel-core to version 6.6.4 ?
  • Update lodash.merge to version 4.3.2 ?
  • Update karma-sauce-launcher to version 0.3.1 ?
  • Update fecha to version 2.0.0 ?
  • Update load-grunt-tasks to version 3.4.1 ?
  • Update babel-core to version 6.6.0 ?
  • Update karma-mocha-reporter to version 1.2.3 ?
  • Update babel-loader to version 6.2.4 ?
  • Update lodash.merge to version 4.3.1 ?
  • Update eslint to version 2.2.0 ?
  • Update grunt-concurrent to version 2.2.1 ?
  • Update babel-loader to version 6.2.3 ?
  • Update karma-mocha to version 0.2.2 ?
  • Update eslint-plugin-react to version 5.0.0 ?
  • Update karma-mocha-reporter to version 2.0.1 ?
  • Update eslint to version 2.8.0 ?
  • Update webpack to version 1.13.0 ?
  • Update grunt-eslint to version 18.1.0 ?
  • Update braintree-web to version 2.23.0 ?
  • Update react-redux to version 4.4.5 ?
  • Update lodash.merge to version 4.3.5 ?
  • Update grunt-gh-pages to version 1.1.0 ?
  • Update react-redux to version 4.4.4 ?
  • Update react-redux to version 4.4.3 ?
  • Update normalize.css to version 4.1.1 ?
  • Update normalize.css to version 4.1.0 ?
  • Update react-maskedinput to version 3.1.2 ?
  • Update webpack to version 1.12.15 ?
  • Update redux to version 3.4.0 ?
  • Update react-redux to version 4.4.2 ?
  • Update react to version 15.0.1 ?
  • Update babel-core to version 6.7.6 ?
  • Update grunt-concurrent to version 2.3.0 ?
  • Update load-grunt-tasks to version 3.5.0 ?
  • Update babel-core to version 6.7.5 ?
  • Update react to version 15.0.0 ?
  • Update eslint-plugin-react to version 4.3.0 ?
  • Update jquery to version 2.2.3 ?
  • Update grunt to version 1.0.1 ?
  • Update grunt to version 1.0.0 ?
  • Update lodash.merge to version 4.3.4 ?
  • Update babel-eslint to version 6.0.2 ?
  • Update babel-eslint to version 6.0.1 ?
  • Update karma-mocha-reporter to version 2.0.3 ?
  • Update grunt-sass to version 1.2.0 ?
  • Update karma-sinon to version 1.0.5 ?
  • Update card-validator to version 2.2.8 ?
  • Update karma-firefox-launcher to version 1.0.0 ?
  • Update karma-sauce-launcher to version 1.0.0 ?
  • Update grunt-karma to version 1.0.0 ?
  • Update babel-core to version 6.8.0 ?
  • Update sinon to version 1.17.4 ?
  • Update react-maskedinput to version 3.1.3 ?
  • Update karma-mocha to version 1.0.1 ?
  • Update classnames to version 2.2.5 ?
  • Update load-grunt-configs to version 1.0.0 ?
  • Update react to version 15.0.2 ?
  • Update eslint to version 2.9.0 ?
  • Update braintree-web to version 2.24.0 ?
  • Update react-json-table to version 0.0.4 ?
  • Update babel-eslint to version 6.0.4 ?
  • Update classnames to version 2.2.4 ?
  • Update redux to version 3.5.2 ?
  • Update eslint to version 2.7.0 ?
  • Update eslint to version 2.6.0 ?
  • Update karma-mocha-reporter to version 2.0.2 ?
  • Update babel-core to version 6.7.7 ?
  • Update redux to version 3.5.1 ?
  • Update babel-eslint to version 6.0.3 ?
  • Update redux to version 3.5.0 ?
  • Update eslint-plugin-react to version 5.0.1 ?
  • Update mocha to version 2.5.0 ?
  • Update mocha to version 2.5.1 ?
  • Update react to version 15.1.0 ?
  • Update jquery to version 2.2.4 ?
  • Update webpack to version 1.13.1 ?
  • Update braintree-web to version 2.24.1 ?
  • Update babel-core to version 6.9.0 ?
  • Update grunt-svg-sprite to version 1.3.1 ?
  • Update eslint to version 2.10.2 ?
  • Update grunt-svg-sprite to version 1.3.0 ?
  • Update eslint to version 2.10.1 ?
  • Update eslint to version 2.10.0 ?
  • Update lodash.merge to version 4.4.0 ?
  • Update redux-thunk to version 2.1.0 ?
  • Update eslint-plugin-react to version 5.1.1 ?
  • Update eslint-plugin-react to version 5.1.0 ?
  • Update eslint to version 2.11.1 ?
  • Update babel-core to version 6.9.1 ?
  • Update eslint to version 2.11.0 ?
  • Update mocha to version 2.5.3 ?
  • Update react-maskedinput to version 3.2.0 ?
  • Update mocha to version 2.5.2 ?
  • Update babel-eslint to version 6.1.0 ?
  • Update events to version 1.1.1 ?
  • Update babel-core to version 6.10.4 ?
  • Update babel-eslint to version 6.0.5 ?
  • Update eslint to version 2.13.1 ?
  • Update eslint-plugin-react to version 5.2.2 ?
  • Update eslint to version 2.13.0 ?
  • Update eslint-plugin-react to version 5.2.1 ?
  • Update braintree-web to version 2.25.0 ?
  • Update connect-fonts-firasans to version 0.0.6 ?
  • Update connect-fonts-firasans to version 0.0.5 ?
  • Update eslint to version 2.12.0 ?
  • Update jquery to version 3.0.0 ?
  • Update jquery to version 3.1.0 ?
  • Update karma to version 1.1.1 ?
  • Update eslint to version 3.0.1 ?
  • Update grunt-eslint to version 19.0.0 ?
  • Update react to version 15.2.0 ?
  • Update eslint to version 3.0.0 ?
  • Update normalize.css to version 4.2.0 ?
  • Update grunt-svg-sprite to version 1.3.3 ?
  • Update braintree-web to version 2.26.0 ?
  • Update grunt-svg-sprite to version 1.3.2 ?
  • Update karma to version 1.1.0 ?
  • Update karma-mocha to version 1.1.1 ?
  • Update karma-mocha to version 1.1.0 ?
  • Update karma to version 1.0.0 ?
  • Update eslint to version 3.7.0 🚀
  • Update grunt-webpack to version 1.0.15 🚀
  • Update babel-core to version 6.16.0 🚀
  • Update braintree-web to version 3.3.0 🚀
  • Update babel-eslint to version 7.0.0 🚀
  • Update mocha to version 3.1.0 🚀
  • Update eslint to version 3.6.1 🚀
  • Update karma-mocha to version 1.2.0 🚀
  • Update eslint to version 3.6.0 🚀
  • Update jquery to version 3.1.1 🚀
  • Update card-validator to version 3.0.0 🚀
  • Update react to version 15.3.2 🚀
  • Update sinon to version 1.17.6 🚀
  • Update karma-mocha-reporter to version 2.2.0 🚀
  • Update webpack-dev-server to version 1.16.1 🚀
  • Update fecha to version 2.3.0 🚀
  • Update webpack-dev-server to version 1.16.0 🚀
  • Update eslint-plugin-react to version 6.2.2 🚀
  • Update braintree-web to version 3.2.0 🚀
  • Update payment-icons to version 0.0.9 🚀
  • Update eslint-plugin-react to version 6.2.1 🚀
  • Update eslint to version 3.5.0 🚀
  • Update karma to version 1.3.0 🚀
  • Update braintree-web to version 3.1.0 🚀
  • Update payment-icons to version 0.0.8 🚀
  • Update redux to version 3.6.0 🚀
  • Update webpack-dev-server to version 1.15.1 🚀
  • Update braintree-web to version 3.0.2 🚀
  • Update grunt-svg-sprite to version 1.3.6 🚀
  • Update eslint-plugin-react to version 6.2.0 🚀
  • Update eslint to version 3.8.0 🚀
  • Update braintree-web to version 3.5.0 🚀
  • Update mocha to version 3.1.2 🚀
  • Update braintree-web to version 3.4.0 🚀
  • Update eslint-plugin-react to version 6.4.1 🚀
  • Update grunt-webpack to version 1.0.18 🚀
  • Update react-maskedinput to version 3.3.0 🚀
  • Update grunt-webpack to version 1.0.17 🚀
  • Update mocha to version 3.1.1 🚀
  • Update eslint-plugin-react to version 6.4.0 🚀
  • Update webpack-dev-server to version 1.16.2 🚀
  • Update eslint to version 3.7.1 🚀
  • Update payment-icons to version 0.0.10 🚀
  • Update babel-core to version 6.17.0 🚀
  • Update grunt-webpack to version 1.0.16 🚀
  • Update eslint to version 3.9.1 🚀
  • Update eslint to version 3.9.0 🚀
  • Update babel-loader to version 6.2.7 🚀
  • Update babel-loader to version 6.2.6 🚀
  • Update babel-eslint to version 7.1.0 🚀
  • Update webpack to version 1.13.3 🚀
  • Update karma-sauce-launcher to version 1.1.0 🚀
  • Update grunt-contrib-csslint to version 2.0.0 🚀
  • Update eslint to version 3.8.1 🚀
  • Update karma-mocha to version 1.3.0 🚀
  • Update eslint-plugin-react to version 6.6.0 🚀
  • Update payment-icons to version 0.0.12 🚀
  • Update payment-icons to version 0.0.11 🚀
  • Update eslint-plugin-react to version 6.5.0 🚀
  • Update babel-core to version 6.18.2 🚀
  • Update babel-core to version 6.18.1 🚀
payments-ui list of languages used
Other projects in JavaScript