Pricing Table

This pricing table is configured in the Stripe dashboard and then included on the page as embedded HTML. Clicking the subscribe button above will launch a new hosted Checkout session where the customer can complete the purchase and begin a new subscription.

Client code

<script async src="https://js.stripe.com/v3/pricing-table.js"></script>
<stripe-pricing-table 
    pricing-table-id="prctbl_*****" 
    publishable-key="pk_test_*****">
</stripe-pricing-table>

or, if you're using react...

import React, { useEffect } from 'react';
interface IStripePricingTableProps {
    pricingTableId: string,
    publishableKey: string
}
const StripePricingTable = (props: IStripePricingTableProps) => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://js.stripe.com/v3/pricing-table.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return React.createElement('stripe-pricing-table', {
    'pricing-table-id': props.pricingTableId, // Replace with your actual ID
    'publishable-key': props.publishableKey, // Replace with your actual key
  });
};

export default StripePricingTable;