AI Chat with payment for request

1. Create paywall. Follow this guide:
Create paywall

2. Create an API provider to handle tokenized requests:
Create API Provider

3. Enable and set up paywall tokenization:
Paywall tokenization

4. Now the paywall and API provider are ready.

Let’s code

const model2url = {
  haiku: `https://onlineapp.pro/api/v1/api-gateway/29?paywall_id=197&test_mode=1`,
  sonnet: `https://onlineapp.pro/api/v1/api-gateway/26?paywall_id=197&test_mode=1`,
  opus: `https://onlineapp.pro/api/v1/api-gateway/30?paywall_id=197&test_mode=1`
};

const model2type = {
  haiku: 'standard',
  sonnet: 'advanced',
  opus: 'advanced'
};

export default function AIChat() {
  const [user, setUser] = useState();
  const [messages, setMessages] = useState([]);
  const [answer, setAnswer] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [prompt, setPrompt] = useState('');
  const abortSignal = useRef<{ abort: () => void }>({});
  
  const getUser = async () => {
    const user = await paywall.getUser();
    setUser(user);
  };

  useEffect(() => {
    getUser();
  }, []);
  
  const onSendMessage = async () => {
    if (isLoading) {
      abortSignal.current?.abort();
      setIsLoading(false);
      return;
    }

    if (user?.error) {
      await paywall.open({ resolveEvent: 'signed-in' });
      getUser();
      return;
    }

    setAnswer('');
    setIsLoading(true);
    setPrompt('');
    
    const newMessages = [
      ...messages,
      {
        role: 'user',
        content: prompt
      }
    ]

    setMessages(newMessages);
    
    let fullAnswer = '';

    try {
      for await (const chunk of paywall.makeStreamRequest(model2url.sonnet, {
        method: 'POST',
        body: JSON.stringify({
          messages: newMessages,
          stream: true
        }),
        abortSignal.current
      })) {
        try {
          const lines = chunk
            .split('\n')
            .filter((line) => line.startsWith('data: '));

          lines.forEach((line) => {
            const data = line.replace('data: ', '').trim();
            try {
              const parsed = JSON.parse(data);
              const content = parsed.choices[0].delta.content;
              fullAnswer += content;
              setAnswer((prev) => prev + content);
            } catch (error) {
              console.error('Failed to parse SSE data:', error);
            }
          });
        } catch (error) {
          console.error('Failed to parse SSE data:', error);
        }
      }
      setMessages((prev) => [
        ...prev,
        {
          role: 'assistant',
          content: fullAnswer
        }
      ]);

			// Charge user queries 
      setUser((user) => ({
        ...user,
        balances: user?.balances?.map((balance) =>
          balance.type === model2type[selectedModelValue]
            ? { type: balance.type, count: balance.count - 1 }
            : balance
        )
      }));
    } catch (error) {
      if (error === 'not-enough-queries') {
  			// User queries have run out, ask to renew subscription to top up again
        setIsLoading(false);
        await paywall.renew();
        // Update user balances after success payment
        await getUser();
      } else if (error === 'Unauthorized' || error === 'access-denied') {
        setIsLoading(false);
        await paywall.open({ resolveEvent: 'signed-in' });
        // Update user balances after success login
        await getUser();
      }
    }

    setIsLoading(false);
  };
  
  return <div>
      {messages.map((message) => message.text)}
      {isLoading && (answer || "Loading answer...")}
      <textarea onChange={setPrompt} value={prompt} placeholder="Write your question" />
      <button onClick={onSendMessage}>Send message</button>
      {user?.balances && (
          <div>
             Your balance:
              {
                user?.balances?.find(
                  (balance) =>
                    balance.type === model2type.sonnet
                )?.count
              }{' '}
              Queries
          </div>
        )
      )}
    </div>
}