diff --git a/docs/2-hooks/useCheckoutPricing.stories.mdx b/docs/2-hooks/useCheckoutPricing.stories.mdx index e64d041..3c7a631 100644 --- a/docs/2-hooks/useCheckoutPricing.stories.mdx +++ b/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]. diff --git a/docs/2-hooks/useRecurly.stories.mdx b/docs/2-hooks/useRecurly.stories.mdx index a9280c7..ba4dadf 100644 --- a/docs/2-hooks/useRecurly.stories.mdx +++ b/docs/2-hooks/useRecurly.stories.mdx @@ -3,11 +3,13 @@ import { Subtitle } from '@storybook/addon-docs/blocks'; # useRecurly - 'To get a token'} /> + '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 ; +}; +``` + [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