Zum Hauptinhalt springen

Hosted Checkout Flow

The hosted checkout page is a simple, easy-to-use page that allows you to collect payment information from your customers.

Hosted checkout page

Usage​

To quick start with the hosted checkout flow, you can use our pricing table element.

Create Pricing Table​

To use the pricing table with the hosted checkout flow, you need to set useHostedCheckout to true. Additionally, you need to create a debtor in your application, and pass the debtor ID to the pricing table.

info

To create a debtor, you can use the Debtor API.

When the user selects a plan, and clicks on the Subscribe button, the user will be redirected to the hosted checkout page.

pricing.html
<html>
<body style="height: 100%;">
<main style="background-color: ghostwhite; height: 100%;">
    <div style="margin: auto auto;">
        <div id="pricing-table">
            <!-- The pricing table will be inserted here -->
        </div>
    </div>
</main>
</body>

<script src="https://js.fynn.eu/v1/fynn.js" type="text/javascript"></script>

<script type="text/javascript">
    const debtor_id = 'xxxxxxx'; // Replace with your debtor ID
    
    const Fynn = FynnJS()

    Fynn.setup('pk_live_xxxxxx');

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

    const element = pricingTableElements.create('plan_group_xxxxx', {
        useHostedCheckout: true,
        debtorId: debtor_id // mandatory if you want to use the hosted checkout flow
        returnUrl: 'https://example.com/return' // the page to redirect the user to your page after the checkout
    })

    element.mount('#pricing-table')
</script>
</html>

Return URL​

When the user completes the checkout, they will be redirected to the returnUrl you provided.

Following parameters will be added to the returnUrl:

  • plan_id: The ID of the plan the user subscribed to
  • subscription_id: The ID of the subscription
  • debtor_id: The ID of the debtor
  • cart_id: The ID of the cart
  • status: The status of the order. Can be active, canceled or failed

Webhooks​

When the user completes the checkout, we will send a webhook to the webhook URL you provided.

For more information about webhooks, please refer to the Webhooks documentation.