DEV Community: Victor Ayomipo

How I Built an AI Employee to Run My SaaS Revenue (OpenClaw + Creem)

Victor Ayomipo — Tue, 31 Mar 2026 22:28:56 +0000

I have a confession.

I have this habit of checking my Creem dashboard constantly. It gives this opium feeling, seeing people actually paying for what I created. Between builds... I check it. Before bed... I check it.

So when OpenClaw was released, I had an idea. I am someone who uses AI a lot... So why not build one to handle a part of my business?

So, I built Alfred. An autonomous AI agent powered by OpenClaw that lives in my Discord, watches my Creem store around the clock, and tells me when something needs my attention.

Division of labor, babyyyy.

Anyways, let me tell you exactly how I built this AI Operations Manager using OpenClaw and Creem, from A to Z.

The Architecture: How Alfred’s Brain Works

Apart from managing my saas revenues, there are three main things I set Alfred to do:

Sends a daily revenue digest, i.e., every morning, a clean store health summary by 8 am
Detects churn. He autonomously creates a win-back discount code and drafts a re-engagement email
Catches failed payments and instantly generates a billing portal link and sends it to me to further investigate

Now, the architecture has four main components:

The Brain (OpenClaw + LLM): Powered by OpenRouter (using free advanced models to keep costs at zero, though for heavy tasks, it falls back to Claude or Gemini models).
The Tools (Creem Skill): A ClawHub-published skill that gives Alfred access to the official Creem CLI and REST API.
The Nervous System (Security Relay): An Express server that securely validates creem-signature HMACs, deduplicates webhook retries, and taps Alfred on the shoulder when events happen.
The Heartbeat (State Tracker): A background script to detect anomalies and send daily revenue digests.

Step 1: Install OpenClaw

OpenClaw is made to be installed locally on your machine. You don't need a massive server; for now, your laptop works perfectly.

If you don't have it yet:

curl -fsSL https://openclaw.ai/install.sh | bash

You need Node 22+. Once it runs, you'll hit an onboarding wizard.

Here's what I picked:

