Skip to main content
Version: 4.0.2

Redirect and Popup Flows

This document outlines how to set up and implement the DMG Charge SDK using either the redirect or popup integration methods. These methods provide flexible options for integrating payment functionality into your application while maintaining PCI compliance.

Overview​

DMG Charge SDK offers two primary integration methods beyond the standard iframe implementation:

  1. Redirect Method: Redirects the customer to a DataMesh-hosted payment page and returns them to your site after payment completion.
  2. Popup Method: Opens the payment interface in a popup window while keeping the customer on your site.

Both methods help maintain PCI compliance by ensuring sensitive payment data is handled on DataMesh-secured environments.

Redirect SDK Setup​

The redirect method navigates customers away from your website to a DataMesh-hosted payment page. After completing the payment, customers are redirected back to your specified return URL.

Implementation Steps​

  1. Go into the Merchant Dashboard
  2. In the left side, click "Payment Configuration"
  3. Go into the configuration that is implemented onto your site
  4. Under "One Time Password", select the type of redirection you want to implement, either "Automatic Redirect" or "Click to Redirect"
  5. if "Automatic Redirect" has been selected, then you'll need to specify the "Success Payment Redirect URL" and "Unsuccessful Payment Redirection URL" URL's.

Handling the Return​

The Redirect flow doesnt occur until the SDK has been loaded and at finalization of payment.

When customers are redirected back to your site, the return URL includes query parameters with the payment result:

https://your-website.com/payment-complete?status=completed&charge_id=<uuid>&order_id=<uuid>&config_id=<uuid>
ParameterDescription
statuscompleted if the payment was successful; otherwise the charge status describing the failure.
charge_idThe charge that was processed.
order_idThe order the charge belongs to — as passed when the SDK was mounted.
config_idThe payment configuration used — as passed when the SDK was mounted.

Use these parameters to render the customer-facing result page only. Confirm the actual payment outcome on your backend via the charge webhook and GET /charge/{charge_id} — the customer may close the window or lose connectivity before the redirect fires. See Error Handling & Timeouts.

The popup method opens the payment interface in a new window while keeping the customer on your website.

To address challenges with One-Time Password (OTP) screens, particularly issues with popup blockers and off-view tabs, we provide the ability to click a button within the SDK to load the OTP / navigate to the OTP screen.

Click-To-Popup OTP​

This feature provides a button on the payment page that allows customers to manually trigger the OTP popup if it does not appear automatically.

The Click-To-Popup feature is automatically included in the SDK. When a payment requires OTP verification, the SDK will display a button that allows users to manually open or re-focus the OTP window.

How It Works​

  1. User initiates a payment that requires OTP verification
  2. The SDK shows a "Payment pending authorization..." screen
  3. If the OTP popup is blocked or hidden, the user can click the "Open OTP" button
  4. The button will either open a new OTP window or bring an existing one into focus
  5. After completing the OTP verification, the user returns to the payment result screen
  6. From there, if OTP was only required to finalise payment, the redirect / popup closure flow will kick in.
  7. Ultimately, will take the user back to the merchants page.

Same-Page-Redirection​

This feature redirects users directly to the bank's OTP page within the same browser tab, eliminating popup-related issues entirely.

Event Handling​

Both integration methods support event handling to track the payment status. For the popup method, you can listen to events directly. For the redirect method, you'll need to handle the return parameters.

Security Considerations​

  • Always validate the payment status on your server by checking with the DMG API
  • Never rely solely on client-side events for critical business logic
  • Implement proper CSRF protection for your return URLs
  • Use HTTPS for all payment-related communications

Troubleshooting​

Common Issues​

  1. Popup Blocked: Modern browsers may block popups. Ensure the popup is triggered by a user action (like a button click). If popups are still blocked, consider using the Click-To-Popup OTP feature or Same-Page-Redirection.

  2. OTP Window Not Visible: If the OTP window opens but is not visible to the user (e.g., behind other windows or in a different tab), use the Click-To-Popup OTP feature to allow users to manually bring it into focus.

  3. Return URL Not Working: Verify that your return URL is properly URL-encoded and is an absolute URL (starts with http:// or https://).

  4. Event Listeners Not Firing: Make sure event listeners are set up before initiating the payment flow.

For additional support, contact DMG technical support.