Square Payment - Create order and payment with javascript

I have a restaurant website from which a client can make order. After selecting articles on a cart, the client is sent to the checkout page in which he will introduce his information and his bank card. I want to make the payment process with Square API, but I want to do it in the client side (JavaScript) not in the server side (Java with Spring-Boot).

async function createPayment(token) {
    const body = JSON.stringify({
        locationId,
        sourceId: token,
    });
    const paymentResponse = await fetch('/payment', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body,
    });
    if (paymentResponse.ok) {
        return paymentResponse.json();
    }
    const errorBody = await paymentResponse.text();
    throw new Error(errorBody);
}

How can I create a payment, an order and a client in the frontend. In the documentation of square, it is done with the Java API.

With Square client side API call aren't available. All API calls need to be server side. You’ll need to have this code written in PHP, ASP, Ruby, Java, or similar on the back end. This is code that runs behind the scenes on your hosting provider.

We do not allow API calls directly from the browser. This would expose your API credentials, which would allow anyone to gain access to your Square account.