Skip to content
Featsync Docs

Your First Flag

Let’s walk through a complete example of adding a feature flag to control a new checkout flow in your app.

The Scenario

You’ve built a new checkout experience and want to:

  1. Deploy the code to production (safely hidden behind a flag)
  2. Test it with your team first
  3. Gradually roll it out to users
  4. Have an instant kill switch if something goes wrong

Create the Flag

  1. Log in to the dashboard

    Go to featsync.dev and log in to your account.

  2. Click Flags in the sidebar.

  3. Create a new flag

    Click the Create Flag button and enter:

    • Name: New Checkout Flow
    • Key: new-checkout-flow (auto-generated from name)
    • Type: Boolean (default)

  4. Keep it disabled initially

    The flag is created in the OFF state. This is intentional - you want to deploy your code first.

Add the Flag to Your Code

Now wrap your new checkout code with a flag check:

checkout.js
import { Featsync } from '@featsync/sdk';


const featsync = new Featsync({
  apiKey: process.env.FEATSYNC_API_KEY,
});


async function renderCheckout() {
  if (await featsync.isEnabled('new-checkout-flow')) {
    return <NewCheckout />;
  }
  return <OldCheckout />;
}

Deploy Your Code

Since the flag is OFF, deploying this code is completely safe. The old checkout will continue showing for all users.

Terminal window
git add .
git commit -m "Add new checkout behind feature flag"
git push origin main
# Deploy to production

Enable for Testing

Now enable the flag to see your new checkout in action:

  1. Go to the Flags page in the dashboard
  2. Click on new-checkout-flow to open the flag detail page
  3. Toggle the environment you want to enable (e.g., Development)
  4. Click Save Changes
  5. Visit your app - you should see the new checkout!

Roll Out Gradually (Pro)

Once you’re confident in the new checkout, you can roll it out gradually:

  1. Upgrade to Pro if you haven’t already
  2. Edit the flag and set the Percentage to 10%
  3. 10% of your users will now see the new checkout
  4. Monitor your metrics
  5. Increase to 25%, then 50%, then 100%
checkout.js
// For percentage rollouts, use isEnabledForUser
const userId = getCurrentUserId();


if (await featsync.isEnabledForUser('new-checkout-flow', userId)) {
  return <NewCheckout />;
}
return <OldCheckout />;

Something Wrong? Kill Switch!

If you notice errors or user complaints:

  1. Go to the flag detail page in the dashboard
  2. Toggle Production OFF
  3. Click Save Changes
  4. All users instantly see the old checkout

No deploy needed. Crisis averted.

Clean Up

Once the new checkout is fully rolled out and stable:

  1. Remove the flag check from your code
  2. Delete the old checkout code
  3. Archive or delete the flag in the dashboard
checkout.js (cleaned up)
// Flag removed - new checkout is now the default
function renderCheckout() {
  return <NewCheckout />;
}

Next Steps