求助：Realex Payments支付弹窗Lightbox无法正常显示问题排查

Hey Patricia, let's dig into why your Realex Payments Lightbox isn't popping up—since you’ve followed the quick guide and no errors are showing, we’ll go through the most common easy-to-miss gotchas:

rxp-js depends entirely on jQuery, so if jQuery loads after rxp-js, the Lightbox will silently fail. Verify your script tag order looks like this:

<!-- Load jQuery FIRST -->
<script src="path/to/jquery.min.js"></script>
<!-- Then load rxp-js -->
<script src="path/to/rxp-js.min.js"></script>

Also, make sure you’re not loading multiple versions of jQuery (check your browser’s Network tab for duplicate jQuery requests)—version conflicts break dependencies every time.

Even small mistakes in the parameters generated by rxp-hpp-php can kill the Lightbox. Do these checks:

• Print your frontend parameters to the console to confirm all required fields exist:

  const hppConfig = {
    merchantId: '<?= $params['merchantId'] ?>',
    timestamp: '<?= $params['timestamp'] ?>',
    orderId: '<?= $params['orderId'] ?>',
    amount: '<?= $params['amount'] ?>',
    currency: '<?= $params['currency'] ?>',
    hash: '<?= $params['hash'] ?>'
  };
  console.log('HPP Config:', hppConfig); // Check this in dev tools!
  RealexHpp.lightbox.init(hppConfig);
  

• Confirm your PHP hash generation is correct: The hash must be a SHA-256 of the string timestamp.merchantId.orderId.amount.currency signed with your shared secret. A wrong hash will cause the Lightbox to fail silently.
• Ensure the amount is in the smallest currency unit (e.g., 10 EUR = 1000, not 10.00).

How are you triggering the Lightbox? Common missteps here:

• If binding to a button click, make sure the selector matches and the code runs after the DOM is ready:

  $(document).ready(function() {
    // Initialize HPP first
    RealexHpp.lightbox.init(hppConfig);
  
    // Bind trigger correctly
    $('#pay-now-button').click(function(e) {
      e.preventDefault(); // Prevent default button action if needed
      RealexHpp.lightbox.open();
    });
  });
  

• If auto-opening on page load, ensure open() is called after init(), and the DOM is fully loaded.

Realex’s test environment may restrict which domains can load the Lightbox. Confirm:

• localhost is added to your test merchant account’s allowed domains (check your Realex dashboard settings).
• You’re using the correct test endpoint (not production) for the Lightbox—mixing environments will cause silent failures.

Even if you don’t see obvious errors, check these:

• Switch to the "Warnings" or "Verbose" tab in your browser’s dev tools—sometimes dependency warnings get hidden.
• Enable "Preserve log" in the Network tab, refresh, and trigger the Lightbox. Look for any failed requests to Realex’s HPP service (400/403 status codes are common culprits).

Double-check your PHP code for library misconfiguration:

• Ensure you’re using the latest version of rxp-hpp-php (run composer show realex-payments/rxp-hpp-php to verify).
• Confirm you’re initializing the HPP class with the correct merchant ID and shared secret:

  use RealexPayments\Hpp\Hpp;
  
  $hpp = new Hpp();
  $hpp->setMerchantId('YOUR_TEST_MERCHANT_ID')
      ->setSharedSecret('YOUR_TEST_SHARED_SECRET')
      ->setOrderId(uniqid()) // Must be unique per transaction
      ->setAmount(1000)
      ->setCurrency('EUR');
  
  $params = $hpp->getParams();
  

If you can share snippets of your frontend initialization code and PHP parameter generation, we can narrow this down even further!

内容的提问来源于stack exchange，提问作者Patricia