[SOLVED] I can't get working the Lightbox of Realex Payments

I can't get working the Lightbox of Realex Payments

I really need some help to figure out why the lightbox with the payment form doesn't work.

I've been following the quick guide for Hosted Payment Page (Html+JS with PHP) and I installed rxp-hpp-php library via composer and rxp-js + jQuery libraries manually.

I think I do everything ok but for some reason, the popup doesn't show. No errors and the resources seem to be loaded. Anybody can help me and discover what I am missing?

Here is my code and I also attached an image at the end.

localhost/addon-payments/index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>HPP Lightbox Demo</title>
    <meta charset="UTF-8">
    <style>
      body { background-color: lightsalmon; }
      button { padding: 10px 20px; border-color: #fff; }
    </style>
    <script src="jquery-1.11.3.min.js"></script>
    <script src="rxp-js/dist/rxp-js.js"></script>
    <script>
      // get the HPP JSON from the server-side SDK
      $(document).ready(function () {
        $.getJSON("requestUrl/", function (jsonFromServerSdk) {
          RealexHpp.setHppUrl('https://hpp.sandbox.addonpayments.com/pay');
          RealexHpp.init("payButtonId", "responseUrl/", jsonFromServerSdk);
        });
      });
    </script>
  </head>
  <body>
    <button type="button" id="payButtonId">Checkout Now</button>
  </body>
</html>

localhost/requestUrl/index.php

    <?php
      require_once ('../vendor/autoload.php');

      use com\realexpayments\hpp\sdk\domain\HppRequest;
      use com\realexpayments\hpp\sdk\RealexHpp;
      use com\realexpayments\hpp\sdk\RealexValidationException;
      use com\realexpayments\hpp\sdk\RealexException;

      var_dump("Request...");

      $hppRequest = ( new HppRequest() )
        ->addMerchantId( "merchant id" )
        ->addAccount( "internet" )
        ->addAmount( "1001" )
        ->addCurrency( "EUR" )
        ->addAutoSettleFlag( "1" );

      $realexHpp = new RealexHpp( "secret number" );

      try {
        $requestJson = $realexHpp->requestToJson($hppRequest);
        echo $requestJson;
        // here goes custom code
        return $requestJson;
      }
      catch (RealexValidationException $e) {
        return $e->getMessage();
      }
      catch (RealexException $e) {
        return $e->getMessage();
      }

    ?>

localhost/responseUrl/index.php

 <?php

  require_once ('../vendor/autoload.php');

  use com\realexpayments\hpp\sdk\domain\HppResponse;
  use com\realexpayments\hpp\sdk\RealexHpp;
  use com\realexpayments\hpp\sdk\RealexValidationException;
  use com\realexpayments\hpp\sdk\RealexException;

  $realexHpp = new RealexHpp("secret number");
  $responseJson = $_POST['hppResponse'];

  try {
    // create the response object
    $hppResponse = $realexHpp->responseFromJson($responseJson);
    $result = $hppResponse->getResult(); // 00
    $message = $hppResponse->getMessage(); // [ test system ] Authorised
    $authCode = $hppResponse->getAuthCode(); // 12345

    return $hppResponse;
  }
  catch (RealexValidationException $e) {
    return $e->getMessage();
  }
  catch (RealexException $e) {
    return $e->getMessage();
  }

?>

Image of resources

Solution

Thanks for your question. The JS Library is expecting a JSON string (or more correctly, jQuery is). So it won't accept:

string(10) "Request..."

before the actual request JSON string starts. What your request endpoint should be passing to the JS Library is:

{"MERCHANT_ID":"bWVyY2hhbnRJZA==",...etc}

Best,

Seán

Global Payments