How to Embed Pricing Table?

So, you've created your pricing table on Pricefy. Congrats!

It is time to add it to your website to boost conversions. Pricefy offers two pricing tables for public pages, which are meant for a public website where a site visitor can view the prices beforehand. It leads to account creation before the purchase. The other one is intended for the checkout for already logged-in users. This one leads directly to Stripe.

Pricing Table Embed for Public Page

For many products, it makes sense to show pricing on a public page so site visitors can learn the value of your product before registering. Also, this can help you measure how many site visitors pre-accept your product price before purchasing it.

If you embed a pricing table in your product's public page, add a "Sign-up/login page link" that redirects customers to create an account before purchasing.

Here's how to do that on Pricefy:

1. Edit pricing table.

   
   

   

   
   

2. Go to "Payment settings" tab.

3. Put your Sign-up/login page link in the field.

   
   

   

   
   

Pricing table: Embed for Checkout

Site visitors have created an account and are willing to make a purchase? Then show pricing table with a clear call to action using "pricing table embed for checkout". The customer will be redirected to Stripe checkout to fill in card details to make payment.

On Pricefy, add "Confirmation page link" to redirect the client back to your product after successful payment on Stripe:

1. Click the following button to edit your table.

   
   

   

   
   

2. Go to "Payment settings" tab.

3. Put your confirmation page link in the field.

   
   

   

   
   

Payment will be made directly to your Stripe account without additional transaction fees from Pricefy! 

How to Embed the Pricing Table?

After creating a pricing table, Pricefy automatically creates an embed code composed of a <script> tag and a <pricefy-pricing-table> web component.

Click the Copy code button to copy the code and paste it into your website.

If you're using HTML, paste the embed code into the HTML. If using React, include the script tag in your index.html page to mount the <stripe-pricing-table> component.

Embed the Pricing Table on Bubble

Embed the pricing table in an HTML element in your Bubble app. Insert your user's ID as the parameter client-reference-id if you are allowing payments only to logged-in users so you can match your stripe customer with your Bubble user.

Checkout Session with your Internal System

When a payment is completed, Stripe sends a webhook about the completed checkout session that you can use for fulfillment and reconciliation. The <pricefy-pricing-table> web component supports setting the client-reference-id property. When the property is set, the pricing table passes it to the Stripe Checkout Session's client_reference_id attribute to help you reconcile the Checkout Session with your internal system. This can be an authenticated user ID or a similar string. 

Pass Customer Email to Checkout

The <pricefy-pricing-table> web component supports setting the customer-email property. When the property is set, the pricing table passes it to the Stripe Checkout Session's customer_email attribute, automatically entering the email address on the payment page.

As you see, Pricefy helps you put a pricing table on your website in a few clicks, without any hustle. It's important to note that all the payments are processed by Stripe, and no sensitive information is saved or used by Pricefy!