From 3d840f32286fc47123a6d130318a24961313fd6d Mon Sep 17 00:00:00 2001
From: Christopher Rogers <chrissrogers@gmail.com>
Date: Wed, 23 Aug 2023 13:11:13 -0700
Subject: [PATCH 1/8] Fixes README

---
 .gitignore       |   1 -
 README.md        | 203 ++++++++++++++++++++++++++++++++++++++++++++++
 README.mdx       | 204 +----------------------------------------------
 types/index.d.ts |   2 +-
 4 files changed, 205 insertions(+), 205 deletions(-)
 create mode 100644 README.md
 mode change 100644 => 120000 README.mdx

diff --git a/.gitignore b/.gitignore
index 92cc15b..5a75083 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,4 +5,3 @@ lib-dist
 node_modules
 
 npm-debug.log
-README.md
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..47e6b6a
--- /dev/null
+++ b/README.md
@@ -0,0 +1,203 @@
+<img src="https://i.imgur.com/gGxJ8zx.png" align="right" />
+
+# react-recurly &middot; [![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
+<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">
+```
+
+## 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 [&lt;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 (
+    <RecurlyProvider publicKey="MY_PUBLIC_KEY" />
+  );
+}
+```
+
+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 [&lt;Elements />][docs-component-elements] component to group our Elements together. We'll also create a `<MyPaymentForm />` 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 (
+    <RecurlyProvider publicKey="MY_PUBLIC_KEY">
+      <Elements>
+        <MyPaymentForm />
+      </Elements>
+    </RecurlyProvider>
+  );
+}
+```
+
+Within our new `<MyPaymentForm />` component, we'll add a [&lt;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 (
+    <form>
+      <input type="text" data-recurly="first_name" placeholder="First name" />
+      <input type="text" data-recurly="last_name" placeholder="Last name" />
+      <CardElement />
+    </form>
+  );
+}
+```
+
+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 `<form>`, 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 (
+    <form onSubmit={handleSubmit} ref={formRef}>
+      <input type="text" data-recurly="first_name" placeholder="First name" />
+      <input type="text" data-recurly="last_name" placeholder="Last name" />
+      <CardElement />
+    </form>
+  );
+}
+```
+
+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 <div>{price.now.subtotal}</div>
+  };
+};
+
+export default function MyApp () {
+  <RecurlyProvider>
+    <PricingPreview />
+  </RecurlyProvider>
+};
+```
+
+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.mdx b/README.mdx
deleted file mode 100644
index 47e6b6a..0000000
--- a/README.mdx
+++ /dev/null
@@ -1,203 +0,0 @@
-<img src="https://i.imgur.com/gGxJ8zx.png" align="right" />
-
-# react-recurly &middot; [![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
-<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">
-```
-
-## 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 [&lt;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 (
-    <RecurlyProvider publicKey="MY_PUBLIC_KEY" />
-  );
-}
-```
-
-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 [&lt;Elements />][docs-component-elements] component to group our Elements together. We'll also create a `<MyPaymentForm />` 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 (
-    <RecurlyProvider publicKey="MY_PUBLIC_KEY">
-      <Elements>
-        <MyPaymentForm />
-      </Elements>
-    </RecurlyProvider>
-  );
-}
-```
-
-Within our new `<MyPaymentForm />` component, we'll add a [&lt;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 (
-    <form>
-      <input type="text" data-recurly="first_name" placeholder="First name" />
-      <input type="text" data-recurly="last_name" placeholder="Last name" />
-      <CardElement />
-    </form>
-  );
-}
-```
-
-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 `<form>`, 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 (
-    <form onSubmit={handleSubmit} ref={formRef}>
-      <input type="text" data-recurly="first_name" placeholder="First name" />
-      <input type="text" data-recurly="last_name" placeholder="Last name" />
-      <CardElement />
-    </form>
-  );
-}
-```
-
-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 <div>{price.now.subtotal}</div>
-  };
-};
-
-export default function MyApp () {
-  <RecurlyProvider>
-    <PricingPreview />
-  </RecurlyProvider>
-};
-```
-
-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.mdx b/README.mdx
new file mode 120000
index 0000000..42061c0
--- /dev/null
+++ b/README.mdx
@@ -0,0 +1 @@
+README.md
\ No newline at end of file
diff --git a/types/index.d.ts b/types/index.d.ts
index 063faf2..e46a1a3 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -137,7 +137,7 @@ export const RecurlyProvider: React.FC<React.PropsWithChildren<RecurlyOptions>>;
  *
  * The functionality of <Elements /> is largely behind the scenes. It takes one
  * onSubmit prop, and is used solely to designate which *Element components
