API Symfony 4 / Reactjs / Paybox - submit a form from back side and send its redirection to front side for payment

i'm trying to make a payment with paybox and I want to do all this in back side (Api Symfony). The paybox documentation give us an example to implement the payment here http://www1.paybox.com/espace-integrateur-documentation/la-solution-paybox-system/appel-page-paiement/

I want to click on a "Pay" button in reactjs which call my api route (symfony), in which i render my paybox view with paybox data and i want to submit my form directly to redirect to paybox platform for payment but i don't receive a redirection response but the html content page.

My Paybox controller :

public function paybox(int $agreementId, Request $request)
    {
        $user = $this->getUser();
        $agreement = $this->agreementService->findUserAgreementByAgreementId($user->getId(), $agreementId);

        $paybox = $this->payboxService->getPayboxData($agreement);

        return $this->render('paybox/paybox.html.twig', [
           'paybox' => $paybox
        ]);
}

My paybox.html.twig :

<html>
    <body onload="document.payboxForm.submit()">
        <form action="{{ paybox_url }}" name="payboxForm">
            <input type="hidden" name="PBX_SITE"        value="{{ paybox.PBX_SITE }}">
            <input type="hidden" name="PBX_RANG"        value="{{ paybox.PBX_RANG }}">
            <input type="hidden" name="PBX_IDENTIFIANT" value="{{ paybox.PBX_IDENTIFIANT }}">
            <input type="hidden" name="PBX_TOTAL"       value="{{ paybox.PBX_TOTAL }}">
            <input type="hidden" name="PBX_DEVISE"      value="{{ paybox.PBX_DEVISE }}">
            <input type="hidden" name="PBX_CMD"         value="{{ paybox.PBX_CMD }}">
            <input type="hidden" name="PBX_PORTEUR"     value="{{ paybox.PBX_PORTEUR }}">
            <input type="hidden" name="PBX_RETOUR"      value="{{ paybox.PBX_RETOUR }}">
            <input type="hidden" name="PBX_HASH"        value="{{ paybox.PBX_HASH }}">
            <input type="hidden" name="PBX_TIME"        value="{{ paybox.PBX_TIME }}">
            <input type="hidden" name="PBX_HMAC"        value="{{ paybox.PBX_HMAC }}">
            <input type="hidden" name="PBX_EFFECTUE"    value="{{ paybox.PBX_EFFECTUE }}">
            <input type="hidden" name="PBX_REFUSE"      value="{{ paybox.PBX_REFUSE }}">
            <input type="hidden" name="PBX_ANNULE"      value="{{ paybox.PBX_ANNULE }}">
            <input type="submit" value="Payer">
        </form>
    </body>
</html>

I want to send the redirection to my reactjs app when clicking the 'Pay' button. And redirect the front page to the paybox platform. But all the mecanism is done in back side.

Solution

I have changed my way of doing. I finally removed my paybox.html.twig view and replace by a redirection response in my controller.

My Paybox controller:

$params = http_build_query($paybox->toArray());
return new RedirectResponse('https://preprod-tpeweb.paybox.com/cgi/MYchoix_pagepaiement.cgi?' . $params); //paybox test url

My Paybox class:

    public function toArray() : array {
        return [
            'PBX_SITE' => $this->PBX_SITE,
            'PBX_RANG' => $this->PBX_RANG,
            'PBX_IDENTIFIANT' => $this->PBX_IDENTIFIANT,
            'PBX_TOTAL' => $this->PBX_TOTAL,
            'PBX_DEVISE' => $this->PBX_DEVISE,
            'PBX_CMD' => $this->PBX_CMD,
            'PBX_PORTEUR' => $this->PBX_PORTEUR,
            'PBX_RETOUR' => $this->PBX_RETOUR,
            'PBX_HASH' => $this->PBX_HASH,
            'PBX_TIME' => $this->PBX_TIME,
            'PBX_HMAC' => $this->PBX_HMAC,
            'PBX_EFFECTUE' => $this->PBX_EFFECTUE,
            'PBX_REFUSE' => $this->PBX_REFUSE,
            'PBX_ANNULE' => $this->PBX_ANNULE
        ];
    }