Zum Hauptinhalt springen

Pricing Table

The pricing table is a simple table that displays plans and their features.

You can easily embed the pricing table into your website without the need to write any code.

Pricing table

Requirements

  • Create a plan group, which contains the plans you want to display in the pricing table.
  • Create the plans, which contains the features you want to display in the pricing table.
  • Grab the plan group ID by double-clicking on the plan group name in the Fynn Wallet.
  • Obtain your public API key from the Fynn dashboard.

Usage

You need to copy the following code into your website and replace the plan_group_xxxxxx with your plan group ID, and the pk_live_xxxxxxxxx with your public key.

<html>
<head>
<script type="text/javascript">
const Fynn = FynnJS()

Fynn.setup('pk_live_xxxxxxxxx');

const pricingTableElements = Fynn.elements.pricingTables({
brandColor: 'c7f639' // define the brand color of your website, if nothing provided we will use black
})

const pricingTable = pricingTableElements.create('plan_group_xxxxxx')
.mount('#pricing-table') // define the ID of the element where you want to display the pricing table
</script>
</head>
<body>
<main>
<div id="pricing-table">
<!-- Pricing table will be displayed here -->
</div>
</main>
</body>
</html>

Styling

The pricing table is customizable. You can change the brand color of the elements.

Brand color

You can define the brand color of your website by adding the brandColor option to the pricingTables function.

const pricingTableElements = Fynn.elements.pricingTables({
brandColor: 'c7f639'
})

Events

You can listen to the following events:

onPlanSelected

This event is triggered when a plan is selected, and the user clicks on the Subscribe button.

This is useful if you want to redirect the user to your custom checkout page, instead of using our hosted checkout page.

const pricingTable = pricingTableElements.create('plan_group_xxxxxx');

pricingTable.onPlanSelected(({planId}) => {
// plan contains the selected plan
// redirect the user to your custom checkout page
})

If you want to prevent the user from being redirected to the hosted checkout page, you need to set useHostedCheckout to false.


const pricingTable = pricingTableElements.create('plan_group_xxxxxx', {
useHostedCheckout: false
});

Custom checkout page

To use your own checkout pages refer to the custom checkout page documentation.