Bonus: FounderPlus Commerce SDK

Ini konten bonus untuk kamu yang sudah nyaman dengan tools dasar dan mau explore lebih jauh. Kalau kamu masih di minggu 1-3, skip dulu — kembali lagi nanti.

Apa Ini?

@founderplus/commerce-sdk adalah toolkit e-commerce yang sudah dipakai di production FounderPlus Academy. Kamu bisa pakai SDK ini untuk:

Scaffold project baru — satu command, dapat project React + Tailwind v4 lengkap dengan payment integration
UTM tracking — otomatis capture dari iklan (Google Ads, Meta, TikTok) dan internal navigation
Analytics — plugin system: PostHog, Clarity, GA4, Facebook Pixel, atau custom
Payment — multi-product: course, event, learning path, subscription. Redirect ke payment gateway otomatis
React hooks — 29 hooks siap pakai (via @founderplus/react)

Yang paling berguna untuk bootcamp: CLI wizard yang scaffold project lengkap.

Prerequisites

Sebelum mulai, pastikan kamu sudah install (dari halaman Setup):

Node.js v22+
Bun v1.x

Cek:

node -v    # v22.x.x
bun -v     # 1.x.x

Step 1: Setup Registry

SDK ini di-host di GitLab Package Registry (bukan npm public). Kamu butuh 2 hal:

1a. Buat file `.npmrc`

Di home directory kamu (bukan di project), buat file ~/.npmrc:

@founderplus:registry=https://gitlab.com/api/v4/projects/78283514/packages/npm/
//gitlab.com/api/v4/projects/78283514/packages/npm/:_authToken=${GITLAB_TOKEN}

Atau pakai terminal:

echo '@founderplus:registry=https://gitlab.com/api/v4/projects/78283514/packages/npm/' >> ~/.npmrc
echo '//gitlab.com/api/v4/projects/78283514/packages/npm/:_authToken=${GITLAB_TOKEN}' >> ~/.npmrc

1b. Set GITLAB_TOKEN

Minta token ke mentor. Setelah dapat, tambahkan ke shell profile kamu:

# Tambah ke ~/.bashrc atau ~/.zshrc
export GITLAB_TOKEN="glpat-xxxxxxxxxxxxxxxxxxxx"

Lalu restart terminal atau jalankan source ~/.zshrc.

Verifikasi

bun add -g @founderplus/commerce-sdk
founderplus --help

Kalau muncul help text, kamu siap.

Step 2: Buat Project Baru

Ini yang paling seru. Satu command, dapat project lengkap:

bunx @founderplus/commerce-sdk create nama-project-kamu

Atau kalau sudah install global:

founderplus create nama-project-kamu

Wizard Interaktif

CLI akan tanya beberapa hal:

┌  Let's create your FounderPlus campaign
│
◆  What's your API base URL?
│  https://academy.founderplus.id/api/dev
│
◆  What type of campaign?
│  ● Landing Page — Single product sales page
│  ○ Quiz Funnel — Typeform-style quiz → results with CTA
│  ○ Landing Page + Quiz — Full funnel
│
◆  What are you selling?
│  ● Event — Workshops, bootcamps, webinars
│  ○ Course — Online courses
│  ○ Learning Path — Bundled learning programs
│  ○ Newsletter / Lead Magnet — Free content capture
│
◆  Which product?
│  (Ambil dari API — daftar produk real yang ada di sistem)
│
◆  Describe your campaign:
│  Weekend bootcamp untuk founder yang mau validasi ide dalam 48 jam
│
└  Done!

Apa yang Di-generate?

nama-project-kamu/
├── src/
│   ├── App.tsx              # Landing page / quiz / combined
│   ├── main.tsx             # Entry point + SDK init
│   ├── index.css            # Tailwind v4
│   ├── lib/utils.ts         # Utility functions
│   ├── hooks/use-mobile.tsx # Responsive hook
│   └── components/
│       ├── Navbar.tsx        # Navigation
│       ├── Footer.tsx        # Footer
│       ├── landing/          # Hero, Features, CTA sections
│       └── quiz/             # Quiz flow (kalau pilih quiz)
├── .env                      # Auto-generated dari API
├── .npmrc                    # Registry config
├── package.json              # Dependencies lengkap
├── vite.config.ts            # Vite config
├── index.html                # HTML entry
├── components.json           # shadcn/ui config
├── CLAUDE.md                 # AI context file
├── CAMPAIGN.md               # Campaign documentation
└── .claude/skills/           # AI skill definitions

Semua file langsung runnable. Tinggal:

cd nama-project-kamu
bun run dev

Buka http://localhost:5173 — kamu sudah punya landing page/quiz funnel yang connected ke payment gateway.

Step 3: Setup di Project yang Sudah Ada

