Checkout

Creating a Session Token

You can create a session token for this web component by using the request template below with the Salable API.

JavaScript
cURL

const response = await fetch('https://api.salable.app/sessions', {
    method: "POST",
    headers: {
        "x-api-key": "YOUR_SALABLE_API_TOKEN",
        version: "v2",
    },
    body: JSON.stringify({
        scope: 'web-components:checkout',
        metadata: {
            planUuid: 'YOUR_PLAN_UUID'
        }
    })
})

const { sessionToken } = await response.json()

curl 
    -XPOST 
    -H 'x-api-key: YOUR_SALABLE_API_TOKEN' 
    -H 'version: v2' 
    -d '{ "scope": "web-components:checkout", "metadata": {"planUuid": "YOUR_PLAN_UUID"} }' 
    'https://api.salable.app/sessions'

See the entire API docs for creating sessions for web components.

Examples

HTML/JavaScript
Svelte
React
Next.js Pages Router
Next.js App Router

<!doctype html>
<head>
    <title>Salable Checkout Web Component Example</title>
    <script type="module">
        import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@salable/web-components@latest/loader/index.es2017.js';
        defineCustomElements();
    </script>
</head>
<body>
    <salable-checkout
        session-token="YOUR_SESSION_TOKEN"
        plan-uuid="YOUR_PLAN_UUID"
        owner="EXAMPLE_OWNER"
        grantee-id="EXAMPLE_GRANTEE_ID"
        success-url="https://example.com/success"
        currency="GBP"
    ></salable-checkout>
</body>
</html>

+page.svelte

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

<salable-checkout
    session-token="YOUR_SESSION_TOKEN"
    plan-uuid="YOUR_PLAN_UUID"
    owner="EXAMPLE_OWNER"
    grantee-id="EXAMPLE_GRANTEE_ID"
    success-url="https://example.com/success"
    currency="GBP"
></salable-checkout>

+page.js

export const ssr = false;

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

defineCustomElements();

export default function SalableCheckoutDemo() {
    return (
        <SalableCheckout
            sessionToken="YOUR_SESSION_TOKEN"
            planUuid="YOUR_PLAN_UUID"
            owner="EXAMPLE_OWNER"
            granteeId="EXAMPLE_GRANTEE_ID"
            successUrl="https://example.com/success"
            currency="GBP"
        />
    )
}

import dynamic from "next/dynamic";
import { useEffect } from 'react'

const SalableCheckout = dynamic(
  () =>
    import("@salable/react-web-components").then(
      (module) => module.SalableCheckout,
    ),
  { ssr: false },
);

export default function SalableCheckoutDemo() {
    useEffect(() => {
      import("@salable/react-web-components").then((module) => {
        const { defineCustomElements } = module;
        defineCustomElements();
      });
    }, []);

    return (
        <SalableCheckout
            sessionToken="YOUR_SESSION_TOKEN"
            planUuid="YOUR_PLAN_UUID"
            owner="EXAMPLE_OWNER"
            granteeId="EXAMPLE_GRANTEE_ID"
            successUrl="https://example.com/success"
            currency="GBP"
        />
    )
}

'use client';

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

defineCustomElements();

export default function SalableCheckoutDemo() {
    return (
        <SalableCheckout
            sessionToken="YOUR_SESSION_TOKEN"
            planUuid="YOUR_PLAN_UUID"
            owner="EXAMPLE_OWNER"
            granteeId="EXAMPLE_GRANTEE_ID"
            successUrl="https://example.com/success"
            currency="GBP"
        />
    )
}

Properties

Property	Attribute	Description	Type	Default
`currency` (required)	`currency`	The short name of the currency used in the checkout e.g. USD	`string`	`undefined`
`granteeId` (required)	`grantee-id`	A unique identifier used in licensing that represents the entity to which a license is granted	`string`	`undefined`
`owner`	`owner`	The ID of the entity who will own the subscription	`string`	The value of `member`
`member`	`member`	A unique identifier for a member or user. Deprecated, please use owner.	`string`	`undefined`
`planUuid` (required)	`plan-uuid`	A unique identifier for a specific plan	`string`	`undefined`
`sessionToken` (required)	`session-token`	The generated token for this session from the Salable API	`string`	`undefined`
`successUrl` (required)	`success-url`	The URL the user is sent to if they successfully completed a payment	`string`	`undefined`
`email`	`email`	A user's email address to be used for the checkout. Providing the user's email skips the provide email step during checkout	`string`	`undefined`

Creating a Session Token​

Examples​

Properties​

Creating a Session Token

Examples

Properties