Documentation

Embedding

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>

Passing Custom Metadata to Subscriptions

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>

Embedding Potio on React

In React, 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>

React does not allow adding the <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.

Client-Side Events

The web component supports a number of client-side events. You can listen to the following events:

const table = document.querySelector('potio-pricing-table');
table.addEventListener('click_cta', e => console.log('customer clicked CTA button'));
table.addEventListener('click_update_product', e => console.log('customer is changing plans', e.detail));
table.addEventListener('click_checkout', e => console.log('customer is starting new payment', e.detail));
table.addEventListener('click_signup', e => console.log('customer clicked signup', e.detail));

Directing Customer Straight to Stripe Checkout After Signup

Customers that sign up from the pricing table (action="signup") can be directed to Stripe's Checkout page without having to go through the billing page:

Embed the pricing table web component on the signup success page. Set action to either "payment" or "hidden" (hidden property hides the pricing table from your visitors).
Invoke this JavaScript code:
```
potio.canSkipToCheckout.then(({canSkip, checkout}) => {if (canSkip) checkout()});
```
The checkout function also accepts returnUrl as an option like so checkout({returnUrl}), this allows you to define the return url (for instance the billing portal url).