React

In this article, we’re going to explain how to set up PriceWell’s Pricing Page snippet inside your React app.

First of all, you’ll need to get hold of your Pricing Page ID, this is visible on the snippet section (just remove the prefix “pricewell-” from the front)

Pricing Page React Component

Next, copy the following React component into your codebase:

PriceWellPricingPage.js

import { useEffect } from "react";

// Replace this with your pricing page id
const pricingPageId = "314d633d-168a-4c91-9558-5144af807eee";

export default function PriceWellPricingPage() {
  useEffect(() => {
    if (window.pricewell) {
      return;
    }
    const script = document.createElement("script");
    script.async = true;
    script.src = `https://snippet.pricewell.io/${pricingPageId}/pricewell.js`;
    document.head.appendChild(script);
  }, []);
  return <div id={`pricewell-${pricingPageId}`}></div>;
}

View source code

Now include the component as you would any other React component.

Example:

App.js

import PriceWellPricingPage from "./PriceWellPricingPage";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>PriceWell React Demo</h1>
      <h2>
        Add Stripe subscriptions to your website in minutes at{" "}
        <a href="https://www.pricewell.com?utm_src=react">pricewell.io</a>
      </h2>
      <PriceWellPricingPage />
    </div>
  );
}

When loaded, the component will wait until the DOM is loaded (using useEffect) and then load the PriceWell javascript (unless it’s already loaded).

View full source code on CodeSandbox