Quickstart: use the Credicorp public API in React

Call the API from React

import { useEffect, useState } from 'react';

export function useProducts() {
  const [products, setProducts] = useState([]);
  useEffect(() => {
    const ac = new AbortController();
    fetch(`${import.meta.env.VITE_CREDICORP_BASE}/products`, { signal: ac.signal })
      .then(r => r.json())
      .then(({ data }) => setProducts(data))
      .catch(() => {});
    return () => ac.abort();
  }, []);
  return products;
}

Wrap the call in a `useEffect` with an `AbortController` so it cancels on unmount. Keep the base URL in `import.meta.env` (Vite) or `process.env` (CRA), and never put partner secrets in front-end env vars — anything prefixed for the client is public.

Point at sandbox in development

Set the base URL to https://sandbox.credicorp.co.uk/public/v1 in development and CI, and to https://api.credicorp.co.uk/public/v1 in production — driven by the one environment variable your framework already exposes. See choosing a base URL.

Next steps

From here you can add a quote form, an enquiry submission or an embeddable product picker. Send applicants to apply to start a real journey.