To embed Potio's pricing table on your website, paste this code snippet into the <body> tag of your website page, exactly where you want the pricing table to appear.
<script async src="https://webcomponent.potio.cc/index.js"></script>
<potio-pricing-table action="signup" key="pricing-table-id"></potio-pricing-table>To add the pricing table to your public website's pricing page, paste the following code snippet into the
tag where you want the table to appear. To direct visitors to sign up, add the action="signup" property. Visitors will see prices but be guided to signup from this pricing table.<script async src="https://webcomponent.potio.cc/index.js"></script>
<potio-pricing-table action="signup" key="pricing-table-id"></potio-pricing-table>If you want your visitors to be directed to a Stripe checkout page to start a subscription or make a payment, use the action="payment" property. Logged-in users will be able to pay from this pricing table.
<script async src="https://webcomponent.potio.cc/index.js"></script>
<potio-pricing-table action="payment" key="pricing-table-id"></potio-pricing-table>The web component supports setting the client-reference-id property. This property passes to the Checkout Session's client_reference_id attribute, helping you reconcile the Checkout Session with your internal system:
<script async src="https://webcomponent.potio.cc/index.js"></script>
<potio-pricing-table client-reference-id="your-internal-id" action="payment" key="pricing-table-id"></potio-pricing-table>The web component supports setting the customer-email property. This property passes to the Checkout Session's customer_email attribute, automatically entering the email address on the payment page:
<script async src="https://webcomponent.potio.cc/index.js"></script>
<potio-pricing-table customer-email="bob@builder.com" action="payment" key="pricing-table-id"></potio-pricing-table>You can provide an existing Customer ID to the pricing table. This will pass the customer on to Stripe's Checkout Sessions and display the current selected pricing plan, allowing users to change plans:
<script async src="https://webcomponent.potio.cc/index.js"></script>
<potio-pricing-table customer="cus_xxxx" action="payment" key="pricing-table-id"></potio-pricing-table>
You can provide custom metadata to the pricing table. This metadata will be added to the created Stripe subscription's metadata property.
<script async src="https://webcomponent.potio.cc/index.js"></script>
<potio-pricing-table metadata-internal-id=123 metadata-color="blue" action="payment" key="pricing-table-id"></potio-pricing-table>
key is a special string attribute. To bypass it in Potio, you can use data-key.<potio-pricing-table data-key="pricing-table-id" action="payment"></potio-pricing-table><script> tag directly into JSX. Instead, you can add it to the <head> section of your React site. If you need the script to be visible only in a specific part of your app, consider creating a custom Potio loader.