version 1.0.0

Author: chrissrogers

.gitignore

@@ -4,3 +4,4 @@ build
 node_modules
 
 npm-debug.log
+.env

.npmignore

@@ -0,0 +1,5 @@
+.babelrc
+demo
+Makefile
+webpack.config.js
+.env

Makefile

@@ -0,0 +1,28 @@
+BIN = ./node_modules/.bin
+WEBPACK = $(BIN)/webpack
+SERVER = $(BIN)/webpack-dev-server --inline --hot --port 8040
+
+server: build
+ifdef RECURLY_JS_CERT
+	@$(SERVER) --https --cert $(RECURLY_JS_CERT) --key $(RECURLY_JS_KEY) --display-error-details
+else
+	@$(SERVER) --https
+endif
+
+build: build/demo.js
+build/demo.js: demo lib node_modules
+	@$(WEBPACK) --display-reasons --display-chunks
+
+test:
+	@npm test
+
+publish: lib clean node_modules
+	@npm publish --access public
+
+node_modules: package.json
+	@npm install
+
+clean:
+	@rm -rf node_modules build
+
+.PHONY: clean publish server test

README.md

@@ -1 +1,180 @@
-# react-recurly
+# react-recurly
+
+*React components for Recurly.js*
+
+## Demo
+
+See the [demo](demo) directory.
+
+These examples provide a quick start to using `react-recurly`. The [card-element-demo](demo/demos/card-element-demo.js) is a great place to begin seeing how you might structure your own payment form components.
+
+1. `make demo`
+2. [https://localhost:8040](https://localhost:8040)
+
+## Getting Started
+
+If you haven't yet, please review the [Recurly.js documentation](https://developers.recurly.com/reference/recurly-js/). This will give you a solid understanding of the total capabilities of the library before we begin implementing some of its features in React. Now let's begin!
+
+First, install this package
+
+```bash
+npm install @recurly/react-recurly
+```
+
+Then, include recurly.js in your application via our CDN.
+
+```html
+<script src="https://js.recurly.com/v4/recurly.js"></script>
+<!-- optional: include recurly.css -->
+<link rel="stylesheet" href="https://js.recurly.com/v4/recurly.css">
+```
+
+From here, you will structure your React application's checkout components in the following manner. We will go into more detail on each component below.
+
+## Simplest Implementation
+
+```jsx
+import React from 'react';
+import { CardElement, Elements, RecurlyProvider, useRecurly } from 'react-recurly';
+import { render } from 'react-dom';
+
+const App = () => {
+  return (
+    <RecurlyProvider publicKey="ewr1-abcdefghijklmno">
+      <Elements>
+        <CardForm />
+      </Elements>
+    </RecurlyProvider>
+  );
+};
+
+function CardForm (props) {
+  const recurly = useRecurly();
+  let form = React.createRef();
+
+  const handleSubmit = event => {
+    if (event.preventDefault) event.preventDefault();
+    recurly.token(form.current, (err, token) => {
+      if (err) console.log('[error]', err);
+      else console.log('[token]', token);
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} ref={form}>
+      <input type="text" data-recurly="first_name" defaultValue="John" />
+      <input type="text" data-recurly="last_name" defaultValue="Rambo" />
+      <CardElement onSubmit={handleSubmit} />
+      <button>Submit</button>
+    </form>
+  );
+}
+
+render(<App />, document.querySelector('.App'));
+```
+
+### RecurlyProvider
+
+This component accepts your `publicKey` as a prop. It is responsible for creating a `recurly` instance on which we will generate tokens. This should wrap any other `react-recurly` component you will use.
+
+*`index.js`*
+```jsx
+import React from 'react';
+import { RecurlyProvider } from 'react-recurly';
+import { render } from 'react-dom';
+
+import MyCardForm from './my-card-form';
+
+const App = () => {
+  return (
+    <RecurlyProvider publicKey="ewr1-abcdefghijklmno">
+      <MyCardForm />
+    </RecurlyProvider>
+  );
+};
+
+render(<App />, document.querySelector('.App'));
+```
+
+### Elements
+
+This component groups `Element` components together. When generating tokens, it is used to determine which values will be tokenized. This should wrap your checkout form.
+
+*`index.js`*
+```jsx
+import React from 'react';
+import { Elements, RecurlyProvider } from 'react-recurly';
+import { render } from 'react-dom';
+
+import MyCardForm from './my-card-form';
+
+const App = () => {
+  return (
+    <RecurlyProvider publicKey="ewr1-abcdefghijklmno">
+      <Elements>
+        <MyCardForm />
+      </Elements>
+    </RecurlyProvider>
+  );
+};
+
+render(<App />, document.querySelector('.App'));
+```
+
+### CardElement
+
+This component renders a [Card Element](https://developers.recurly.com/reference/recurly-js/#the-card-element). Your users will enter their card information (number, expiry, and cvv) here.
+
+*`my-card-form.js`*
+```jsx
+import React from 'react';
+import { CardElement } from 'react-recurly';
+
+export function MyCardForm (props) {
+  return (
+    <form>
+      <input type="text" data-recurly="first_name" />
+      <input type="text" data-recurly="last_name" />
+      <CardElement />
+    </form>
+  );
+}
+```
+
+### CardNumberElement, CardMonthElement, CardYearElement, CardCvvElement
+
+If the `CardElement` does not suit your design needs, you may alternatively use individual card fields.
+
+### Getting a token: `useRecurly`
+
+Use the `useRecurly` hook to generate a token! When your user submits your checkout form, this hook is used to submit their card information securely to Recurly, generate a token, and return that token to you. You will then send this token to your server, and [use it in the Recurly API](https://developers.recurly.com/reference/recurly-js/#using-a-token) to store or charge your customer's credit card.
+
+`useRecurly` will return a `recurly` instance on which you will call `recurly.token`. You will create a ref to your form using [`React.createRef`](https://reactjs.org/docs/refs-and-the-dom.html), and pass this to `recurly.token`.
+
+*`my-card-form.js`*
+```jsx
+import React from 'react';
+import { CardElement, useRecurly } from 'react-recurly';
+
+export function MyCardForm (props) {
+  const recurly = useRecurly();
+  let form = React.createRef();
+
+  const handleSubmit = event => {
+    if (event.preventDefault) event.preventDefault();
+    recurly.token(form.current, (err, token) => {
+      if (err) console.log('[error]', err);
+      else console.log('[token]', token);
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} ref={form}>
+      <input type="text" data-recurly="first_name" />
+      <input type="text" data-recurly="last_name" />
+      <CardElement onSubmit={handleSubmit} />
+      <button>Submit</button>
+    </form>
+  );
+}
+```

babel.config.js

@@ -0,0 +1,14 @@
+// using babel.config.js instead of a .babelrc because
+// node_modules are not transpiled by babel-jest with
+// a .babelrc file.
+// See https://github.com/facebook/jest/issues/8365
+
+module.exports = {
+    'presets': [
+      '@babel/preset-react',
+      '@babel/preset-env'
+    ],
+    'plugins': [
+      'transform-class-properties'
+    ]
+};

demo/demos/card-element-demo.js

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+
+// in your app, these would be imported from 'react-recurly'
+import {
+  CardElement,
+  Elements,
+  RecurlyProvider,
+  useRecurly
+} from '../../lib/index';
+
+const handleBlur = () => console.log('[blur]');
+const handleChange = change => console.log('[change]', change);
+const handleClick = () => console.log('[click]');
+const handleFocus = () => console.log('[focus]');
+const handleReady = () => console.log('[ready]');
+
+export function CardElementDemo (props) {
+  const [fontSize, setFontSize] = useState('18');
+
+  const handleChangeFontSize = event => setFontSize(event.target.value);
+
+  return (
+    <div className="DemoSection">
+      <RecurlyProvider publicKey={process.env.RECURLY_PUBLIC_KEY}>
+        <Elements>
+          <CardForm fontSize={`${fontSize}px`} />
+        </Elements>
+      </RecurlyProvider>
+
+      <div>
+        <label htmlFor="element-font-size-card-demo">font size</label>
+        <input
+          id="element-font-size-card-demo"
+          type="range"
+          value={fontSize}
+          onChange={handleChangeFontSize}
+          min="0"
+          max="32"
+        />
+        {fontSize}px
+      </div>
+    </div>
+  );
+}
+
+function CardForm (props) {
+  const { fontSize } = props;
+  const recurly = useRecurly();
+  let form = React.createRef();
+
+  const handleSubmit = event => {
+    if (event.preventDefault) event.preventDefault();
+    recurly.token(form.current, (err, token) => {
+      if (err) console.log('[error]', err);
+      else console.log('[token]', token);
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} ref={form}>
+      <div>
+        <input data-recurly="first_name" placeholder="First Name" defaultValue="John" />
+        <input data-recurly="last_name" placeholder="Last Name" defaultValue="Rambo" />
+        <input data-recurly="postal_code" placeholder="Postal Code" defaultValue="94117" />
+      </div>
+      <CardElement
+        onBlur={handleBlur}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onReady={handleReady}
+        onSubmit={handleSubmit}
+        style={{ fontSize }}
+      />
+      <div>
+        <button>Pay</button>
+      </div>
+    </form>
+  );
+}