Kalau kamu sudah punya project dan cuma mau generate .env + robots.txt:

founderplus setup https://academy.founderplus.id/api/dev

SDK akan fetch semua environment variables dari API (analytics keys, site settings, API URLs) dan generate:

.env — semua keys dengan prefix VITE_
public/robots.txt — SEO ready

Options

# Next.js project (prefix NEXT_PUBLIC_)
founderplus setup https://api-url.com --prefix NEXT_PUBLIC_ --output .env.local

# Tambah sitemap
founderplus setup https://api-url.com --sitemap https://kamu.com/sitemap.xml

Quick Start: Pakai SDK di Code

Setelah project jadi, SDK sudah ter-init di main.tsx. Tapi kalau mau manual:

Initialize

import { FounderPlusSDK } from '@founderplus/commerce-sdk';

FounderPlusSDK.init({
  analytics: {
    providers: [
      { type: 'ga4', measurementId: 'G-XXXXXXXXXX' },
      { type: 'facebook-pixel', pixelId: '1234567890' },
      { type: 'clarity', projectId: 'xxxxxxxxxx' },
    ],
  },
  api: {
    baseUrl: 'https://academy.founderplus.id/api/dev',
  },
  payment: {
    baseUrl: 'https://academy.founderplus.id',
    defaultSource: 'my-landing-page',
  },
});

Payment — Zero Code

Cukup tambahkan data attributes ke button:

<button
  data-product-slug="bootcamp-2026"
  data-product-type="event">
  Daftar Sekarang
</button>

Selesai. SDK otomatis handle: fetch product → track analytics → redirect ke payment. Kamu nggak perlu tulis satu baris JavaScript pun untuk flow ini.

Payment — Programmatic

Kalau butuh kontrol lebih:

await FounderPlusSDK.purchase('bootcamp-2026', 'event', {
  source: 'hero-section',
  onSuccess: (payload) => console.log('Redirecting...', payload),
  onError: (error) => alert(error.message),
});

UTM Tracking

SDK otomatis capture UTM dari URL (Google Ads, Meta, TikTok). Untuk internal tracking:

// UTM otomatis ke-attach di setiap payment redirect
const utm = FounderPlusSDK.getUTM();

// Manual: append UTM ke URL
const url = FounderPlusSDK.appendUTMToURL('https://kamu.com/checkout');

Bonus: React Hooks

Untuk yang pakai React, ada package @founderplus/react dengan 29 hooks:

bun add @founderplus/react

import { FounderPlusProvider, useCheckout, useCourses } from '@founderplus/react';

function App() {
  return (
    <FounderPlusProvider config={{
      api: { baseUrl: 'https://academy.founderplus.id/api/dev' },
      payment: { baseUrl: 'https://academy.founderplus.id' },
    }}>
      <ProductList />
    </FounderPlusProvider>
  );
}

function ProductList() {
  const { data: courses, isLoading } = useCourses();
  const { purchase, isPurchasing } = useCheckout();

  if (isLoading) return <p>Loading...</p>;

  return (
    <div>
      {courses?.map(course => (
        <div key={course.slug}>
          <h3>{course.title}</h3>
          <button
            onClick={() => purchase(course.slug, 'course')}
            disabled={isPurchasing}
          >
            {isPurchasing ? 'Processing...' : 'Beli'}
          </button>
        </div>
      ))}
    </div>
  );
}

Hooks yang Tersedia

Kategori	Hooks
Products	`useCourses`, `useCourseDetail`, `useEvents`, `useEventDetail`, `useLearningPrograms`, `useSearch`
Payment	`useCheckout`, `usePaymentChannels`, `useVoucher`, `useGuestPayment`, `usePaymentStatus`
Analytics	`useAnalytics`, `useUTM`
Profile	`useProfileModules`, `useProfileSubscription`, `useProfileSummary`
Advanced	`useQuiz`, `useCertificate`, `useComments`, `useNpsSurvey`, `useArticles`

Kapan Pakai Ini?

Situasi	Rekomendasi
Baru mulai bootcamp, belajar dasar	Skip dulu. Fokus HTML + deploy manual
Sudah comfortable bikin landing page sendiri	Coba `founderplus create` untuk lihat pattern yang bagus
Mau jualan course/event/workshop sendiri	Pakai full — SDK + React hooks
Mau build e-commerce custom	Pakai SDK sebagai foundation, extend di atasnya

TL;DR

founderplus create — scaffold project lengkap (React + Tailwind + payment) dalam hitungan detik
founderplus setup — generate .env dari API
Data attributes — zero-code payment integration
29 React hooks — kalau butuh kontrol lebih
Ini bonus — nggak wajib untuk bootcamp, tapi bikin hidup lebih gampang kalau kamu mau serius