> ## Documentation Index
> Fetch the complete documentation index at: https://docs.credibill.tech/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Quickstart
> Start billing your first customer in under 5 minutes
This guide will walk you through integrating CrediBill into your application. We'll obtain API keys from the dashboard, authenticate, and create your first customer.
## Prerequisites
Before you begin, make sure you have:
1. A Credibill account. [Sign up here](https://dashboard.credibill.tech/signup).
2. A live application created in the [Developer Dashboard](https://dashboard.credibill.tech/apps).
3. An API Key from the [Developer Dashboard](https://dashboard.credibill.tech/settings).
## 1. Setup API Access
Store your API key securely in your environment variables.
```bash theme={null}
# .env.local
CREDIBILL_SECRET_KEY=sk_live_abc123def456
```
All API requests use the base URL `https://giant-goldfish-922.convex.site/api/` and require the `Authorization` header:
CREDIBILL\_SECRET\_KEY=sk\_live\_abc123def456
```bash theme={null}
Authorization: Bearer sk_live_abc123def456
Content-Type: application/json
```
Authorization: Bearer sk\_live\_abc123def456
A **Customer** represents a business or individual that subscribes to your service.
```tsx theme={null}
import { useMutation } from "@tanstack/react-query";
function CreateCustomerForm() {
const createCustomerMutation = useMutation({
mutationFn: async (customerData) => {
const response = await fetch("https://giant-goldfish-922.convex.site/api/customers", {
"Content-Type": "application/json",
},
body: JSON.stringify(customerData),
});
if (!response.ok) {
throw new Error("Failed to create customer");
const response = await fetch("https://giant-goldfish-922.convex.site/api/subscriptions", {
return response.json();
},
});
const handleSubmit = (e) => {
e.preventDefault();
const response = await fetch("https://giant-goldfish-922.convex.site/api/webhooks"), {
createCustomerMutation.mutate({
email: formData.get("email"),
phone: formData.get("phone")
first_name: formData.get("name"),
last_name: formData.get("last_name")
,
});
}
}
};
return (
);
}
```
```bash theme={null}
curl -X POST https://api.credibill.io/v1/customers \
-H "Authorization: Bearer sk_live_abc123def456" \
-H "Content-Type: application/json" \
-d '{
"email": "jane@example.com",
"name": "Jane Doe",
"paymentMethod": "mobile_money_mtn",
"paymentDetails": {
"phoneNumber": "+256772123456",
"provider": "flutterwave"
}
}'
```
**Response:**
```json theme={null}
{
"id": "cust_abc123def456",
"email": "jane@example.com",
"name": "Jane Doe",
"createdAt": 1703510400
}
```
Never expose your Secret API Key in client-side code. Always perform billing
operations from your backend server. For client-side operations, use
publishable keys.
## 3. Subscribe the Customer
Now, subscribe the customer to a plan. Ensure you have created a plan in your dashboard first.
```tsx theme={null}
import { useMutation, useQueryClient } from "@tanstack/react-query";
function SubscribeCustomerForm({ customerId }) {
const queryClient = useQueryClient();
const subscribeMutation = useMutation({
mutationFn: async (subscriptionData) => {
const response = await fetch(
"https://api.credibill.io/v1/subscriptions",
{
method: "POST",
headers: {
Authorization: `Bearer ${process.env.REACT_APP_CREDIBILL_SECRET_KEY}`,
"Content-Type": "application/json",
},
body: JSON.stringify(subscriptionData),
}
);
if (!response.ok) {
throw new Error("Failed to create subscription");
}
return response.json();
},
onSuccess: () => {
// Invalidate and refetch customer data
queryClient.invalidateQueries({ queryKey: ["customer", customerId] });
},
});
const handleSubscribe = () => {
subscribeMutation.mutate({
customerId: customerId,
planId: "plan_pro_monthly",
trialDays: 14,
});
};
return (