How to display a map for shipping in relay points?

Hi,
On the checkout page on my e-shop, I propose home delivery and delivery in relay point.

For delivery in relay points, I need to display on the page the map of my shipping partner (Colissimo). Customers should be able to enter their home address so that the map focuses on relay points available around.

To do so, I need to authentificate on Colissimo application every time a customer chose “relay point” in order to get, from Colissimo, a token that the customer will use to call the map.

And there is where I’m blocked : I can authentificate by coding on front but my Colissimo password is visible from anyone inspecting my website… Not so great ! I need to authentificate from the backoffice of Webflow so that only Colissimo can get my authentification codes.

Do you know if it is at least possible to do so on Webflow ? And how I can get this map ?

Thank you very much for your help, you’ll find the read-only link just below.


Here is my site Read-Only: Webflow - MENONE

my website published link : https://www.menone.fr/

Explications in French about the webservice Colissimo (I couldn’t find it in English…) : https://www.colissimo.entreprise.laposte.fr/sites/default/files/2021-10/WebService-points-retrait_FR.pdf

An example of what I’m taking about :
Capture

And when I click on the pink button, this is what happens :


I can write the name of my city and the map uploads the available relay points close to me.

There is no backend for you to access. So a common approach is to use a node app as middleware to handle the actual calls and your website fetches from there.