Member Avatar for atplerry

Hello,
On my project that deal with online payment system, i want that when a user is buying goods from a website called e.g www.buy.com and want to pay using my payment website called www.pay.com when the user from www.buy.com choose to use my payment solution i want to redirect the from www.buy.com to my secure webpage without leaving www.buy.com page i.e when the user who choose to use www.pay.com for her payment to be able to enter her account detail on www.pay.com. i want lock the current (www.buy.com) webpage then display some part of my form in www.pay.com that contain username and password field to validate the buyer account in www.pay.com. Reason for this is that i dont want the expose the user password at www.buy.com that is the reason why i am redirecting from www.buy.com website to my own secure website but i dont want to leave www.buy.com before the transaction is completed.

the HTML code to lock the screen of a webpage on postback is:

<html>
<head>
   <style type="text/css">
      .LockOff {
         display: none;
         visibility: hidden;
      }

      .LockOn {
         display: block;
         visibility: visible;
         position: absolute;
         z-index: 999;
         top: 0px;
         left: 0px;
         width: 105%;
         height: 105%;
         background-color: #ccc;
         text-align: center;
         padding-top: 20%;
         filter: alpha(opacity=75);
         opacity: 0.75;
      }
   </style>

   <script type="text/javascript">
      function skm_LockScreen(str)
      {
         var lock = document.getElementById('skm_LockPane');
         if (lock)
            lock.className = 'LockOn';

         lock.innerHTML = str;
      }
   </script>
</head>
<body>
   <h2>Overlay Test Page</h2>
   <p>
      Please enter your name:
      <input type="text" name="name" />
   </p>
   <p>
      <input type="submit" value="Click Me!" onclick="skm_LockScreen('We are processing your request...');" />
   </p>

   <div id="skm_LockPane" class="LockOff"></div>
</body>
</html>

But instead of We are processing your request i want a small form that will be able to display a textbox and a submit button.

Or give me another way of redirecting from the previous website to my own page and after the transaction i will redirect back to the source page.

Thanks your contribution will reall help me a lot

Edited by mike_2000_17 because: Fixed formatting
  • 2 Contributors
  • 1 Reply
  • 239 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by sedgey

Dani AI

Generated

asked for a way to let a buyer authenticate on your payment site while keeping them visually on the merchant page; suggested embedding the payment UI. That idea can work, but there are important security, UX and browser-compatibility constraints to consider so credentials are only entered on the payment domain and the merchant never sees the password.

Prefered, robust patterns

  • Redirect or popup OAuth-style flow: open the payment provider (payments.example) in a new window or full-page redirect for login, then send a one-time token back to the merchant (merchant.example). This keeps credentials on the payment domain and avoids third-party cookie or framing restrictions.
  • Hosted fields / tokenization: for card data use the provider's hosted inputs (secure iframes served from the payment domain) so sensitive fields never touch merchant servers. Many payment vendors provide this pattern and tokenization APIs.

If you must embed (modal iframe)

  • Use an overlay modal that contains an iframe from the payment domain and communicate only via window.postMessage. Do not try to read the iframe DOM; validate message origin and data strictly.
  • The payment site must explicitly allow framing for specific merchant origins (use Content-Security-Policy frame-ancestors). X-Frame-Options: ALLOW-FROM is unreliable and largely unsupported.
  • Expect third-party cookie and SameSite issues: browsers often block cross-site cookies, so login-in-iframe can fail unless cookies are set with SameSite=None; Secure — still fragile on some user agents or privacy settings.
  • Always exchange any client-side token on the server and validate it server-to-server. Tokens must be short-lived and single-use. Use a state/nonce to prevent CSRF.

Example (high-level) of postMessage exchange:

/* parent (merchant) */
window.addEventListener('message', e => {
  if (e.origin !== 'https://payments.example') return;
  if (e.data.type === 'auth_complete') {
    // send e.data.token to server for validation before completing order
  }
});

/* in payments iframe */
window.parent.postMessage({ type: 'auth_complete', token: 'ONE_TIME_TOKEN' }, 'https://merchant.example');

Security cautions: never accept client-only signals as proof of payment; always validate tokens server-side over TLS. For reliability and fewer compatibility headaches, prefer the redirect/popup OAuth pattern or a vendor-hosted checkout flow.

Member Avatar for sedgey

why not use an iframe on the the buy.com site to host the page on pay.com?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.