Skip to main content

Checkout

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-checkout
    api-key="xxxxx"
    plan-uuid="xxxxx"
    member="xxxxx"
    grantee-id="xxxxx"
    success-url="https://example.com/success"
></salable-checkout>
</body>
</html>

Svelte​

+page.svelte

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

<salable-checkout
    api-key="xxxxx"
    plan-uuid="xxxxx"
    member="xxxxx"
    grantee-id="xxxxx"
    success-url="https://example.com/success"
></salable-checkout>

+page.js

export const ssr = false;

React Component​

React​

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

defineCustomElements();

export default function SalableCheckoutDemo() {
    return (
        <SalableCheckout
            apiKey="xxxxx"
            planUuid="xxxxx"
            member="xxxxx"
            granteeId="xxxxx"
            successUrl="https://example.com/success"
        />
    )
}

Properties​

PropertyAttributeDescriptionTypeDefault
apiKey (required)api-keyA unique identifier to authenticate HTTP calls to Salable APIstringundefined
planUuid (required)plan-uuidA unique identifier for a specific planstringundefined
member (required)memberA unique identifier for a member or userstringundefined
granteeId (required)grantee-idA unique identifier used in licensing that represents the entity to which a license is grantedstringundefined
successUrl (required)success-urlThe URL the user is sent to if they successfully completed a paymentstringundefined
emailemailA user's email address to be used for the checkout. Providing the user's email skips the provide email step during checkoutstringundefined