Skip to main content

Pricing Table

Web Component​

HTML​

<!doctype html>
<head>
    <title>Salable Web Component Example</title>
    <script type="module">
        import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@salable/web-components/loader/index.es2017.js';
        defineCustomElements();
    </script>
</head>
<body>
<salable-pricing-table
    api-key="xxxxx"
    uuid="xxxxx"
    global-success-url="https://cataas.com/cat/cute"
    global-cancel-url="https://cataas.com/cat/angry"
    global-grantee-id="123"
    member="456"
></salable-pricing-table>
</body>
</html>

Svelte​

+page.svelte

<script>
    import {defineCustomElements} from "@salable/web-components/loader";
    defineCustomElements();
</script>

<salable-pricing-table
    api-key="xxxxx"
    uuid="xxxxx"
    global-success-url="https://cataas.com/cat/cute"
    global-cancel-url="https://cataas.com/cat/angry"
    global-grantee-id="123"
    member="456"
></salable-pricing-table>

+page.js

export const ssr = false;

React Web Component​

React​

import { defineCustomElements, SalablePricingTable } from '@salable/react-web-components';

defineCustomElements();

export default function SalablePricingTableDemo() {
    return (
        <SalablePricingTable
            apiKey="xxxxx"
            uuid="xxxxx"
            globalSuccessUrl="https://google.co.uk"
            globalCancelUrl="https://google.co.uk"
            globalGranteeId="123"
            member="456"
        />
    )
}

Properties​

PropertyAttributeDescriptionTypeDefault
apiKey (required)api-keyThe publishable api key, this can be generated in the Salable dashboardstringundefined
uuid (required)uuidThe uuid of the pricing table that you want to display.stringundefined
member (required)memberThe ID of the member who will manage the license.stringundefined
globalCancelUrl (required)global-cancel-urlThe URL to send users to if the transaction fails. Must be an absolute URL.stringundefined
globalGranteeId (required)global-grantee-idThe unique identifier for the grantee for all plan checkouts links.stringundefined
globalSuccessUrl (required)global-success-urlThe URL to send users to after a successful purchase. Must be an absolute URL.stringundefined
perPlanCancelUrlsper-plan-cancel-urlsConfigure cancelUrls per plan, string format {'plan-uuid-one':'https://example.com/cancel-one','plan-uuid-two':'https://example.com/cancel-two'}string \| { [x: string]: string; }undefined
perPlanGranteeIdsper-plan-grantee-idsConfigure granteeIds per plan, string format {'plan-uuid-one': 'granteeIdOne', 'plan-uuid-two': 'granteeIdTwo'}string \| { [x: string]: string; }undefined
perPlanSuccessUrlsper-plan-success-urlsConfigure successUrls per plan, string format {'plan-uuid-one': 'https://example.com/success-one' , 'plan-uuid-two': 'https://example.com/success-two'}string \| { [x: string]: string; }undefined
isCustomPricingTableis-custom-pricing-tableIf you provided the uuid of a custom pricing table set this to truebooleanfalse
customerEmailcustomer-emailPre-fills the customer email in Stripe checkout.stringundefined
customerIdcustomer-idThe ID of an existing customer in your payment integration. This pre-fills the email, card details, and postcode at checkout.stringundefined
currencycurrencyUses the currency short name (e.g., USD). Defaults to the default currency on the Product which the Plan is linked to. Currently only supported on payment integration type 'stripe_existing'.stringundefined
promoCodepromo-codeUsed to pre-fill the promo code in Stripe checkout. Use the promo code ID from Stripe dashboard. Customers cannot edit this field during checkout.stringundefined
allowPromoCodeallow-promo-codeEnables the promo code field in Stripe checkout. Accepts 'true' or 'false'. Cannot be used with promoCode.stringundefined
automaticTaxautomatic-taxAutomatically calculate tax on checkout based on the customer's location and your Stripe settings.stringundefined