Merge pull request #47 from recurly/use-recurly-docs

Use recurly docs

docs/2-hooks/useCheckoutPricing.stories.mdx

@@ -9,7 +9,9 @@ import { PropsTable } from '@storybook/components';
 
 `import { useCheckoutPricing } from '@recurly/react-recurly';`
 
-A [custom hook][react-hooks] for interacting with [Recurly.js' pricing API][rjs-pricing] for providing users with an estimate of a purchase before they check out.
+Use this [hook][react-hooks] to interact with the [Recurly.js pricing API][rjs-pricing] and provide users with an estimate of a purchase before they check out.
+
+## Initializing
 
 To initialize, call `useCheckoutPricing` [with an initial checkout pricing input][use-checkout-pricing-input] from any component inside a [RecurlyProvider][recurly-provider].
 

docs/2-hooks/useRecurly.stories.mdx

@@ -3,11 +3,13 @@ import { Subtitle } from '@storybook/addon-docs/blocks';
 <Meta title="Hooks/useRecurly" />
 
 # useRecurly
-<Subtitle slot={() => 'To get a token'} />
+<Subtitle slot={() => 'To use a Recurly instance'} />
 
 `import { useRecurly } from '@recurly/react-recurly';`
 
-Use this [hook][react-hooks] to generate a token.
+Use this [hook][react-hooks] to access a Recurly instance.
+
+## Getting a token
 
 When a user submits your checkout form, use this hook to submit their card information securely to Recurly. We will 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][using-a-token] to store or charge your user's credit card.
 
@@ -39,6 +41,45 @@ export function MyCardForm (props) {
 }
 ```
 
+## Extended usage example: PayPal
+
+`useRecurly` can be used to expose any functionality in [Recurly-js][recurly-js].
+
+The example below shows how to use `useRecurly` to interact with the [Recurly-js PayPal API][paypal].
+
+```jsx
+const PayPalButton = () => {
+  const { recurly } = useRecurly();
+  const payPal = recurly.PayPal();
+
+  useEffect(() => {
+    payPal.on('token', token => {
+      console.log('Token: ', token);
+    });
+
+    payPal.on('error', error => {
+      throw error;
+    });
+
+    payPal.on('cancel', () => {
+      console.log('Cancelled');
+    });
+
+    payPal.on('ready', () => {
+      console.log('Ready');
+    });
+  }, [payPal]);
+
+  const handleClick = () => {
+    payPal.start();
+  };
+
+  return <button onClick={handleClick}>Start Paypal</button>;
+};
+```
+
 [react-hooks]: https://reactjs.org/docs/hooks-intro.html
 [react-refs]: https://reactjs.org/docs/refs-and-the-dom.html
 [using-a-token]: https://developers.recurly.com/reference/recurly-js/#using-a-token
+[recurly-js]: https://developers.recurly.com/reference/recurly-js/index.html
+[paypal]: https://developers.recurly.com/reference/recurly-js/index.html#paypal