├── .eslintrc.js
├── .gitignore
├── .npmignore
├── .travis.yml
├── CHANGELOG.md
├── README.md
├── babel.config.js
├── demo.jsx
├── docs
├── demo.js
├── demo.js.map
└── index.html
├── jest.config.js
├── package.json
├── rollup.config.js
├── script
├── cibuild
├── demo
├── lint
├── preversion
└── test
├── specs
├── .eslintrc.js
├── __snapshots__
│ └── payment-fields.spec.js.snap
├── braintree-mocks.js
├── invert.js
├── jest-setup.js
├── payment-fields.spec.js
├── square-mocks.js
├── stripe-mocks.js
├── testing-component-factory.jsx
└── vendor-mock.js
├── src
├── api.js
├── braintree.js
├── context.js
├── field.jsx
├── payment-fields.jsx
├── square.js
├── stripe.js
├── util.js
└── vendors.js
├── webpack.config.js
└── yarn.lock
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "extends": "argosity",
3 | "parser": "babel-eslint",
4 | "settings": {
5 | "react": {
6 | "pragma": "React", // Pragma to use, default to "React"
7 | "version": "16.0", // React version, default to the latest React stable release
8 | },
9 | },
10 | rules: {
11 | 'no-underscore-dangle': 0,
12 | },
13 | };
14 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | yarn-error.log
4 | npm-debug.log
5 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "node"
4 | cache:
5 | yarn: true
6 | directories:
7 | - node_modules
8 | script: npm run ci
9 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | ## [v0.6.0](https://github.com/nathanstitt/payment-fields/tree/v0.6.0) (2018-02-08) [diff](https://github.com/nathanstitt/payment-fields/compare/v0.5.1...v0.6.0)
4 | * Compile individual scripts in `dist` directory
5 | * Update code to be IE 11 compatible
6 |
7 | ## [v0.5.1](https://github.com/nathanstitt/payment-fields/tree/v0.5.1) (2018-01-14) [diff](https://github.com/nathanstitt/payment-fields/compare/v0.5.0...v0.5.1)
8 | * Export Vendors
9 |
10 | ## [v0.5.0](https://github.com/nathanstitt/payment-fields/tree/v0.5.0) (2017-12-06) [diff](https://github.com/nathanstitt/payment-fields/compare/v0.4.0...v0.5.0)
11 | * Add "isPotentiallyValid" property to events
12 |
13 | ## [v0.4.0](https://github.com/nathanstitt/payment-fields/tree/v0.4.0) (2017-11-28) [diff](https://github.com/nathanstitt/payment-fields/compare/v0.3.0...v0.4.0)
14 | * Use Errors for rejected Promise
15 | * Check vendor property is one of the supported types (Braintree, Square, Stripe)
16 | * only emit form valid if Square reports field's are "completelyValid"
17 |
18 | ## [v0.3.0](https://github.com/nathanstitt/payment-fields/tree/v0.3.0) (2017-10-01) [diff](https://github.com/nathanstitt/payment-fields/compare/v0.2.1...v0.3.0)
19 | * only emit form valid if Square reports field's are "completelyValid"
20 | * Fix validity event on Square
21 | * Better styles
22 |
23 | ## [v0.2.1](https://github.com/nathanstitt/payment-fields/tree/v0.2.1) (2017-10-01) [diff](https://github.com/nathanstitt/payment-fields/compare/v0.2.0...v0.2.1)
24 | * Only set authorization after wrapper is rendered and fields have checked in
25 |
26 | ## [v0.2.0](https://github.com/nathanstitt/payment-fields/tree/v0.2.0) (2017-10-01) [diff](https://github.com/nathanstitt/payment-fields/compare/v0.1.0...v0.2.0)
27 | * Initial working version from https://github.com/nathanstitt/react-braintree-fields
28 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Integrate Braintree/Stripe/Square payment fields
2 |
3 | A React component to make integrating [Braintree's Hosted Fields](https://developers.braintreepayments.com/guides/hosted-fields/), [Stripe's Elements](https://stripe.com/docs/elements) and [Square's Payment Form](https://docs.connect.squareup.com/articles/adding-payment-form) easier.
4 |
5 | Care is taken so the API is (nearly) identical across the vendors.
6 |
7 | This is intended for a Saas that allows customers to use their own payment processor, as long as it uses the newish "hosted iframe" approach.
8 |
9 | further docs to be written
10 |
11 | [](https://travis-ci.org/nathanstitt/payment-fields)
12 |
13 | See [demo site](https://nathanstitt.github.io/payment-fields/) for a working example. It renders [demo.jsx](demo.jsx)
14 |
15 | ## Example
16 |
17 | Note: methods are removed for brevity and this isn't fully copy & pastable. For a working example see [demo.jsx](demo.jsx)
18 |
19 | ```javascript
20 |
21 | import React from 'react';
22 | import PaymentFields from 'payment-fields';
23 | import PropTypes from 'prop-types';
24 |
25 | class PaymentForm extends React.PureComponent {
26 |
27 | static propTypes = {
28 | vendor: PropTypes.oneOf(['Square', 'Stripe', 'Braintree']).isRequired,
29 | authorization: PropTypes.String.isRequired,
30 | }
31 |
32 | render() {
33 | return (
34 | this.setState({ valid: ev.isValid })}
39 | onCardTypeChange={(c) => this.setState({ card: c.brand })}
40 | onReady={this.onFieldsReady}
41 | styles={{
42 | base: {
43 | 'font-size': '24px',
44 | 'font-family': 'helvetica, tahoma, calibri, sans-serif',
45 | padding: '6px',
46 | color: '#7d6b6b',
47 | },
48 | focus: { color: '#000000' },
49 | valid: { color: '#00bf00' },
50 | invalid: { color: '#a00000' },
51 | }}
52 | >
53 |
Form is Valid: {this.state.isValid ? '👍' : '👎'}
54 |
Card number ({this.state.card}):
55 |
63 | Date:
64 | CVV:
65 | Zip:
66 |
67 | );
68 | }
69 |
70 | }
71 |
72 | ```
73 |
74 | ## PaymentFields Component
75 |
76 | Props:
77 | * vendor: Required, one of Braintree, Square, or Stripe
78 | * authorization: Required, the string key that corresponds to:
79 | * Braintree: calls it "authorization"
80 | * Square: "applicationId"
81 | * Stripe: the Api Key for Stripe Elements
82 | * onReady: function called once form fields are initialized and ready for input
83 | * onValidityChange: function that is called whenever the card validity changes. May be called repeatedly even if the validity is the same as the previous call. Will be passed a single object with a `isValid` property. The object may have other type specific properties as well.
84 | * onCardTypeChange: Called as soon as the card type is known and whenever it changes. Passed a single object with a `brand` property. The object may have other type specific properties as well.
85 | * onError: A function called whenever an error occurs, typically during tokenization but some vendors (Square at least) will also call it when the fields fail to initialize.
86 | * styles: A object that contains 'base', 'focus', 'valid', and 'invalid' properties. The `PaymentFields` component will convert the styles to match each vendor's method of specifying them and attempt to find the lowest common denominator. `color` and `font-size` are universally supported.
87 | * passThroughStyles: For when the `styles` property doesn't offer enough control. Anything specified here will be passed through to the vendor specific api in place of the `styles`.
88 | * tagName: which element to use as a wrapper element. Defaults to `div`
89 | * className: a className to set on the wrapper element, it's applied in addition to `payment-fields-wrapper`
90 |
91 | ## PaymentFields.Field Component
92 |
93 | Props:
94 | * type: Required, one of 'cardNumber', 'expirationDate', 'cvv', 'postalCode' Depending on fraud settings, some vendors do not require postalCode.
95 | * placeholder: What should be displayed in the field when it's empty and is not focused
96 | * className: a className to set on the placeholder element, some vendors will replace the placeholder with an iframe, while others will render the iframe inside the placeholder. All vendors retain the className property though so it's safe to use this for some styling.
97 | * onValidityChange: A function called when the field's validity changes. Like the onValidityChange on the main PaymentFields wrapper, may be called repeatedly with the same status
98 | * onFocus: A function called when the field is focused. Will be called with the vendor specific event
99 | * onBlur: A function called when the field loses focus. Will be called with the vendor specific event, as well as a `isValid` property that indicates if the field is valid, and `isPotentiallyValid` which is set if the input is possibily valid but still incomplete.
100 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | const config = {
2 | presets: [
3 | [
4 | '@babel/preset-env', {
5 | useBuiltIns: 'entry',
6 | corejs: 2,
7 | targets: '> 1% in US',
8 | },
9 | ], [
10 | '@babel/preset-react', {
11 |
12 | },
13 | ],
14 | ],
15 | plugins: [
16 | '@babel/plugin-proposal-class-properties',
17 | '@babel/plugin-syntax-dynamic-import',
18 | ],
19 | };
20 |
21 | module.exports = config;
22 |
--------------------------------------------------------------------------------
/demo.jsx:
--------------------------------------------------------------------------------
1 | import { render } from 'react-dom';
2 | import React from 'react';
3 |
4 | import Vendors from './src/vendors';
5 | import PaymentFields from './src/payment-fields.jsx';
6 |
7 | export default class PaymentFieldsDemo extends React.PureComponent {
8 |
9 | constructor(props) {
10 | super(props);
11 | [
12 | 'logEvent',
13 | 'getToken',
14 | 'onError',
15 | 'onTypeChange',
16 | 'onFieldsReady',
17 | 'onCardTypeChange',
18 | 'onValidityChange',
19 | 'setAuthorization',
20 | 'onNumberValid',
21 | ].forEach((prop) => { this[prop] = this[prop].bind(this); });
22 | this.state = {
23 | type: 'Stripe',
24 | valid: false,
25 | log: [],
26 | isEnabled: false,
27 | };
28 | }
29 |
30 | logEvent(ev) {
31 | let msg = this.state.type;
32 | if (ev.type) { msg += ` : ${ev.type}`; }
33 | if (ev.field) { msg += ` : ${ev.field}`; }
34 | const { event: _, ...attrs } = ev;
35 | this.setState({
36 | log: [`${msg} : ${JSON.stringify(attrs)}`].concat(this.state.log),
37 | });
38 | }
39 |
40 | onNumberValid(ev) {
41 | this.setState({ numberIsValid: ev.isValid })
42 | }
43 |
44 | onTypeChange(ev) {
45 | this.inputRef.value = '';
46 | this.logEvent({ type: 'teardown' });
47 | this.setState({
48 | tokenize: null, valid: false, ready: false, type: ev.target.value, authorization: '',
49 | });
50 | }
51 |
52 | onError(error) {
53 | this.logEvent(error);
54 | }
55 |
56 | getToken() {
57 | this.state.tokenize().then(
58 | ev => this.logEvent(ev),
59 | ).catch(
60 | error => this.logEvent({ error }),
61 | );
62 | }
63 |
64 | onCardTypeChange(card) {
65 | this.logEvent(card);
66 | this.setState({ card: card.brand });
67 | }
68 |
69 | onFieldsReady({ tokenize }) {
70 | this.logEvent({ type: 'fields ready' });
71 | this.setState({ ready: true, tokenize });
72 | }
73 |
74 | onValidityChange(ev) {
75 | this.logEvent(ev);
76 | this.setState({ valid: ev.isValid });
77 | }
78 |
79 | setAuthorization() {
80 | this.setState({ authorization: this.inputRef.value });
81 | }
82 |
83 | renderFields() {
84 | if (!this.state.authorization) { return null; }
85 | return (
86 |
105 |