Backend Code

Step 1: Check if the BreathePay API response is stating that a 3DS check is necessary:

The 3DS response code to check for is: 65802

Step 2: Extract the iframe information for the JS file on the frontend

//PHP
$url = $response['response']['threeDSURL'];
$baseUrl = parse_url($url, PHP_URL_SCHEME).'://'.parse_url($url, PHP_URL_HOST);
$baseUrl = trim($url, '/');

$ref = $response['response']['threeDSRef'];
$showIframe = !isset($response['response']['threeDSRequest']['threeDSMethodData']);
$data = json_encode($response['response']['threeDSRequest']);

Step 3: Store the threeDSRef ($ref) for later use

The 3DSRef can be stored in the users session or in the database, you must store this and include it later in the process with the 3DSResponse from the iframe

Step 4: Return the following as a 'result' object to your frontend and inject it into the checkout.js file

//PHP, Laravel
$result = [
    'status' => '3ds',
    'display' => $showIframe,
    'threeDSUrl' => $url,
    'baseUrl' => $baseUrl,
    'threeDSMethodData' => $data
];

return view('checkout', compact('result'));

Step 5: The checkout.js file will then create an iframe, which sends that data to the 3DS server, the 3DS server will then send an ACS request to your backend which must be sent via the ACS iframe in your checkout.js file

Step 6: Get the ACS data from the 3DS iframe request and send it to the checkout.js file

//PHP, Laravel
if($this->request->has('acs')) {
    $result = [
      'status' => 'acs',
      'url' => CHECKOUT_SUBMIT_URL,
      'post' => $this->request->except(['acs'])
    ];
    
    return view('checkout', compact('result'));
}

Step 7: The checkout.js file will produce an ACS iframe which sends the 3DS information to the banking server, the bank will then send a 3DSResponse to your backend at the same URL as your checkout route

Step 8: Handle the 3DSResponse by sending the information to the BreathePay API

//PHP, Laravel
if($this->request->has('threeDSResponse')) {
    $data = [
        'threeDSRef' => $ref //stored from step 3,
        'threeDSResponse' => json_decode($this->request->threeDSResponse)
     ];

     $response = $this->sendRequest($data);
}

Step 9: Handle the response in the same way as you would a regular charge request, this means you may need to repeat this 3DS process multiple times, or the transaction is labeled successful or rejected