Calling API with pages kit

1. The user needs to log in first.
2. The logged-in user needs to have the permission to generate payment links (admin\owner account).

import React, { useState } from '@blocklet/pages-kit/builtin/react';
import { Box, Button, CircularProgress, Alert, Typography, Container } from '@blocklet/pages-kit/builtin/mui/material';

// 1. Utility function: Get specific cookie value by key
function getCookie(key) {
  if (typeof document === 'undefined') return null; // Handle server-side rendering
  
  const cookieArr = document.cookie.split("; ");
  for (let i = 0; i < cookieArr.length; i++) {
    const [cookieKey, cookieValue] = cookieArr[i].split("=");
    if (cookieKey === key) {
      return decodeURIComponent(cookieValue);
    }
  }
  return null;
}

const createLink = async () => {
  // Check for required cookies
  const userDid = getCookie('connected_did');
  const csrfToken = getCookie('x-csrf-token');
  
  if (!userDid || !csrfToken) {
    throw new Error('Missing required authentication information. Please log in again.');
  }

  try {
    const response = await fetch('/payment-kit/api/payment-links?livemode=false', { // payment kit prefix, if production mode, you can remove livemode query
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-user-did': userDid,
        'x-csrf-token': csrfToken
      },
      credentials: 'include',
      body: JSON.stringify({
        create_mine: true,
        line_items: [
          {
            price_id: 'price_lQBVWaMccolkStQv0yHlM9mQ', // Replace with actual price ID
            quantity: 1,
          }
        ],
        mode: 'payment'
      })
    });

    const data = await response.json();

    console.log('data---', data)

    if (!response.ok) {
      throw new Error(data.error || 'Failed to create payment session');
    }

    return data;
  } catch (error) {
    console.error('Error creating checkout session:', error);
    throw error;
  }
};

export default function PaymentCheckout() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleCheckout = async () => {
    setLoading(true);
    setError(null);
    
    try {
      const linkData = await createLink();
      
      // Redirect to payment page
      if (linkData.id) {
        window.location.href = `${window.origin}/payment-kit/checkout/pay/${linkData.id}`;
      } else {
        throw new Error('Payment URL not received');
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  // Check if user is logged in (based on cookie)
  const isUserLoggedIn = !!getCookie('connected_did');

  return (
    <Container maxWidth="sm" sx={{ mt: 8, mb: 8 }}>
      <Box 
        sx={{ 
          display: 'flex', 
          flexDirection: 'column', 
          alignItems: 'center', 
          p: 4, 
          boxShadow: 3, 
          borderRadius: 2,
          backgroundColor: 'background.paper'
        }}
      >
        <Typography variant="h4" component="h1" gutterBottom>
          Purchase Service
        </Typography>
        
        <Typography variant="body1" color="text.secondary" sx={{ mb: 4, textAlign: 'center' }}>
          Click the button below to make a payment. You will receive service access upon completion.
        </Typography>
        
        {error && (
          <Alert severity="error" sx={{ mb: 3, width: '100%' }}>
            {error}
          </Alert>
        )}
        
        {!isUserLoggedIn && (
          <Alert severity="warning" sx={{ mb: 3, width: '100%' }}>
            Please log in before proceeding with payment
          </Alert>
        )}
        
        <Button
          variant="contained"
          color="primary"
          size="large"
          onClick={handleCheckout}
          disabled={loading || !isUserLoggedIn}
          startIcon={loading && <CircularProgress size={20} color="inherit" />}
        >
          {loading ? 'Processing...' : 'Pay Now'}
        </Button>
      </Box>
    </Container>
  );
}