Setup mode: QuickStart
Model provider: OpenRouter (free-tier models... I'll explain why in a bit)
Channel: Discord

For Discord, you'll need to create a bot via the Discord Developer Portal, name it, and copy the bot token into the setup. The OpenClaw Discord docs have a clean walkthrough; follow that, it takes maybe 5 minutes.

Once complete:

openclaw gateway status

You should see the gateway listening on port 18789. That's the heartbeat alive.

Now, regarding my model of choice, I initially tried Gemini. Got rate-limited in three prompts. I tried Claude. Expensive. Eventually landed on OpenRouter with free high-agentic models. Although for high-level tasks, Claude or GPT is recommended.

Also, one warning nobody told me is how OpenClaw sends massive context to the LLM on every prompt. We're talking 100k–200k tokens per message because it includes conversation history, skill files, memory, tool schemas... everything. Keep that in mind.

Step 2: Clone the Repo & Install

Now, an agent is just a blank slate until you give it an identity.

To follow along much easier, here is the GitHub repo that contains all you need to have your own Alfred.

Let's do that.

git clone https://github.com/vayospot/creem-agent.git
cd creem-agent
npm install

Or you can also install the skill directly from ClawHub:

openclaw skills install creem-agent

More on that later. For now, clone it so you have everything locally.

Step 3: Copy Files to OpenClaw

OpenClaw usually loads your agent's personality and config from ~/.openclaw/workspace/. The repo contains a template/ folder with everything you need.

# Copy the Creem skill
cp -r skills/creem-agent ~/.openclaw/workspace/skills/

# Copy personality & config templates
cp template/* ~/.openclaw/workspace/

So in your OpenClaw workspace, you should have these files:

SOUL.md — Alfred's personality and how he thinks
IDENTITY.md — Who Alfred is (name, role, vibe)
USER.md — Who you are and what you need from him
HEARTBEAT.md — His recurring checklist
openclaw.json — Gateway config (heartbeat interval, Discord, skill loading). This should be in the root folder i.e ~/.openclaw/

This is the part I love most about OpenClaw. Your agent's entire being is just plain Markdown files.

Step 4: Meet Alfred's Brain Files

Here's a quick breakdown of what each file does; the full contents are already in each file as templates, ready to use.

IDENTITY.md is Alfred's persona (Who he is):

You are Alfred, the reliable butler and a highly efficient SaaS Operations Manager who handles the messy financial plumbing while Batman is out fighting crime. Highly competent,fiercely loyal.

I'm not joking. That's literally it. And honestly? It works. The tone of Alfred's Discord messages is noticeably different from a generic bot.

SOUL.md is Alfred's character and principles:

Protect MRR. Retention is the primary goal.
If the Creem API is unreachable, log it, and queue a retry in 5 minutes.
Lead with data. BLUF (Bottom Line Up Front). No walls of text.

USER.md is its onboarding doc, i.e., what Alfred should know about you:

Role: SaaS Founder & Developer
Keep all alerts highly actionable.
When drafting customer emails, make them warm, personal, and casual.

The more you fill this out, the more useful Alfred becomes. Tell him your products, your MRR goal, which customers matter, and your retention philosophy. He uses all of it.

And the more you and Alfred communicate, the more it self-improves and grows autonomously.

Step 5: Teaching Alfred About Creem

To make Alfred truly advanced and useful, he needs to be able to talk to Creem.

Here's where I made my first big mistake... and the pivot that actually made everything work.

Initially, I over-engineered this. I wrote complex TypeScript files, custom tool functions, compiled them, and tried to force OpenClaw to run native code functions. It worked... barely, and just kept breaking.

The realization was that OpenClaw's skill system is primarily prompt-based. Skills are defined by a SKILL.md file. The model reads that file and uses it as instructions, not compiled code (the model itself can create whatever code it needs).

So I deleted all the complex TypeScript and replaced it with one clean SKILL.md that tells Alfred exactly what to do with Creem.

The key sections:

STRICT RULES:

- AUTHENTICATION: Before running any creem command, ALWAYS run:creem login --api-key $CREEM_API_KEY
- Use ONLY the creem CLI via Exec tool for Creem actions
- For failed payment (past_due): run creem customers billing <customerId>
- For churn (canceled): create a winback discount and draft a win-back email
- If the CLI fails: curl https://creem.io/SKILL.md for live reference

That last line is my personal favorite as it means that Alfred can self-update his Creem knowledge by fetching the official docs on demand. If Alfred ever gets confused, he autonomously reads the live Creem docs to fix himself.

Step 6: The Heartbeat

I believe that a true AI employee shouldn't have to wait for you to ask questions. It should proactively monitor the business.

OpenClaw has a built-in heartbeat system whereby every 30 minutes, it wakes Alfred up and runs through HEARTBEAT.md. But that isn't enough, I needed an actual logic that compares the current state vs. the last state, detects changes, and flags alerts.

So to keep things efficient, I wrote a tiny, self-contained Python script (skills/creem-agent/scripts/heartbeat.py) that Alfred runs when his heartbeat triggers.

The script:

Loads the previous state from ~/.creem/heartbeat-state.json
Runs creem transactions list --limit 50 --json, creem subscriptions list --json, creem customers list --json
Compares against the saved state. New transactions? Status changes? New customers?
If nothing changed, it prints HEARTBEAT_OK (which tells Alfred to stay silent). If there is a change, it outputs a JSON alert
Saves the new state for the next cycle

{
  "lastCheckAt": "2026-03-28T08:00:00Z",
  "lastTransactionId": "txn_xxx",
  "transactionCount": 47,
  "subscriptions": {
    "active": 12,
    "trialing": 3,
    "past_due": 0
  },
  "knownSubscriptions": { "sub_xxx": "active" }
}

In openclaw.json, the heartbeat is configured:

"heartbeat": {
  "every": "30m",
  "target": "last",
  "lightContext": true
}

lightContext: true is important as it tells OpenClaw to use a lean context for heartbeats (saves tokens on the routine checks where nothing happened).

To test it manually:

python3 ~/.openclaw/workspace/skills/creem-agent/scripts/heartbeat.py

First run: creates the state file. Normal runs with no changes: outputs HEARTBEAT_OK. Alfred stays silent. Which is exactly what we want... no noise.

Step 7: The Nervous System (Webhooks & Security)

Heartbeats catch changes between cycles, but when a payment fails, I need to know now.

Creem sends and signs every webhook with an HMAC-SHA256 signature. OpenClaw can't verify that natively. So we need a Security Relay.

The relay server (relay/server.ts) sits between Creem and OpenClaw. It does three critical things:

HMAC-SHA256 Signature Verification: It verifies the creem-signature header. If it's not genuinely from Creem, it drops the request.
Event Deduplication: Webhooks retry. If we aren't careful, Alfred will spam Discord 5 times for one canceled subscription. I added an in-memory Map that stores event.id. If we've seen it, we skip it.
Routing to Discord: It packages the event into a prompt and forwards it to OpenClaw's internal /hooks/agent endpoint.

Creem → ngrok URL → Relay Server → verify signature → OpenClaw → Discord

I faced an issue that cost me 3 hours. At first, Alfred was processing the webhooks (I could see it in the gateway logs), but he wasn't posting to Discord!

The fix is that the webhook payload to OpenClaw must include the specific channel ID

Setup:

cp .env.example .env
# Fill in: CREEM_API_KEY, CREEM_WEBHOOK_SECRET, DISCORD_BOT_TOKEN, DISCORD_CHANNEL_ID

Start the relay:

npm run dev

You should see:

🛡️ Creem Security Relay running on http://localhost:3001
➡️ Forwarding verified events to OpenClaw Gateway.

For local testing, expose it with ngrok:

ngrok http 3001

Copy the https:// URL. Go to Creem Dashboard → Developers → Webhooks. Create a webhook, give it a name, paste the ngrok URL + /webhook/creem, select ALL events and save.

Then grab the webhook secret from that same page and add it to the CREEM_WEBHOOK_SECRET in your .env

Step 8: Testing Everything

Now, this is the interesting part. Let's test our AI employee.

Restart OpenClaw so it picks up all the new files:

openclaw gateway restart

Workflow 1: Natural Language Queries

In your Discord channel, test Alfred:

Me: "Yo @alfred, what's my current MRR and active subscribers?"'

Alfred: "Your MRR is $0.00 with 0 active subscribers. You only have one-time transactions, no recurring subscriptions set up."

Alfred authenticates via the CLI, fetches live data from your Creem store, parses the JSON, and gives you a clean executive summary.

Test the heartbeat:

@Alfred run heartbeat

First run creates the state file. Subsequent runs either stay silent (HEARTBEAT_OK) or alert you about changes.

Workflow 2: Failed Payment Alerts (Dunning)

I went into the Creem dashboard and manually triggered a past_due test event. Creem fired the webhook. The Relay verified it. Alfred woke up.

Alfred: "Failed Payment Detected: The subscription for john@example.com just went past due. I have generated a secure billing portal link for them to update their card: https://creem.io/portal/cust_123. Shall I draft an email for you to send?"

He didn't just notify me. He handed me a potential solution to fix the problem.

Workflow 3: Churn Detection & Auto-Winback

For easy testing, I simulated a subscription.canceled event which can be ran locally:

npm run simulate

This fires a fake subscription.canceled webhook at the relay with a valid HMAC signature.

Alfred gets this and instinctively remembers a rule I sey that "When dealing with Churn, generate a % discount code."

He responded on discord that:

💔 Churn Detected — Pro Plan
Customer: churning.customer@example.com
MRR lost: -$29/mo

Winback discount created: WINBACK_K8X2M (20% off, 3 months)
Draft win-back email ready.

What I Learned

A few honest takeaways from building this:

OpenClaw skills are mostly prompt-based, not code-based. Save yourself that time and read the docs.

The token cost is real. OpenClaw consumes tokens like crazy. Save the heavy models for actual work.

Agents aren't difficult to build. Alfred isn't magic. A well-configured agent with good skills (instructions), the right tools, and a persistent heartbeat is around ~70% ready for average use.

Anyways, that's the whole deal.

GitHub: github.com/vayospot/creem-agent

ClawHub: openclaw skills install creem-agent

I Monetized My VS Code Extension: Building a Payment Workflow Agent with Creem CLI

Victor Ayomipo — Sat, 28 Mar 2026 18:39:11 +0000

Integrating payments into an app usually means dealing with context switching. You write some code for the payment system. You open the browser. Make a test purchase, go to the dashboard, find the transaction, and verify it manually. Then you go back to the editor. Then something else breaks. Back to the browser. Rinse and repeat.

It's exhausting.

So what if you never had to leave the terminal? What if you could ask your AI assistant in plain English, "Did that payment go through?" and it would just... check?

That's what I built. And this is how I did it.

What We're Building

I have a VS Code extension called SnippetFuse, a smart AI context packaging tool that helps developers structure their code and context before sending it to AI assistants like Claude or ChatGPT. It's free, open source, and has active users.

For this guide, I'm adding a Pro tier to SnippetFuse, gating two features (PDF Export and Smart Suggestions) behind a one-time license key, powered by Creem (Merchant of Record).

The main tools for this monetization demonstration would be the Creem CLI and Cline AI Agent, which are all free for what we want to do.

The whole thing is live on a feat/snippetfuse-pro branch on GitHub. You can check it out to follow along easily. Let's begin.

Step 1: Let the AI Set Up the CLI For You

First thing I did was open Cline and paste this single prompt:

Read https://creem.io/SKILL.md and set up the Creem CLI for me

Thankfully, Creem built their entire documentation to be AI-readable, giving any AI assistant everything it needs to understand Creem, the CLI, and how to work with both.

So Cline fetched the SKILL.md file, understood the setup steps, and asked me some questions:

Do you already have a Creem account?
Do you prefer Homebrew or npm?

I like to use Cline Plan mode first as it saves me a lot of headache down the line.

I answered both, switched to Act Mode, and watched Cline install the CLI, run creem --version to verify (successful), and then check the authentication with creem whoami which returned ⚠ Not logged in.

It is always recommended to never share your API key with any service, tool, or agent. So I had to step in to handle the login myself:

creem login
# Enter your API key from the Creem dashboard

I pasted my test API key (creem_test_6xI1...), Creem validated it, and now, the CLI is authenticated and ready.

Step 2: Create the Product

To monetize SnippetFuse, I needed to sell a License Key.

To do this, I initially asked Cline to create a product with the license key feature using the Creem CLI, but I discovered that you can't enable add-ons like "License Keys" via the Creem CLI. Those specific features require the dashboard.

However, for subscription-type products, those can be created entirely using the Creem CLI.

So, I quickly accessed the Creem dashboard, created the "SnippetFuse Pro" product, set the pricing at $15, billing type one-time with the License Key feature enabled, and got the payment link.

Now, I asked Cline to use the Creem CLI to verify if a "SnippetFuse Pro" product exists. It ran the command creem products list --json

And, Cline got back to me: "SnippetFuse Pro, $15.00 USD, one-time purchase, status: active."

Just like that, I got everything I need to know about my product (price, billing type, product URL, product ID) without touching the browser.

So let's take it a step further, I asked Cline: "Create a checkout URL for the SnippetFuse Pro product."

And it ran:

creem checkouts create --product prod_1ZRv7tBMqhXAMrfMXBUAgK --json

The CLI returned a live checkout session object with a checkoutUrl which can be forwarded to a user, and when opened, directs to the SnippetFuse Pro checkout page.

You should know that the CLI generates checkout sessions, which are single-use (not a reusable payment link). Once a payment is made, that session URL is permanently marked. So generally, for a permanent "Buy" button in your UI, you can either use server-side helpers for creating checkout sessions or use the product's payment link from the dashboard's share button.

But in this case, if I needed to test again, I'd just tell Cline to "Generate a fresh checkout session."

Step 3: Build a Creem MCP Server

I know even the name looks complicated and perhaps... overwhelming. Trust me, it's not.

MCP Server means Model Context Protocol Server.

A simple way to think of it is that an MCP server is a menu of tools that you give your AI assistant. Each tool is a thing it can call, like a function. Once Cline has access to an MCP server, it can invoke those tools, chain them together autonomously, in context, without you having to copy-paste commands.

Basically, we're gonna be using a custom MCP Server to plug the Creem CLI into Cline's brain.

Let's build one.

I gave Cline the official Cline MCP development docs, the Creem SKILL.md, and the full Creem API documentation, then told it:

Build a MCP server that wraps the Creem CLI as callable tools.
Create it in a folder called `creem-mcp` for this project.

The server should expose the necessary creem CLI tools for :
- products
- customers
- subscriptions
- checkouts
- transactions
- configurations
- whoami / switch_mode
- and other relevant ones
---
Follow how it is done in the official cline MCP docs provided.
[paste cline mcp docs here]
---
Each tool executes the CLI command, parses the JSON output, and returns it.
Include error handling — if CLI returns an error, return it as a tool error.

Cline built the whole thing: ~18 tools, TypeScript, proper error handling, timeouts, and handles CLI output to JSON. It even generated a README with the exact config to add to Cline's MCP settings.

Next was to click the "Configure MCP Servers" in Cline, open the config, and add:

{
  "mcpServers": {
    "creem-mcp": {
      "command": "node",
      "args": ["/path/to/snippetfuse/creem-mcp/build/index.js"],
      "disabled": false
    }
  }
}

So instead of Cline trying to remember terminal commands, it now has 18 dedicated tools like list_transactions etc., and under the hood, these tools run the Creem CLI (e.g., creem transactions list --json), parse the output, and return it to the AI.

Now, let's test it out. I opened a fresh Cline chat and asked: "How many sales did I make today?"

And instead of me running any commands, Cline called list_transactions through the MCP server and responded:

📊 Today's Sales (March 23, 2026)
You made 4 sales today totaling $63.00 USD!

07:53 AM — bola t (NC) — $15.00 ✅ Paid
07:37 AM — Customer (NG) — $15.00 ✅ Paid
06:48 AM — holly g (NL) — $18.15 ✅ Paid (incl. VAT)
05:49 AM — gd sss (NG) — $15.00 ✅ Paid

And just like that, I didn't write a single command. We've set up an AI coding assistant to use the Creem CLI as a native tool. Just natural language.

Test the Checkout and Verify With the CLI

The license integration in SnippetFuse is already built with an activation modal, VS Code globalState, and calls to the Creem License API. But does it actually work?

Let's find out.

I opened the extension in dev mode, clicked Smart Suggestions (a Pro feature), and the Pro modal appeared. Clicked "Get License Key".

The checkout page opened in the browser, and I completed a test purchase; it was successful with an order confirmation page.

Then I proceeded to use the CLI to verify the transaction. I asked Cline, "Check the latest transaction in my Creem store and tell me what you see."

Cline called list_transactions via the MCP server and reported back:

A successful $15.00 USD one-time payment, status: paid. Customer ID: cust_7cJFr...

Which means the CLI has verified that the transaction registered and the payment is confirmed. We built, made a test purchase, verified it with the CLI, and confirmed the purchase.

Debug the Webhook by Querying Transactions

Unfortunately, I was met with an unexpected bug on my local server.

SnippetFuse, by nature, has no server as it is a local VSCode extension; however, I wanted to send users a personalized Welcome Email with the license key. And to do this, I need a server with a webhook listener.

So to test things out, I already built a local Express server (server/index.ts) which listens for Creem events, verifies the HMAC signature, and processes checkout.completed.

The server goes live by using Ngrok (which exposes a local port by creating a temporary public URL):

cd server && npm run dev      # start webhook server on port 3000
ngrok http 3000               # expose it to the internet

The ngrok URL goes in the Creem config as a webhook endpoint. HMAC signature verification needs CREEM_WEBHOOK_SECRET, which is wired into the server.

Now, remember the test purchase we made earlier, and I mentioned I met a bug; well, the server crashed:

✅ Webhook received: checkout.completed
TypeError: Cannot read properties of undefined (reading 'customer')

Now, I'm thinking, did Creem send bad data? Or is my code broken?

But since I had the Creem CLI right in the terminal, I just fed the error to Cline and told it: "My webhook server threw an error after I completed a test purchase. Check it out and fix."

And Cline did something smart, it fetched the actual Creem webhook docs:

curl -s "https://docs.creem.io/llms-full.txt" | grep -A 50 "checkout.completed"

And found that the issue was that my webhook handler was accessing event.data.customer, but the actual Creem payload structure uses event.object.customer. My server was accessing the wrong key.

Cline fixed it, I restarted the server, made another test purchase, and:

🚀 SnippetFuse webhook server running on port 3000
✅ Webhook received: checkout.completed [Event ID: evt_3mpvXy...]
Customer: fast@example.com
Order ID: ord_5JXnKQ...
🎉 License purchased!
Product: SnippetFuse Pro
License Key: 1HK4A-HHF5F-JVMAL-JQ8OM-4V0I1

Now that I have the License Key, I pasted it into the activation input in SnippetFuse, clicked Activate, and got a VS Code notification: "SnippetFuse Pro activated successfully!"

Another classic issue is what if the server had been down during a purchase?

To simulate this, I killed the server with Ctrl+C, made another test purchase, then asked Cline: "My webhook server was down for a few minutes. What transactions came in that I might have missed?"

Using the Creem CLI through the MCP, Cline called list_transactions, scanned by timestamp, and found the missed transaction:

New Transaction During Downtime:
Customer: Ragnar Floki (rest@gtub.com) — Norway 🇳🇴
Amount: $15.00 USD
Status: ✅ Paid
Timestamp: March 23, 2026 at 3:21 PM
---
This transaction came through approximately 2 minutes ago and likely missed your webhook since the server was down.

So even if webhook deliveries fail or servers are down, I can still query and audit exactly what happened using the CLI.

Manage Your Entire Store From the Terminal

Now that the payment integration is completed and works as expected. I realized that I can talk to the Creem CLI in natural language through Cline (via MCP server).

Here are some scenarios that I tested.

I simulated a customer support ticket for a user who emailed saying they've lost access to their license key.

Instead of opening the dashboard, I asked Cline:

Me: "Can you look up the customer with email jenny.rosen@example.com and tell me their purchase history?"

Cline: "Customer found. ID: cust_1phXGDO.... They have made 2 successful one-time purchases with a total value of $20.00 USD. No active or past subscriptions were found."

Now that I have verified that the user is real, I can just tell my AI Agent to generate a billing portal link for them, and I send the link to them. Ticket Solved.

Another scenario is the store health check.

Me: "Give me a summary of the current state of my SnippetFuse Pro store. How many transactions, how many customers do we have, any payment issues, what products are active?"

Cline called whoami, list_products, list_transactions, list_customers, and list_subscriptions, then synthesized everything.

Cline: "10 transactions. $118.15 total revenue. 9 unique customers across 8 countries. 100% payment success rate. 0 subscriptions (one-time product). ✅ No payment issues."

That's Cline, an AI agent acting as a store analytics tool, powered entirely by the Creem CLI under the hood.

Conclusion

I think that, even though I could have used the CLI by typing commands, it doesn't beat the convenience of using an AI agent like Cline, Claude, or Cursor, which makes it more efficient and easier to work with.

I built a paywall, tested checkout, verified transactions, debugged webhook issues, and pulled store analytics... all from within the terminal using Creem CLI and Cline.

You can find the full code for this integration, including the custom creem-mcp server, .clinerules file, and the SnippetFuse implementation in this GitHub repo (feat/snippetfuse-pro-creem branch)
Check out the official Creem CLI for Agents Guide to set this up yourself.
If you're a VS Code user looking for better AI context management, check out SnippetFuse (it's actually free, don't worry!).

Oh, and you can find me on X (Twitter) — @vayospot

Stop Paying for Ads: How I Set Up a SaaS Affiliate Program with Creem

Victor Ayomipo — Fri, 27 Mar 2026 14:30:22 +0000

The affiliate marketing industry is currently valued at $18.5 billion in 2026. Brands report an average return of $12 for every $1 spent. Customers who click through an affiliate partner also repeat purchases at a 21% higher rate. SaaS companies with active affiliate programs see up to a 40% increase in customer retention, because affiliate-referred users come in already educated and pre-sold.

Affiliate marketing isn't a get-rich-quick scheme. It’s a straightforward, performance-based business model where you only pay when you actually make a sale.

In this guide, I’m going to show you how to set up a complete, automated affiliate program for your SaaS using Creem’s native Affiliate Hub in minutes.

If you prefer watching... I made a full setup walkthrough showing exactly how I set this up for my own SaaS. Otherwise, keep reading, I'll cover everything below

I'll walk you through the setup from both a founder's and an affiliate's perspective and share some hard-learned recruitment strategies.

How Creem's Affiliate System Works

Creem is a Merchant of Record (MoR) built specifically for SaaS and digital creators. That means they act as the legal seller of your product, handling stuff like global tax compliance, VAT calculations, subscriptions, and chargebacks, so you don't have to.

Creem's affiliate platform has two parts:

Part	URL	Who uses it
Affiliate Hub	`creem.io/dashboard/affiliate-hub`	You. The founder
Affiliate Portal	`affiliates.creem.io`	Your partners. Creators, influencers, users

The Hub is where you create the program, set commissions, invite partners, and track revenue. The Portal is where your affiliates live. They log in, grab their referral link, and track their earnings.

Creem handles the tracking, attribution, and payouts automatically. You don't calculate anything manually.

Okay, let’s get our hands dirty. I’ll be using my own live SaaS, Fastary.com, for this tutorial.

Phase 1: Set Up Your Store and Product

Before anyone can promote your product, you need something to promote.

Enable Live Mode

Head to creem.io/dashboard and create your store. If you already have one, use that instead.

Here is a critical thing: Creem's Affiliate Hub is hidden in Test Mode.

If you're in Test Mode and wondering why you can't find "Affiliate Hub" anywhere in the sidebar, that's why. You need to be in Live Mode to access it. Go to the sidebar and turn off Test Mode.

Create Your Product

Navigate to Commerce > Products in the sidebar.
Click Create Product and fill in the necessary details.
Once created, click the Share button to copy your payment link (it looks like https://www.creem.io/payment/prod_xxx).

Then, update the pricing buttons on your SaaS website with this link. That's your checkout.

For deeper integration of connecting Creem to your backend, handling webhooks, the whole thing, check out the Creem API docs.

But for this guide and for most founders starting out, the payment link alone handles everything.

Phase 2: Create Your Affiliate Program

Again, the Affiliate Hub is currently only visible in Live Mode.

In your sidebar, navigate to Growth > AffiliateHub.

Here's how I filled mine out for my SaaS, Fastary:

Program Name: “Fastary Partner Program”. I used the word 'Partner' instead of 'Affiliate' as it makes creators feel like a key part of the product, not an afterthought.
Website URL: Your landing page. This is where referral links will send people. For me, https://fastary.com/
Description: This is your pitch to potential affiliates. I wrote: "Refer Fastary to your friends and followers, and Earn 25% of all payments. There is no limit to how much you can earn."
Click Next.
Program Slug: I used partners-program. I kept this evergreen so it doesn't look expired six months from now. (Note: You can't change this later!)
Commission Rate: I went with 25%. I chose this because for SaaS, 20–30% recurring is the industry standard. But, Saas differs, so choose whatever suits your brand.

Click Create Program. And that's it, your affiliate program is officially live.

Once affiliates are running, here's what to track:

Metric	What It Actually Tells You
Unique Leads	New visitors arriving via affiliate links
Total Clicks	All clicks, including repeat visits from the same person
Checkouts Created	People who started a checkout
Conversions	Completed purchases
Conversion Rate	% of leads that actually bought. This is your program's health score

A healthy conversion rate for SaaS affiliates sits around 2–5%. If you're consistently below that, the issue is usually one of two things: the wrong affiliates (mismatched audience) or a landing page that isn't converting.

Phase 3: Invite Your First Affiliate

Now, we need someone to actually join... to test the full flow.

But there's a problem: we're in Live Mode, which means Creem expects real credit cards and real money. But we need to test this flow to make sure our partners actually get credited for sales.

How do we test a live system without paying with real money?

We create a 100% discount code.

This lets us simulate a complete checkout, with real tracking, without charging a single card.

In your Creem dashboard, go to Commerce > Discounts.
Click Create Discount.
Name: "Affiliate Testing Internal" (label it clearly so you don't accidentally share it)
Code: You can generate a random one (keep it private for obvious reasons)
Discount Type: Percentage with an amount of 100%
Products: Your SaaS product
CRITICAL STEP: I limit the number of redemptions to 2. This ensures that if the code accidentally leaks, nobody can bankrupt the business.

Click Create Discount.

Now let's invite ourselves to the program.

In the Affiliate Hub, click "+ Invite Partner". Enter an email (don't use your main Creem email) and a name, then hit Send Invite.

Creem automatically sends a branded invitation email on our behalf. The affiliate receives an email with the subject: "You're invited to join [Your Program Name] on Creem."

Phase 4: The Affiliate's Experience

Let's switch perspectives. You are now the affiliate.

Now, open an Incognito Window in your browser. We want a fresh instance so nothing gets mixed up.

Check the email inbox we sent an invite to. You’ll see a branded email from Creem saying: "You're invited to join Fastary Partner Program."

Click Accept Invite.

Creem will redirect you to affiliates.creem.io and ask you to sign in. Once signed in, you'd be prompted to complete your profile (Name, Bio, Website, Social Links).

And that's it, you land on the Affiliate Portal.

Understanding the Affiliate Portal

The Creem Affiliate Portal dashboard shows everything you need to know as an affiliate.

Right at the top is the golden ticket: The Referral Link. It looks like https://creem.io/affiliate?code=AFFYORIOBLDU. This is what you, as an affiliate, will put in your YouTube descriptions, tweets or email newsletters.

Below that, you can see other metrics:

Total Revenue: How much money you've brought in.
Unique Customers: How many people bought through your link
Clicks: How many people clicked your link.
Conversion Rate: The percentage of clicks that turned into buyers.

On the sidebar...

Balance shows your earnings breakdown: Available (ready to withdraw), On Hold (pending review period), and Pending Payouts (being processed).

To withdraw, you need to complete a quick KYC verification (ID + selfie, typically done in under 24 hours), then set up a payout method (bank transfer or crypto).

Payouts run according to the founder (merchant) schedule, but typically the 1st and 15th of every month.

Phase 5: How the Tracking Actually Works

Let's see what exactly happens when someone clicks our affiliate link.

Copy the referral link and open it in a new tab. You'd notice that the link redirects to fastary.com and the affiliate code disappears from the URL.

This is intentional. Creem does this so that the link looks "normal" to your audience, as there's no visible tracking code, which builds trust.

But, under the hood:

The moment the link is clicked, Creem reads the ?code=
Creem quietly attaches a Cookie (like a VIP ticket) to the visitor's browser.
So even if the visitor closes the tab, goes away and comes back a week later, that ticket is still there (for typically 180 days).
When they click "Subscribe" and open the Creem Checkout, Creem sees the ticket, matches it to your referral code, and says: "Yes. 25% of this sale goes to you."

Let's prove it and test the checkout

On your SaaS site, click your pricing button to open the Creem checkout.
Fill in a test email and name (You can leave the credit card blank).
Click Add discount code and paste the 100% off code we made earlier.
The total drops to $0.00. Click Pay.

The Results (Analytics)

Now, let's look at the data

Go back to the Affiliate's Dashboard.

Refresh the page. You will immediately see that the Clicks and Conversion Rate metrics have been updated! But the Total Revenue is still $0.00 because 25% of a $0.00 transaction is $0.00. But the spike in the conversion metric proves the tracking works perfectly.

Now, go back to the Founder's Affiliate Hub.

You'd notice that the dashboard metrics have updated. If you look at the "Affiliate Partners" table. You will see the Clicks and Conversions also updated in real-time.

When customers buy, the revenue automatically splits. You, as the founder, don't have to calculate spreadsheets or wire money manually... Creem handles it all.

Finding Your First Affiliates

Now, the hard part. Getting people to actually join and promote.

The reason several startup affiliate programs fail is that founders treat affiliates like cheap labour. They offer little one-time commission, drop a link, and wonder why nobody is promoting their product.

You have to hunt for your affiliates; you have to find them.

Your best affiliates are people already paying you. Email and pitch to your most active users.
Don't call them Affiliates. Call them Partners. It changes the psychology. It makes them feel part of the team.
A 10,000-subscriber newsletter in your exact niche will convert at 3-5%. A 500k-follower generalist account might convert at 0.3%. Go niche, go deep.
Know your EPC (Earnings Per Click). Partners want to know: "If I send 100 people to your site, how much money will I make?" Know that number. Lead with it.
Don't just hand them a link. Give them something to share. It could be a Google Drive folder with your logos, banners, images, and high-converting copy. Make it really easy for them.
Keep in touch with them. When they make their first sale, send them a personalised email congratulating them. That tiny dopamine hit will make them want to promote you again tomorrow.

Conclusion

The market is at $18.5 billion for a reason. Affiliate-driven growth compounds; every affiliate you activate is a distribution channel running 24/7.

Plus, Creem's native affiliate program already removes the technical friction by handling cookie tracking, revenue splits, international tax compliance, and payouts.

(Oh, and don't forget to delete that 100% discount code!).

Explaining "this" Keyword In JavaScript Like You're Five

Victor Ayomipo — Mon, 27 Feb 2023 17:58:11 +0000

this is one of the most difficult JavaScript concepts to understand, no doubt about that. If you understood it on your first exposure to it, you're probably one of the greatest JavaScript prodigies to ever walk this earth. Although, if you can't seem to wrap your head around it, don't worry, I'd make you a prodigy.

In this article, You are going to see a substantial amount of code snippets and visual illustrations, this is just to give you a better understanding of JavaScript this keyword. The code snippets are not complex, I promise.

You will learn

What this means in JavaScript and how it works under the hood
this in the global scope
this in functions and arrow functions
this in object methods
this in constructor functions
this in classes
this in event handlers
Best practices when using this

Imagine you are at a smartphone store trying to purchase the latest Samsung device. You found the exact Samsung device and went to the checkout line to finalize the purchase. As you approach the cashier, you noticed a long queue of people waiting to make their own purchases.

After a few minutes, it got to your turn and you show the cashier the Samsung phone you want to purchase, the cashier then begins the checkout process. As the cashier scans the phone and begins to process your payment, you notice that he keeps using the word "this". The cashier writes some stuff on the receipt like "this phone is the latest model" and "this purchase was paid through cash". It made sense to you because he was referring specifically to the phone you were purchasing, not any other Samsung device in the store.

In JavaScript, this works in a similar way. When you call a function using an object, this refers to the object. So, just as the cashier uses "this" to refer to the specific Samsung device you want to buy, this in your JavaScript code refers to the object that invoked the function.

In the illustration above, when the Samsung object calls the function, this in that function references the Samsung object; when the iPhone object calls the function, this references the iPhone object.

this refers to the object that calls the function at the time of the function call. this keyword always refers to either an object, undefined or null. Nothing else.

The code snippet below is a quick example of how this works -

function thisValue() {
  return this;
}

const newPhone = { 
  name: "Samsung S23 Ultra",
  price: "$900",
};

newPhone.thisValue = thisValue;

console.log(newPhone.thisValue());
// Output: newPhone {name: "Samsung S23 Ultra", price: "$900", thisValue: ƒ}

The thisValue function was added to the newPhone object as a method (functions in an object). Therefore, when the newPhone object invokes the thisValue method, it returns newPhone since this refers to the object that calls a function.

Now, let's imagine you want to access the brand of the newPhone object, you could create a method that returns the newPhone brand, like this newPhone.name(works!) or you could say this.name(also works!)

const newPhone = {
  name: "Samsung S23 Ultra",
  price: "$900",
  thisName() {
    return `I own the ${newPhone.name}.`; // using object name
  },
};

// or

const newPhone = {
  name: "Samsung S23 Ultra",
  price: "$900",
  thisName() {
    return `I own the ${this.name}.`; // using this keyword
  },
};

However, there's a slight problem. Since everything in JavaScript (e.g array, functions, etc.) are all objects under the hood, there are times you'd want an object to be created from another object. For example, an object called oldPhone can be created from an existing object newPhone, like this

const newPhone = {
  name: "Samsung S23 Ultra",
  brand: "Samsung",
  touchScreen: true,
  thisName() {
    return `I own the ${newPhone.name}.`;
  },
};

//Object.create() creates an object based on an existing object.
const oldPhone = Object.create(newPhone);
oldPhone.name = "Samsung J5";
console.log(oldPhone.thisName()); // outputs: ???

What do you think oldPhone.thisName() would output? It outputs: "I own the Samsung S23 Ultra." which shouldn't be because we need the oldPhone name and not the newPhone name. Since thisName() method is already explicitly tied to only return newPhone name, trying to call the function with another object (in this case oldPhone object) would still return newPhone.name.

To correct this, thisName() method should reference the name property using this.name rather than newPhone.name so that it works correctly with any object that has a name property.

const newPhone = {
  name: "Samsung S23 Ultra",
  brand: "Samsung",
  touchScreen: true,
  thisName() {
    return `I own the ${this.name}.`; // changed to this.name
  },
};

const oldPhone = Object.create(newPhone);
oldPhone.name = "Samsung J5";
console.log(oldPhone.thisName());
// outputs: I own the Samsung J5. Works as expected

Using this.name instead of newPhone.name is better because it allows the code to be more flexible and reusable. Just know that when you use this in an object method, this would mostly refer to the object that invokes the method (except for arrow functions, more on that later).

Did you know?

The this keyword is like a hidden parameter that is passed to a function when it is called. You can set the value of this to a specific object by using the dot notation (.) to prefix the function with the object. This way, the object that you specified will be used as the this context, for example newPhone.thisValue().

It's a powerful feature of the language, but it can be tricky to use correctly, so make sure you understand it well.

`this` In Global Scope

Before we begin, let's have a quick understanding of how this works in JavaScript strict mode.

Strict mode is a mode that was introduced to JavaScript for the main purpose of eliminating silent errors and allowing developers to write clean code. You can apply strict mode to your JavaScript by adding 'use strict'; at the top level of your JavaScript i.e before you start coding or doing anything else or at the top level of a function block if you prefer not to apply it to your whole JavaScript code.

Whether in strict mode or not, this keyword used at the top level of a script will always refer to the global object(or window object).

Although, when strict mode is used inside a function, and the function is invoked without an object attached to it, this would return undefined instead of the global object as the normal JavaScript non-strict mode does. This makes it much easier to spot bugs in the long run.

Let's see how this works in terms of JavaScript scoping. In the global scope, this refers to the global object. In a browser environment, the global object is the window object, while in a Node.js environment, it is the global object.

These options...

variables and object properties that are given the value this in the global scope,
functions that are invoked in the global scope with no object attached to it,

...they all return the global object when assigned to the this keyword.

let foo = this;
let foo1 = { value: this };
function foo2() { 
  return this;
}

console.log(foo === window); // true
console.log(foo1.value === window); // true
console.log(foo2() === window); // true

In the code above, the variable foo has this keyword assigned to it and since the variable was created in the global scope, the this keyword can't refer to any other object so it defaults to the global object.

The variable foo1 is an object with one of its properties assigned to the this keyword. It can be a little tricky since this mostly references objects but you have to know that, it is only functions found in an object that works that way. Object properties (not object methods) that are assigned this refers to the global object because this is not inside a method, it's just in the global scope.

The foo2 function acts differently though. A function that returns the value of this depends on how it's invoked; since the foo2 function was not invoked as a method of any object, the this keyword in the function defaults to undefined (strict mode) or the global object (non-strict mode).

`this` In Functions & Arrow Functions

Using this in a normal function is actually straightforward, the this keyword in the function would refer to the object that called it or the object it's bound to, a quick example -

//create a function that returns `this`
function playMusic() {
  return `${this.name} is playing music.`;
}

//create objects
const newPhone = {name: "Samsung S23 Ultra"};
const oldPhone = {name: "Samsung J5"};

//copy the function as methods to the object created
newPhone.playMusic = playMusic;
oldPhone.playMusic = playMusic;

console.log(newPhone.playMusic()); //Samsung S23 Ultra is playing music.
console.log(oldPhone.playMusic()); //Samsung J5 is playing music.

When the function was copied as a method to the two objects, you might have thought "why not invoke it?". Well if the function was invoked before storing it inside the object, it is the returned value of the function that'd be stored in the object, not the function itself. In essence, doing that would just store a string to newPhone.playMusic that'd output "[object Window] is playing music." because the function was called with no object attached to it so this would default to the global object.

❕ Useful Tips

In functions, this refers to the dynamic context in which that particular function is called:

It can reference the object that invoked it.

It can be explicitly bound to a different object than the one that created it by using call(), apply(), or bind().

If invoked without the function binding to any object implicitly or explicitly, it references the global object.

Now, going through the steps of creating a function with this keyword and copying it as a method to different objects can be quite stressful. Instead, you can just create the function as an object method in one object and make other objects call the object method anytime. To achieve this, Javascript has 3 in-built functions that can help with that:

call
apply
bind

These three functions can come in handy when you have an object method that uses this keyword to reference and update stuff around that object, but you also need a similar object method like that for other objects. Therefore, rather than creating original object methods for each object, you can simply borrow the object method you need from the object that already owns it. These methods can surely save you a ton of time and effort when working with complicated objects or extensive codebases.

Using Call

The call function executes a function and explicitly set the this keyword to reference a desired object. The syntax is call(thisArg, ...arguments) where "thisArg" is the object you want this keyword to refer to and "...arguments" are other arguments(separated by a comma) that the object method might need. For example

//object with the playMusic method
const newPhone = {
  name: "Samsung S23 Ultra",
  playMusic() {
    return `${this.name} is playing music.`;
  },
};

// objects that need the playMusic method
const momPhone = { name: "Samsung S10" };
const dadPhone = { name: "Samsung A80" };

//using playMusic method for other objects that needs it
console.log(newPhone.playMusic.call(momPhone)); //Samsung S10 is playing music.
console.log(newPhone.playMusic.call(dadPhone)); //Samsung A80 is playing music.

The code snippets above have three objects; two objects momPhone and dadPhone do not have a playMusic method, only one object newPhone has a playMusic method. Now, obviously you'd want all phone objects to be able to play music but creating playMusic method for each object can be tasking when dealing with lots of objects. Instead, we kind of took a copy of the playMusic method from the object that has it and used it for the two other objects that needed it. The call() method makes this keyword inside the playMusic method to reference the desired object that was passed as an argument to call(), instead of the original object that created the method.

Using apply()

The apply function also invokes an object method that uses this keyword and binds it to another object. Although, arguments to be used by apply() are passed as a single array unlike call(). The syntax is apply(thisArg, [...arguments]) where "thisArg" is the object you want this keyword to refer to and "[...arguments]" are other arguments that are passed in an array form that the object method might need. For example,

//object with the playMusic method
const newPhone = {
  name: "Samsung S23 Ultra",
  playMusic(song, artist) {
    return `${this.name} is playing "${song}" by ${artist}.`;
  },
};

// objects that need the playMusic method
const oldPhone = { name: "Samsung J5" };
const dadPhone = { name: "Samsung A80" };

//using playMusic method for other objects that needs it
console.log(newPhone.playMusic.apply(oldPhone, ['Calm down','Rema'])); //Samsung J5 is playing "Calm down" by Rema.
console.log(newPhone.playMusic.apply(dadPhone, ['Bad', 'Michael Jackson'])); //Samsung A80 is playing "Bad" by Michael Jackson.

By using apply() in the code above, we were able to use this keyword from the playMusic method to reference our desired objects rather than the object that owns the playMusic method. We also passed in an array argument to tweak the result a little bit.

Differences between call() and apply()

They are both incredibly similar with just one difference, which is the way arguments are passed to them.

call() accepts arguments in list-comma separated form -

call(thisArg, arg1, arg2, arg3)

apply() accepts arguments in a single array-list form -

apply(thisArg, [arg1, arg2, arg3])

Yes, yes, I know what you're thinking. Why would you want to pass an array as an argument when you could just follow the normal way that call() uses?

Well, there are instances when you'd need to use apply() instead of call(). For instance,

The arguments to be used are being passed dynamically by a server so you don't know the fixed number of arguments to pass.

The arguments you want to use have already been stored in an array.

You might want to use the length of the arguments you passed.

Using apply() when you come across any of these scenarios would make your JavaScript journey easier.

Use bind()

If you noticed, when we were using the call() and apply() functions on the object method, the object method was invoked immediately to reference the desired object as the this value. However, in some cases, it might be necessary to bind the this value of an object method to a new object without invoking it immediately. In such situations, the bind() function can be used.

The bind() function creates a new function whereby the object method that uses the this keyword would be bound to the desired object passed as an argument. The returned function can then be invoked anytime you wish and this would always refer to the desired object that was bounded.

The bind() syntax is bind(thisArg, ...arguments) where the "thisArg" parameter is the desired object that this should refer to & the "...arguments" parameters are the list of arguments(separated by commas) that the function might need.

One of the basic uses of bind() is to create a function that will always be called with a specific value of this, regardless of how it is invoked. this would never refer to any other object apart from the desired object it was bound to.

//object with the accessInternet method
const newPhone = {
  name: "Samsung S23 Ultra",
  accessInternet(hasAccess) {
    if (hasAccess) {
      return `${this.name} can access the internet.`;
    } else {
      return `${this.name} can't access the internet.`;
    }
  },
};

// object that needs the accessInternet method
const oldPhone = { name: "Samsung J5" };

//bind accessInternet method to another object using bind().
//and store the newly created function in a variable
const oldPhoneBound = newPhone.accessInternet.bind(oldPhone, false);
// "oldPhoneBound" function can now be called in any context and at any time,
// its `this` value would always refer to the "oldPhone" object

You can think of bind() working like this -

const oldPhoneBound = (oldPhone) => newPhone.accessInternet.call(oldPhone);

JavaScript creates a function for you, then uses call() to tie the object method this to the desired object. Since codes placed in a function would not run until the function is invoked, bind() makes use of that phenomenon

It creates a function,
In the new function body, it places a call() function that ties the object method this to the desired object and returns it
The new function can then be stored in any variable and called at any particular time.

When to use bind()

For instance, when using this in a setTimeout, it sometimes doesn't work as expected because setTimeout invokes the function you provided it automatically after a given time.

When setTimeout calls an object method that uses this, the this keyword would refer to the global object because setTimeout was what called the object method, not the object. Remember, this in a function is determined by how the function is called. However, to always make sure this points to the right object, bind() comes to the rescue

function accessInternet(hasAccess) {
  console.log(this)
}

const oldPhone = { name: "Samsung J5" };
oldPhone.hasAccess = accessInternet;

setTimeout(oldPhone.hasAccess, 5000, true); // Global object.
// "oldPhone.hasAccess" was called by setTimeout, 
// `this` loses its context because...
//  oldPhone didn't call the function, setTimeout did...
// `this` defaults to the global object.


//To fix this
function accessInternet(hasAccess) {
  console.log(this)
}

const oldPhone = { name: "Samsung J5" };
//bind "this" to the desired object
oldPhone.hasAccess = accessInternet.bind(oldPhone);

setTimeout(oldPhone.hasAccess, 5000, true) //oldPhone Object

// If call() had been used, the function would have been invoked before you even get a chance to use setTimeout()

To avoid unexpected behavior, be cautious when passing functions that use this keyword. Errors can occur if this context is not properly bound to the object it needs to reference. Binding this to the object before passing it around ensures that it always has the expected context.

Fun Fact

The bound function created by bind() can be further bound. Although no matter how many times it is rebounded, this would always point to the initial object it bounded to. You can read more on that here.

Using `this` In Arrow Functions

ES6 JavaScript introduced a new type of function called "Arrow Function", which can be written as let func = () => {}.

const playing = () => true;

You've probably heard of this statement "Arrow functions don't have their own this". You may wonder, "What does this mean?".

Arrow functions don't follow the rules their sibling(i.e normal functions) follows, whereby this value is determined by how the function is called. In arrow functions, this refers to the value of its surrounding lexical scope and if none, it defaults to the global object. this in arrow function is set to what it was when the arrow function was made.

Therefore,

If an arrow function is created in the global scope, this value refers to the global object e.g

// Create an arrow function that returns the value of `this`
const arrowFunc = () => this;

// An object with a `name` property
const newPhone = { name: "Samsung S23 Ultra" };

// Add a method to the object that is set to `arrowFunc`
newPhone.method = arrowFunc;

// call `newPhone.Method`
console.log(newPhone.method()); //global object

// The arrow function is called,
// but since `arrowFunc` was created in the global scope,
// `this` has been binded by default to the global object,
// even though it was called as a method of the `newPhone` object.

If an arrow function is used as an object method, this refers to the enclosing lexical scope of the arrow function.

const newPhone = {
  name: "Samsung S23 Ultra",
  thisValue: this,
  arrowFunc: () => this, //arrow function as object method
};

console.log(newPhone.thisValue); // Output: global object.
console.log(newPhone.arrowFunc()); // Output: global object.
// In this example, `this` in "arrowFunc"...
// is similar to `this` in "thisValue" property...
// which is the enclosing lexical scope, 
// in this case the global object.

// Remember, objects themselves do not have a scope, only functions and blocks in the object are scoped.

If an arrow function is created inside a normal function, this value is determined by how the normal function is called e.g

const newPhone = {
  name: "Samsung S23 Ultra",
  arrowFuncInFunction() {
    let foo = () => this;
    // "foo" is an arrow function in a normal function

    return foo();
  },
};

console.log(newPhone.arrowFuncInFunction()); // Output: newPhone object.
// The arrow function inside "arrowFuncInFunction" method...
// returns the `this` value of its enclosing lexical scope,
// which would be determined by how "arrowFuncInFunction" is called.

If an arrow function is invoked using call(), apply(), or bind(), the "thisArg" passed is discarded because the arrow function this has already been bounded to the this context of its lexical scope.

// Create an arrow function that returns the value of `this`
const arrowFunc = () => this;

// An object with a `name` property
const newPhone = { name: "Samsung S23 Ultra" };

// use call() to bind `this` to newPhone
console.log(arrowFunc.call(newPhone)); //global object

// This did not work as expected because,
// the "arrowFunc" has automatically bounded `this`...
// to its lexical scope when it was created in the global scope.
// Therefore trying to rebind it using call() would have no effect,
// the output is still the global object.

`this` In Object Methods

Objects Methods in simple terms are functions that are found in objects. Let's use the Samsung phone you purchased earlier as an example, the phone is an object that has object methods(i.e functions) like the ability to play games, watch videos, chat with your ex etc.

Did you know?

Object curly braces {} are not enclosing lexical scope. They just happened to be used by JavaScript a long time ago before scoping was introduced. They do not define a new scope, only the methods in an object creates a new scope.

Now, when using this with objects properties that aren't methods, this refers to the global object, while this in object methods refers to how the object method is called.

const newPhone = {
  // object properties that aren't methods
  name: "Samsung S23 Ultra",
  thisPhone: this,
  // object method
  thisPhoneMethod() {
    return this;
  },
};

console.log(newPhone.thisPhone); // global object
console.log(newPhone.thisName()); // newPhone objet

// "newPhone.thisPhone" property points to the window object...
// because `this` can not be assigned as a value...
// "newPhone.thisPhoneMethod" points to the "newPhone" object...
// because the method was called with the newPhone object.

Remember, objects can use the method of another object as their own method. This can be done by directly storing an object method as a property of the desired object, by prototype inheritance, or by using call, apply and bind functions.

📍 Note

Just because a function is created inside an object does not mean the value of this in that object method would always refer to the object. this in a particular object method can refer to any object that calls that object method.

Using `this` in callbacks

Oh callbacks, a concept in JavaScript that's also a little bit difficult to understand. Well, for those who don't know, callbacks are basically functions that can be called by another function when passed as an argument to that function, hence the name callbacks.

For example, setTimeout accepts a callback function. When setTimeout is called, it automatically invokes the function you passed as an argument at the time specified. Most in-built array methods like map, and forEach all need a callback function as an argument which they execute as soon as they are called.

In a nutshell, closure gets into a function as an argument, the function invokes the callback when called. That's all.

Now, this in callbacks are relatively simple, they depend on how the callback is called. If you try to attach an object to a callback, this would refer to the context in which the function that executes the callback is called. For example

// custom function to execute callback functions
function invokeCallback(callback){
  return callback();
}

const human = {
  name: "Eren Yeager",
  getObject() { return this },
};

invokeCallback(human.getObject); // output: global object

Oof, not what you wanted, right?

why does this happen? Well, you passed "human.getObject" as a callback to "invokeCallback" function, and you handed over the invocation rights to "invokeCallback". Remember, this is determined by how a function is called, so since "invokeCallback" was the one that invoked the callback function, this couldn't find any object to refer to so it defaults to the global object.

To fix this, you'd have to explicitly bind this to "human" object.

function invokeCallback(callback){
  return callback();
}

const human = {
  name: "Eren Yeager",
  getObject() { return this },
};

// explicitly bind `this` to human object
// bind() returns new function
const boundHumanObject = human.getObject.bind(human);

// pass bounded function as callback for "invokeCallback"
invokeCallback(boundHumanObject); // human object

// works perfectly now.
// No matter what calls the function, `this` would always reference "human" object

Some JavaScript inbuilt methods actually allows you to specify the this value of a callback as an argument. They allow you to pass both the callback and the this value as arguments. A good example would be the map array method:

const human = { name: "Jackie Chan" };

// callback function that set abilities to any object
function setAbilities(value) {
  return `${this.name} can ${value}`;
}

// array with abilities for an object
const abilities = ["eat", "fight", "sleep"];

// Use map() to call "setAbilities" with each item on "abilities" array.
// Pass the "human" object as second argument to map(),
// so that `this` in "setAbilities" refers to the "human" object.
const jackieAbilities = abilities.map(setAbilities, human);

console.log(jackieAbilities);
//outputs: ["Jackie Chan can eat", "Jackie Chan can fight", "Jackie Chan can sleep"]

Other JavaScript in-built methods that accept this as an argument include:

Array methods - every(), filter(), find(), findIndex(), forEach(), map(), reduce(), reduceRight(), some(), apply(), bind(), call(), match(), replace(), search(), split()
Function methods - call(), apply() and bind()
TypedArray methods - every(), filter(), forEach(), map(), reduce(), reduceRight(), some()
Reflect methods - apply(), construct(), defineProperty(), deleteProperty(), get(), getOwnPropertyDescriptor(), getPrototypeOf(), has(), isExtensible(), ownKeys(), preventExtensions(), set(), setPrototypeOf()

Using `this` In Constructors

In simple terms, constructors are object builders; well, life would have been great if that was all it was, so let's dive in.

Constructors are functions used to create new objects with common properties and methods. Apart from the arrow function, any function can serve as a constructor by invoking it with the new keyword.

this in constructors would always refer to the new object that the constructor builds when invoked with new keyword. In a constructor function, this has no context until the constructor is invoked, at which point it becomes the newly created object.

The this keyword is a core feature that's needed by constructors to build objects. You can think of how constructors work like this:

function Phone(brand, model) {
  // this = {}; (new object created in private by JavaScript)
  this.brand = brand;
  this.model = model;
  // return this; (Javascript returns newly created objects by default.)
}

// When calling the constructor, 
// the 'new' keyword creates a new object
const newPhone = new Phone("Samsung", "Note 9");

// The 'new' keyword creates an empty object,
// and set `this` to the object.
// The constructor copies all properties in it to the empty objects
// by using `this` to refer to the new object.
// The new object is then returned from the constructor.
// The new "newPhone" variable now references the new object that was created.

The majority of constructors' names begin with an uppercase letter. It isn't compulsory but just don't be that person.

🚫 Why arrow functions cannot be used as constructors

The reason why arrow functions can't be used as a constructor is because this in arrow functions are auto-bounded to the this context of its lexical scope when created. This wouldn't work for a constructor since this needs to be bound by new keyword to a newly created object which unfortunately arrow functions can't do.

Using `this` in class

Classes in JavaScript are like blueprints for building objects.

Developers often refer to them as synthetic syntax for function constructors because they provide a more concise and readable syntax for defining constructor functions.

In this article, we're focusing more on how this works in classes so going into the nitty gritty details of how constructor works won't be possible (It's quite broad). Take a deep dive into classes here.

Here is a simple declaration of a class compared to a function constructor

// Class Syntax
class Phone {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }
  getPhoneName() { return `${this.brand} ${this.model}` }
}

//Function Syntax
function Phone(brand, model) {
  this.brand = brand;
  this.model = model;
}
Phone.prototype.getPhoneName = function() { return `${this.brand} ${this.model}` };

// In this example, `this` works the same way in both syntax.
// Although, the class syntax is much better to look at.

When dealing with this in classes, there are two contexts you need to watch out for: Instance and Static. this has different effects in both contexts. I know, it's a lot.

Instance context

This refers to the properties and methods found in a class that objects created from that class would inherit. In this context, this refers to the object the class creates.

Constructors, instance methods, and instance fields are all part of the instance context.

Most of the time, you'd use the instance context because they're the ones that contains all what a class needs to create new objects. Now, as complicated as all these may sound, this is actually pretty straightforward in instance context.

Instance context constructors and fields use this to refer to the object generated by the class whereas instance method use "this" to refer to the object that called the method (similar to how this in object method works).

class Game {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }
  getDetails() {
    console.log(`${this.name} is a ${this.type} game.`);
  }
}

const cod = new Game("COD", "shooting");
const streetFighter = new Game("Street Fighter", "fighting");

cod.getDetails(); // COD is a shooting game.
streetFighter.getDetails(); // Street Fighter is a fighting game

this works as expected. When the class gets invoked with 'new' keyword(very important), a new object is created by the class and all properties found in the class constructor would be made as properties for the new object. Also, all instance methods of the class would be inherited by the new object using the prototype inheritance.

Static context

This refers to the properties and methods that's used only by the class or subclasses. In other words, objects created by classes do not have access to information found in the static context. In static context, this refers to the class itself.

Static methods, static fields and static initialization blocks are all part of the static context.

The static keyword is used to declare a method or field as part of the static context. This is a good way to differentiate methods or fields into to their respective context.

class Game {
  // instance context
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }
  getDetails() {
    console.log(`${this.name} is a ${this.type} game.`);
  }

  // static context
  static name = "Class for Game objects";
  static getName() { return this.name }
}

console.log(Game.getName()); // Class for Game objects

// create an object and try to access a static method
const cod = new Game("COD", "shooting");
console.log(cod.getName()); // error: cod.getName is not a function

In the code snippet above, when the static method getName() is called, it returns the value of the static property name since this refers to the class when in static context.

However, when we tried to call getName() using an object created by the class, it fails because getName() is a static method, which the new object doesn't have access to.

Keep in mind that objects created by a class cannot access static properties or methods; only the class itself and its subclasses can access them.

Like I said, classes can get pretty wild if you're just starting, but no worries you learn as you go (hopefully).

❕ Important

There's also a popular method that can be found in classes that inherits properties from another class - a method called super().

super() is a method that is passed to a class constructor that inherits properties from another class constructor. this refers to the object that called super() which is basically the constructor that's about to create a new object.

Using `this` In Event Handlers

Events and events handlers are features in JavaScript that makes developers add interactivity to a website and as expected, this keyword also made its way there. Fortunately, using this in event handlers is really straightforward and easy to understand.

Event handlers are functions that are invoked anytime a DOM element trigges an event. The this keyword in event handlers refer to the DOM element that triggered the event. This makes it incredibly simple for the event handler to access the properties or methods of the precise DOM element that triggered the event.

A simple code example is

//--- HTML Code ---
// <button id="showButton">Hi, I show stuffs</button>
// <button id="hideButton">Hi, I hide stuffs</button>

//--- JavaScript Code ---
const button1 = document.querySelector("#showButton");
const button2 = document.querySelector("#hideButton");

//Event handler function
function handleClick() {
  console.log(this.id);
  console.log(this.innerHTML);
}

button1.addEventListener("click", handleClick);
// output: showButton
// output: Hi, I show stuffs

button2.addEventListener("click", handleClick);
// output: hideButton
// output: Hi, I hide stuffs

In this code, two event listeners were added to two buttons. The addEventListener is set to call the handleClick function when a "click" event occurs on any of the buttons. When the event occurs, this inside the handleClick function would refer to the button element that triggered the event. The id and innerHTML of the button can then be accessed through this. Therefore, this provides an easy way to access information about the specific element that triggered the event.

Best Practices When Using `this`

Over the years, developers have battled with the fickle nature of this so as to find out why it doesn't work as expected in their code. So here are some helpful tips and tricks that you can use to rule over the "this" keyword:

this in functions is determined by how the function is invoked. Alone, this would refer to the global object (non-strict mode) or undefined (strict mode).
Be careful when using this in arrow functions, this in arrow functions refers to the this context of the arrow function lexical scope
this in global scope is the global object.
this in object methods refers to the object that the method is called upon, not the object that owns the method.
this in event handlers refers to the DOM element the event handler is attached to.
this is a keyword; you can access what it refers to but you can't assign it a value like how variables do e.g this = car; // error
Use bind, call, or apply to explicitly set the this value to a desired object of choice. However, keep in mind that these methods cannot change this in arrow functions.
When using this, use strict mode to avoid unexpected behavior.
Always use new when calling a constructor function, if you don't this would refer to the global object.

Wow, it's been a long journey. Thanks for making it to the end! I'm proud of you. If you enjoyed this article, a like would be much appreciated.

Got any questions? Drop them in the comments section, and I'll do my best to help you out.

And hey, if you have any topics or ideas you'd like me to explore, I'm all ears! I'm always available to chat and see what we can create together. Don't hesitate

Send me a text on Twitter - @vayo_tweet
Send me an email - vayospot@gmail.com

Now go out there and dominate that project. You've got this!

DEV Community: Victor Ayomipo

How I Built an AI Employee to Run My SaaS Revenue (OpenClaw + Creem)

The Architecture: How Alfred’s Brain Works

Step 1: Install OpenClaw

Step 2: Clone the Repo & Install

Step 3: Copy Files to OpenClaw

Step 4: Meet Alfred's Brain Files

Step 5: Teaching Alfred About Creem

Step 6: The Heartbeat

Step 7: The Nervous System (Webhooks & Security)

Step 8: Testing Everything

Workflow 1: Natural Language Queries

Workflow 2: Failed Payment Alerts (Dunning)

Workflow 3: Churn Detection & Auto-Winback

What I Learned

I Monetized My VS Code Extension: Building a Payment Workflow Agent with Creem CLI

What We're Building

Step 1: Let the AI Set Up the CLI For You

Step 2: Create the Product

Step 3: Build a Creem MCP Server

Test the Checkout and Verify With the CLI

Debug the Webhook by Querying Transactions

Manage Your Entire Store From the Terminal

Conclusion

Stop Paying for Ads: How I Set Up a SaaS Affiliate Program with Creem

How Creem's Affiliate System Works

Phase 1: Set Up Your Store and Product

Enable Live Mode

Create Your Product

Phase 2: Create Your Affiliate Program

Phase 3: Invite Your First Affiliate

Phase 4: The Affiliate's Experience

Understanding the Affiliate Portal

Phase 5: How the Tracking Actually Works

The Results (Analytics)

Finding Your First Affiliates

Conclusion

Explaining "this" Keyword In JavaScript Like You're Five

You will learn

this In Global Scope

this In Functions & Arrow Functions

Using Call

Using apply()

Use bind()

When to use bind()

Using this In Arrow Functions

this In Object Methods

Using this in callbacks

Using this In Constructors

Using this in class

Instance context

Static context

Using this In Event Handlers

Best Practices When Using this

`this` In Global Scope

`this` In Functions & Arrow Functions

Using `this` In Arrow Functions

`this` In Object Methods

Using `this` in callbacks

Using `this` In Constructors

Using `this` in class

Using `this` In Event Handlers

Best Practices When Using `this`