From 56ad614c8121f52474f6d1a7bf8a1bfbcb23e909 Mon Sep 17 00:00:00 2001 From: Douglas Miller Date: Wed, 4 Oct 2023 17:53:01 -0500 Subject: [PATCH] Updating setup-node and reversing README link --- .github/workflows/docs.yml | 3 +- README.md | 204 +------------------------------------ README.mdx | 204 ++++++++++++++++++++++++++++++++++++- 3 files changed, 206 insertions(+), 205 deletions(-) mode change 100644 => 120000 README.md mode change 120000 => 100644 README.mdx diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index d96a13c..fa40d72 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -1,4 +1,5 @@ on: + workflow_call: repository_dispatch: types: - docs_publish @@ -14,7 +15,7 @@ jobs: - uses: actions/checkout@v2 - name: Use Node.js - uses: actions/setup-node@v1.1.0 + uses: actions/setup-node@v3 - name: Build documentation run: make docs-build diff --git a/README.md b/README.md deleted file mode 100644 index 47e6b6a..0000000 --- a/README.md +++ /dev/null @@ -1,203 +0,0 @@ - - -# react-recurly · [![build status][travis-image]][travis-url] [![coverage][coverage-image]][coverage-url] [![contributor covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg)](CODE_OF_CONDUCT.md) - - -React components for [Recurly.js][docs-recurly-js] - -## Documentation - -[Documentation & Reference][docs] - -[Recurly.js Documentation][docs-recurly-js] - -## Examples - -[Interactive Demo][demo] - -A great way to get started is to try the [interactive demo][demo] in our documentation, and look through the [demo source][demo-src] on GitHub. - -## Installation - -Install this package with npm - -```bash -npm install @recurly/react-recurly -``` - -Then, include recurly.js in your application via our CDN. - -```html - - - -``` - -## Implementation Guide - -In this guide, we will cover the steps necessary to **create a payment form** that will submit your user's payment information to Recurly. - -> ℹ️ If you haven't yet, please review the [Recurly.js documentation][docs-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. - -To start, we will use the [<RecurlyProvider />][docs-component-recurly-provider] component to set our [public key][app-api-access]. - -```jsx -// app.js -import React from 'react'; -import { RecurlyProvider } from '@recurly/react-recurly'; - -function App () { - return ( - - ); -} -``` - -Now we can set up our payment form. For this, we will use [Recurly.js Elements][docs-recurly-js-elements]. First, we will use the [<Elements />][docs-component-elements] component to group our Elements together. We'll also create a `` component to contain our payment form. - -```jsx -// app.js -import React from 'react'; -import { RecurlyProvider, Elements } from '@recurly/react-recurly'; -import { MyPaymentForm } from './my-payment-form'; - -function App () { - return ( - - - - - - ); -} -``` - -Within our new `` component, we'll add a [<CardElement />][docs-component-card-element] which will render a secure card element. We'll also add inputs for our users' name. To let react-recurly know that we want to use these fields, we'll use a `data-recurly` attribute. To include additional properties, see [this billing fields table][docs-recurly-js-billing-fields]. - -```jsx -// my-payment-form.js -import React from 'react'; -import { CardElement } from '@recurly/react-recurly'; - -export function MyPaymentForm (props) { - return ( -
- - - - - ); -} -``` - -We are now ready to add the final step: **getting a token**. When our users submit our form, we want to send their payment information to Recurly, which will return a token. We'll then keep this token to use in the Recurly API. - -To accomplish this, we will use the [useRecurly][docs-hook-use-recurly] hook. This hook returns a Recurly.js instance, on which we will call [recurly.token][docs-recurly-js-token]. Since this function expects a `
`, we will create a [React ref](react-refs) to pass to it. - -```jsx -// my-payment-form.js -import React from 'react'; -import { CardElement, useRecurly } from '@recurly/react-recurly'; - -export function MyPaymentForm (props) { - const formRef = React.useRef(); - const recurly = useRecurly(); - - function handleSubmit (event) { - event.preventDefault(); - recurly.token(formRef.current, (err, token) => { - if (err) { - // handle error - } else { - // save the token.id, and submit it to the Recurly API from your server - } - }); - } - - return ( - - - - - - ); -} -``` - -With that, we have implemented the essential components of a payment form using react-recurly. The tokens generated above may be used on any `billing_info` object in the [Recurly API][docs-recurly-api]. - -### Additional Usage - -React-recurly also includes a [useCheckoutPricing][docs-hook-use-checkout-pricing] hook for generating a pricing preview before checking out. - -```js -import { useCheckoutPricing, RecurlyProvider } from '@recurly/react-recurly'; - -function PricingPreview () { - const initialPricingInput = { - subscriptions: [ - { - plan: 'my-plan' - } - ] - }; - - const [{ price, loading }, setCheckoutPricing] = useCheckoutPricing(initialPricingInput); - - if (!loading) { - return
{price.now.subtotal}
- }; -}; - -export default function MyApp () { - - - -}; -``` - -For more details, see the [useCheckoutPricing Documentation][docs-hook-use-checkout-pricing]. - -## Additional resources - -* [Documentation & Reference][docs] -* [Recurly.js Documentation][docs-recurly-js] -* [Interactive Demo][demo] -* [Code on GitHub][github] -* [Package on npm][npm] -* [Recurly API Documentation][docs-recurly-api] -* Questions? [GitHub issues][github-issues] and [Recurly support][support] are here for you. - -## Licence - -MIT - -[github]: https://github.com/recurly/react-recurly -[github-issues]: https://github.com/recurly/react-recurly/issues -[npm]: https://www.npmjs.com/package/@recurly/react-recurly -[travis-url]: https://travis-ci.org/recurly/react-recurly/builds -[travis-image]: https://img.shields.io/travis/recurly/react-recurly/main.svg?style=flat-square -[coverage-url]: https://coveralls.io/github/recurly/react-recurly -[coverage-image]: https://img.shields.io/coveralls/github/recurly/react-recurly.svg?style=flat-square - -[docs]: https://recurly.github.io/react-recurly -[docs-component-recurly-provider]: https://recurly.github.io/react-recurly/?path=/docs/components-recurlyprovider--page -[docs-component-elements]: https://recurly.github.io/react-recurly/?path=/docs/components-elements--page -[docs-component-card-element]: https://recurly.github.io/react-recurly/?path=/docs/components-cardelement--default -[docs-hook-use-recurly]: https://recurly.github.io/react-recurly/?path=/docs/hooks-userecurly--page -[docs-hook-use-checkout-pricing]: https://recurly.github.io/react-recurly/?path=/docs/hooks-usecheckoutpricing--page - -[docs-recurly-js]: https://developers.recurly.com/reference/recurly-js/ -[docs-recurly-js-elements]: https://developers.recurly.com/reference/recurly-js/#elements -[docs-recurly-js-billing-fields]: https://developers.recurly.com/reference/recurly-js/#billing-fields -[docs-recurly-js-token]: https://developers.recurly.com/reference/recurly-js/#getting-a-token -[docs-recurly-api]: https://developers.recurly.com/api - -[demo]: https://recurly.github.io/react-recurly/?path=/docs/introduction-interactive-demo--page -[demo-src]: https://github.com/recurly/react-recurly/tree/main/demo -[card-element-demo.js]: https://github.com/recurly/react-recurly/demo/src/card-element-demo.js - -[app-api-access]: https://app.recurly.com/go/developer/api_access -[support]: https://recurly.zendesk.com - -[react-refs]: https://reactjs.org/docs/refs-and-the-dom.html diff --git a/README.md b/README.md new file mode 120000 index 0000000..7a1ed50 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +README.mdx \ No newline at end of file diff --git a/README.mdx b/README.mdx deleted file mode 120000 index 42061c0..0000000 --- a/README.mdx +++ /dev/null @@ -1 +0,0 @@ -README.md \ No newline at end of file diff --git a/README.mdx b/README.mdx new file mode 100644 index 0000000..47e6b6a --- /dev/null +++ b/README.mdx @@ -0,0 +1,203 @@ + + +# react-recurly · [![build status][travis-image]][travis-url] [![coverage][coverage-image]][coverage-url] [![contributor covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg)](CODE_OF_CONDUCT.md) + + +React components for [Recurly.js][docs-recurly-js] + +## Documentation + +[Documentation & Reference][docs] + +[Recurly.js Documentation][docs-recurly-js] + +## Examples + +[Interactive Demo][demo] + +A great way to get started is to try the [interactive demo][demo] in our documentation, and look through the [demo source][demo-src] on GitHub. + +## Installation + +Install this package with npm + +```bash +npm install @recurly/react-recurly +``` + +Then, include recurly.js in your application via our CDN. + +```html + + + +``` + +## Implementation Guide + +In this guide, we will cover the steps necessary to **create a payment form** that will submit your user's payment information to Recurly. + +> ℹ️ If you haven't yet, please review the [Recurly.js documentation][docs-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. + +To start, we will use the [<RecurlyProvider />][docs-component-recurly-provider] component to set our [public key][app-api-access]. + +```jsx +// app.js +import React from 'react'; +import { RecurlyProvider } from '@recurly/react-recurly'; + +function App () { + return ( + + ); +} +``` + +Now we can set up our payment form. For this, we will use [Recurly.js Elements][docs-recurly-js-elements]. First, we will use the [<Elements />][docs-component-elements] component to group our Elements together. We'll also create a `` component to contain our payment form. + +```jsx +// app.js +import React from 'react'; +import { RecurlyProvider, Elements } from '@recurly/react-recurly'; +import { MyPaymentForm } from './my-payment-form'; + +function App () { + return ( + + + + + + ); +} +``` + +Within our new `` component, we'll add a [<CardElement />][docs-component-card-element] which will render a secure card element. We'll also add inputs for our users' name. To let react-recurly know that we want to use these fields, we'll use a `data-recurly` attribute. To include additional properties, see [this billing fields table][docs-recurly-js-billing-fields]. + +```jsx +// my-payment-form.js +import React from 'react'; +import { CardElement } from '@recurly/react-recurly'; + +export function MyPaymentForm (props) { + return ( +
+ + + + + ); +} +``` + +We are now ready to add the final step: **getting a token**. When our users submit our form, we want to send their payment information to Recurly, which will return a token. We'll then keep this token to use in the Recurly API. + +To accomplish this, we will use the [useRecurly][docs-hook-use-recurly] hook. This hook returns a Recurly.js instance, on which we will call [recurly.token][docs-recurly-js-token]. Since this function expects a `
`, we will create a [React ref](react-refs) to pass to it. + +```jsx +// my-payment-form.js +import React from 'react'; +import { CardElement, useRecurly } from '@recurly/react-recurly'; + +export function MyPaymentForm (props) { + const formRef = React.useRef(); + const recurly = useRecurly(); + + function handleSubmit (event) { + event.preventDefault(); + recurly.token(formRef.current, (err, token) => { + if (err) { + // handle error + } else { + // save the token.id, and submit it to the Recurly API from your server + } + }); + } + + return ( + + + + + + ); +} +``` + +With that, we have implemented the essential components of a payment form using react-recurly. The tokens generated above may be used on any `billing_info` object in the [Recurly API][docs-recurly-api]. + +### Additional Usage + +React-recurly also includes a [useCheckoutPricing][docs-hook-use-checkout-pricing] hook for generating a pricing preview before checking out. + +```js +import { useCheckoutPricing, RecurlyProvider } from '@recurly/react-recurly'; + +function PricingPreview () { + const initialPricingInput = { + subscriptions: [ + { + plan: 'my-plan' + } + ] + }; + + const [{ price, loading }, setCheckoutPricing] = useCheckoutPricing(initialPricingInput); + + if (!loading) { + return
{price.now.subtotal}
+ }; +}; + +export default function MyApp () { + + + +}; +``` + +For more details, see the [useCheckoutPricing Documentation][docs-hook-use-checkout-pricing]. + +## Additional resources + +* [Documentation & Reference][docs] +* [Recurly.js Documentation][docs-recurly-js] +* [Interactive Demo][demo] +* [Code on GitHub][github] +* [Package on npm][npm] +* [Recurly API Documentation][docs-recurly-api] +* Questions? [GitHub issues][github-issues] and [Recurly support][support] are here for you. + +## Licence + +MIT + +[github]: https://github.com/recurly/react-recurly +[github-issues]: https://github.com/recurly/react-recurly/issues +[npm]: https://www.npmjs.com/package/@recurly/react-recurly +[travis-url]: https://travis-ci.org/recurly/react-recurly/builds +[travis-image]: https://img.shields.io/travis/recurly/react-recurly/main.svg?style=flat-square +[coverage-url]: https://coveralls.io/github/recurly/react-recurly +[coverage-image]: https://img.shields.io/coveralls/github/recurly/react-recurly.svg?style=flat-square + +[docs]: https://recurly.github.io/react-recurly +[docs-component-recurly-provider]: https://recurly.github.io/react-recurly/?path=/docs/components-recurlyprovider--page +[docs-component-elements]: https://recurly.github.io/react-recurly/?path=/docs/components-elements--page +[docs-component-card-element]: https://recurly.github.io/react-recurly/?path=/docs/components-cardelement--default +[docs-hook-use-recurly]: https://recurly.github.io/react-recurly/?path=/docs/hooks-userecurly--page +[docs-hook-use-checkout-pricing]: https://recurly.github.io/react-recurly/?path=/docs/hooks-usecheckoutpricing--page + +[docs-recurly-js]: https://developers.recurly.com/reference/recurly-js/ +[docs-recurly-js-elements]: https://developers.recurly.com/reference/recurly-js/#elements +[docs-recurly-js-billing-fields]: https://developers.recurly.com/reference/recurly-js/#billing-fields +[docs-recurly-js-token]: https://developers.recurly.com/reference/recurly-js/#getting-a-token +[docs-recurly-api]: https://developers.recurly.com/api + +[demo]: https://recurly.github.io/react-recurly/?path=/docs/introduction-interactive-demo--page +[demo-src]: https://github.com/recurly/react-recurly/tree/main/demo +[card-element-demo.js]: https://github.com/recurly/react-recurly/demo/src/card-element-demo.js + +[app-api-access]: https://app.recurly.com/go/developer/api_access +[support]: https://recurly.zendesk.com + +[react-refs]: https://reactjs.org/docs/refs-and-the-dom.html