Documentation

Embedding Potio's Pricing Table

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>

Pricing Table for Signup

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>

Pricing Table for Payment

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>

Setting Client Reference ID

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>

Setting Customer Email

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>

Providing an Existing Customer ID

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>