> ## 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.

# PawaPay

> Step-by-step guide to setting up your app to use pawapay to charge customers and CrediBill to act as the  subscription engine

<Warning>
  PawaPay only supports mobile money payments and does not support card
  payments. Customer accounts cannot be automatically charged without user
  interaction. CrediBill tracks free trials and subscription expirations and
  notifies you via webhooks. Use the webhook event to terminate access to your
  app or service and render a resubscribe button — CrediBill will pick up from
  the resubscribe action to track the payment and restart the subscription for
  you.
</Warning>

## 1. Subscribe the customer

* Go to the credibll dashboard and click `Plans` in the sidebar
* Copy the `plan id` of the plan you want to subscribe the customer to. Ideally you should already
  have this as an env variable in your app
  * At least one created customer. This means a user to your app - A pawaPay account
    (live or sandbox) - Basic understanding of webhooks
* Fetch the `customer id` programmatically from the database

## 2. Start subscription (Free Trial Scenario)

```tsx theme={null}
//subscribe-button.tsx
//Make sure the plan has a free trial in the credibill dashboard
import { Button } from "@components/ui/button";
import { useQuery } from "@tanstack/react-query";

export default function SubscribeButton() {
  const handleSubscription = () => {
    useQuery();
  };
  return (
    <div>
      <Button onClick={handleSubscription}> START FREE TRIAL </Button>
    </div>
  );
}
```

## 3. Start subscription (No Free Trial Scenario)

```ts theme={null}
//subscribe-button.tsx
//Make sure the plan has no free trial in the credibill dashboard
import { Button } from "@components/ui/button"
import { useQuery } from "@tanstack/react-query"

export default SubscribeButton() {
    const handleSubscription = () => {
        useQuery()
    }
return(
    <div>
    <Button onClick={handleSubscription}> START FREE TRIAL </Button>
    </div>
)
}
```