- * belong together in your component heirarchy.
+ * belong together in your component hierarchy.
  */
 export const Elements: React.FC<React.PropsWithChildren<ElementsProps>>;
 

From edac20d9fdb8f92afc53f4ed8c087b8c3658bafc Mon Sep 17 00:00:00 2001
From: Christopher Rogers <chrissrogers@gmail.com>
Date: Wed, 23 Aug 2023 14:04:28 -0700
Subject: [PATCH 2/8] Removes README handling from publish hooks

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 2e1b5f8..a04496b 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,6 @@
     "storybook": "^7.0.24"
   },
   "scripts": {
-    "prepublishOnly": "babel lib -d lib-dist && cp README.mdx README.md",
-    "postpublish": "rm README.md"
+    "prepublishOnly": "babel lib -d lib-dist"
   }
 }

From fcb835250bb411a0534da4b05eb6f48701ae5b8d Mon Sep 17 00:00:00 2001
From: Christopher Rogers <chrissrogers@gmail.com>
Date: Fri, 29 Sep 2023 09:47:18 -0400
Subject: [PATCH 3/8] Adds hostname configuration

---
 lib/provider.jsx       | 9 +++++++--
 package-lock.json      | 4 ++--
 test/provider.test.jsx | 8 ++++++++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/lib/provider.jsx b/lib/provider.jsx
