Fixes #5.

Explanation

The problem: The dynamic nature of React means components will be loaded & unloaded from the DOM as a user navigates a single-page application.

The docs for Accept.js state:

If you are building your page dynamically, be sure that your page loads the Accept JavaScript library after the button is defined. For the library to correctly interface with the button, the button must already exist in the DOM when the library is loaded.

This requirement is most likely due to needing to attach an event listener to the button to launch the hosted form. When a user navigates to another part of the SPA that unloaded <HostedForm />, that event listener breaks.

The (admittedly hacky) solution is to remove AcceptUI.js from the DOM when <HostedForm /> is unloaded. Navigating back to the page with the <HostedForm /> will add the script back to the DOM, allowing usage of <HostedForm /> without a hard refresh.

Changes

A new hook, useDynamicScript(), was added. It's similar to useScript() but will remove the <script> tag containing AcceptUI.js when the component containing the hook is unloaded.

Caveats

The initial plan was to fetch() the script so we could inject the script text into a <script> tag ourselves to prevent additional network requests. However, the lack of any CORS policy defined on https://js.authorize.net prevents this.

The script itself is only 5.8KB so it shouldn't be too painful to reload the script for each usage.