Quickstart: embed a product picker with the public API

The embeddable snippet

<div id="cc-picker"></div>
<script>
(async () => {
  const base = 'https://api.credicorp.co.uk/public/v1';
  const { data } = await (await fetch(base + '/products')).json();
  const el = document.getElementById('cc-picker');
  el.innerHTML = data.map(p =>
    `<a class="cc-card" href="https://clients.credicorp.co.uk/register?product=${p.id}">` +
    `<strong>${p.name}</strong>` +
    `<span>\u00a3${p.min_amount.toLocaleString()}\u2013\u00a3${p.max_amount.toLocaleString()}</span></a>`
  ).join('');
})();
</script>

The widget lists live products and links each one to apply with the product pre-selected. Style .cc-card to match your site.

Make it robust

Wrap the fetch in a try/catch and render a plain link to business loans on failure, so a transient API blip never leaves an empty box on your page.