index 8e96247..198dd2e 100644
--- a/lib/provider.jsx
+++ b/lib/provider.jsx
@@ -20,6 +20,11 @@ export default class RecurlyProvider extends React.Component {
      * [API Access](https://app.recurly.com/go/developer/api_access).
      */
     publicKey: PropTypes.string,
+
+    /**
+     * Register the current hostname
+     */
+    hostname: PropTypes.string,
     /**
      * Sets a default currency
      */
@@ -56,7 +61,7 @@ export default class RecurlyProvider extends React.Component {
   constructor (props) {
     super(props);
 
-    if (!this.props.publicKey) {
+    if (!(this.props.publicKey || this.props.hostname)) {
       throw new Error(`
         Please pass your 'publicKey' value to this RecurlyProvider.
         Example: <RecurlyProvider publicKey="MY_PUBLIC_KEY">
@@ -82,7 +87,7 @@ export default class RecurlyProvider extends React.Component {
     }
   }
 
-  render() {
+  render () {
     return (
       <Provider value={{ recurly: this._recurly }}>{this.props.children}</Provider>
     );
diff --git a/package-lock.json b/package-lock.json
index 0cd1c4f..40e17cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17622,8 +17622,8 @@
       }
     },
     "node_modules/recurly.js": {
-      "version": "4.24.0",
-      "resolved": "git+ssh://git@github.com/recurly/recurly-js.git#ab1a2d922d86586174b04218a7c5a88bc8b5a1c6",
+      "version": "4.25.10",
+      "resolved": "git+ssh://git@github.com/recurly/recurly-js.git#4f3aa85a477aeae2561f90282f42125efa665a60",
       "dev": true,
       "license": "MIT",
       "workspaces": [
diff --git a/test/provider.test.jsx b/test/provider.test.jsx
index 3c0b77a..a82fbdf 100644
--- a/test/provider.test.jsx
+++ b/test/provider.test.jsx
@@ -122,4 +122,12 @@ describe('<RecurlyProvider />', function () {
       }
     });
   });
+
+  describe('with a hostname', function () {
+    it('does not throw an error', function () {
+      expect(() => {
+        render(<RecurlyProvider hostname="test-hostname" api={api} />);
+      }).not.toThrow();
+    });
+  });
 });

From 559c64fe07aa8a07a3995e6f896883b443dd09b6 Mon Sep 17 00:00:00 2001
From: Douglas Miller <doug@douglas-miller.com>
Date: Wed, 4 Oct 2023 11:39:38 -0500
Subject: [PATCH 4/8] Always include items labeled 'new feature' in changelog

---
 .changelog_config.yaml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.changelog_config.yaml b/.changelog_config.yaml
index 037b56e..bccd60b 100644
--- a/.changelog_config.yaml
+++ b/.changelog_config.yaml
@@ -1,6 +1,8 @@
 ---
 owner: recurly
 repo: react-recurly
+always_include_labels:
+  - new feature
 exclude_labels:
   - bug?
   - internal

From 4bcfbb3db7892caf6267aaf6ebe6ce58b88bcd5d Mon Sep 17 00:00:00 2001
From: Chris Deely <chris@webdeely.com>
Date: Wed, 4 Oct 2023 18:46:37 -0400
Subject: [PATCH 5/8] adjust demo package to fix CodeSandbox setup

---
 demo/package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/demo/package.json b/demo/package.json
index 88b8f61..236d189 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -3,8 +3,9 @@
   "version": "0.1.0",
   "description": "Examples to get you started with react-recurly",
   "private": true,
+  "main": "src/index.jsx",
   "dependencies": {
-    "@recurly/react-recurly": "github:recurly/react-recurly",
+    "@recurly/react-recurly": "latest",
     "dotenv": "^16.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

From 56ad614c8121f52474f6d1a7bf8a1bfbcb23e909 Mon Sep 17 00:00:00 2001
From: Douglas Miller <doug@douglas-miller.com>
Date: Wed, 4 Oct 2023 17:53:01 -0500
Subject: [PATCH 6/8] 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 @@
-<img src="https://i.imgur.com/gGxJ8zx.png" align="right" />
-
-# react-recurly &middot; [![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
-<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">
-```
-
-## 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 [&lt;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 (
-    <RecurlyProvider publicKey="MY_PUBLIC_KEY" />
-  );
-}
-```
-
-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 [&lt;Elements />][docs-component-elements] component to group our Elements together. We'll also create a `<MyPaymentForm />` 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 (
-    <RecurlyProvider publicKey="MY_PUBLIC_KEY">
-      <Elements>
-        <MyPaymentForm />
-      </Elements>
-    </RecurlyProvider>
-  );
-}
-```
-
-Within our new `<MyPaymentForm />` component, we'll add a [&lt;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 (
-    <form>
-      <input type="text" data-recurly="first_name" placeholder="First name" />
-      <input type="text" data-recurly="last_name" placeholder="Last name" />
-      <CardElement />
-    </form>
-  );
-}
-```
-
-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 `<form>`, 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 (
-    <form onSubmit={handleSubmit} ref={formRef}>
-      <input type="text" data-recurly="first_name" placeholder="First name" />
-      <input type="text" data-recurly="last_name" placeholder="Last name" />
-      <CardElement />
-    </form>
-  );
-}
-```
-
-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 <div>{price.now.subtotal}</div>
-  };
-};
-
-export default function MyApp () {
-  <RecurlyProvider>
-    <PricingPreview />
-  </RecurlyProvider>
-};
-```
-
-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 @@
+<img src="https://i.imgur.com/gGxJ8zx.png" align="right" />
+
+# react-recurly &middot; [![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
+<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">
+```
+
+## 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 [&lt;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 (
+    <RecurlyProvider publicKey="MY_PUBLIC_KEY" />
+  );
+}
+```
+
+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 [&lt;Elements />][docs-component-elements] component to group our Elements together. We'll also create a `<MyPaymentForm />` 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 (
+    <RecurlyProvider publicKey="MY_PUBLIC_KEY">
+      <Elements>
+        <MyPaymentForm />
+      </Elements>
+    </RecurlyProvider>
+  );
+}
+```
+
+Within our new `<MyPaymentForm />` component, we'll add a [&lt;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 (
+    <form>
+      <input type="text" data-recurly="first_name" placeholder="First name" />
+      <input type="text" data-recurly="last_name" placeholder="Last name" />
+      <CardElement />
+    </form>
+  );
+}
+```
+
+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 `<form>`, 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 (
+    <form onSubmit={handleSubmit} ref={formRef}>
+      <input type="text" data-recurly="first_name" placeholder="First name" />
+      <input type="text" data-recurly="last_name" placeholder="Last name" />
+      <CardElement />
+    </form>
+  );
+}
+```
+
+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 <div>{price.now.subtotal}</div>
+  };
+};
+
+export default function MyApp () {
+  <RecurlyProvider>
+    <PricingPreview />
+  </RecurlyProvider>
+};
+```
+
+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

From f9c769c7ec3e6780cc7dc7fc4b1aeb2c64838e9f Mon Sep 17 00:00:00 2001
From: Douglas Miller <doug@douglas-miller.com>
Date: Thu, 5 Oct 2023 10:09:17 -0500
Subject: [PATCH 7/8] Fixes issues with docs deployment

---
 .github/workflows/docs.yml | 16 +++++++---------
 README.mdx                 | 12 ++++++------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index fa40d72..81a16ac 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -1,5 +1,4 @@
 on:
-  workflow_call:
   repository_dispatch:
     types:
       - docs_publish
@@ -12,17 +11,16 @@ jobs:
     name: Publish
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
 
-    - name: Use Node.js
-      uses: actions/setup-node@v3
+    - uses: actions/setup-node@v3
 
-    - name: Build documentation
-      run: make docs-build
+    - run: make docs-build
+    
+    - run: touch ./build/docs/.nojekyll
 
-    - name: Deploy
-      if: success()
-      uses: crazy-max/ghaction-github-pages@v1
+    - if: success()
+      uses: crazy-max/ghaction-github-pages@v4
       with:
         target_branch: gh-pages
         build_dir: ./build/docs
diff --git a/README.mdx b/README.mdx
index 47e6b6a..cd2c05e 100644
--- a/README.mdx
+++ b/README.mdx
@@ -181,11 +181,11 @@ MIT
 [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-component-recurly-provider]: https://recurly.github.io/react-recurly/?path=/docs/components-recurlyprovider--docs
+[docs-component-elements]: https://recurly.github.io/react-recurly/?path=/docs/components-elements--docs
+[docs-component-card-element]: https://recurly.github.io/react-recurly/?path=/docs/components-card-element--default
+[docs-hook-use-recurly]: https://recurly.github.io/react-recurly/?path=/docs/hooks-userecurly--docs
+[docs-hook-use-checkout-pricing]: https://recurly.github.io/react-recurly/?path=/docs/hooks-usecheckoutpricing--docs
 
 [docs-recurly-js]: https://developers.recurly.com/reference/recurly-js/
 [docs-recurly-js-elements]: https://developers.recurly.com/reference/recurly-js/#elements
@@ -193,7 +193,7 @@ MIT
 [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]: https://recurly.github.io/react-recurly/?path=/docs/introduction-interactive-demo--docs
 [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
 

From c2f708a54d8915f1d528f2a387c940e36306e91b Mon Sep 17 00:00:00 2001
From: Lib Cat <noreply@recurly.com>
Date: Thu, 12 Oct 2023 21:35:35 +0000
Subject: [PATCH 8/8] 2.0.1

[Full Changelog](https://github.com/recurly/react-recurly/compare/v2.0.0...v2.0.1)

**Merged Pull Requests**

- adjust demo package to fix CodeSandbox setup [#220](https://github.com/recurly/react-recurly/pull/220) ([chrisdeely](https://github.com/chrisdeely))
- Adds hostname configuration [#217](https://github.com/recurly/react-recurly/pull/217) ([chrissrogers](https://github.com/chrissrogers))
---
 CHANGELOG.md      | 13 ++++++++++++-
 package-lock.json |  4 ++--
 package.json      |  2 +-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 77d172a..8d1413f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Changelog
 
+## [v2.0.1](https://github.com/recurly/react-recurly/tree/v2.0.1) (2023-10-12)
+
+[Full Changelog](https://github.com/recurly/react-recurly/compare/v2.0.0...v2.0.1)
+
+
+**Merged Pull Requests**
+
+- adjust demo package to fix CodeSandbox setup [#220](https://github.com/recurly/react-recurly/pull/220) ([chrisdeely](https://github.com/chrisdeely))
+- Adds hostname configuration [#217](https://github.com/recurly/react-recurly/pull/217) ([chrissrogers](https://github.com/chrissrogers))
+
+
+
 ## [v2.0.0](https://github.com/recurly/react-recurly/tree/v2.0.0) (2023-08-23)
 
 [Full Changelog](https://github.com/recurly/react-recurly/compare/v1.2.7...v2.0.0)
@@ -7,7 +19,6 @@
 
 **Merged Pull Requests**
 
-- Changes demo dependency target [#214](https://github.com/recurly/react-recurly/pull/214) ([chrissrogers](https://github.com/chrissrogers))
 - Fix RecurlyProvider & Elements types [#205](https://github.com/recurly/react-recurly/pull/205) ([artyom-88](https://github.com/artyom-88))
 - Add dev dependency babel/plugin-transform-runtime [#200](https://github.com/recurly/react-recurly/pull/200) ([cyberxander90](https://github.com/cyberxander90))
 
diff --git a/package-lock.json b/package-lock.json
index 40e17cf..b445074 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@recurly/react-recurly",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@recurly/react-recurly",
-      "version": "2.0.0",
+      "version": "2.0.1",
       "license": "MIT",
       "dependencies": {
         "@types/recurly__recurly-js": "latest",
diff --git a/package.json b/package.json
index a04496b..0ab976d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@recurly/react-recurly",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "React components for Recurly.js",
   "main": "lib-dist/index.js",
   "types": "types/index.d.ts",