Unified webview payment

Use your web checkout in a mobile app

Unify payments from all your channels (physical, online, mobile, etc.) on a single centralized web page.

To integrate our Checkout into mobile applications, use a webView component.

How it works

WebView is a component that allows embedding web content within a native mobile application.

Users access the payment flow directly within the app, without redirection to an external browser.

The payment page loads in the webView, maintaining the experience within the application environment.

Usually, you can use DEUNA's Web SDK on your sites to display payment widgets.

When the website page is loaded in a WebView, some payment flows may not work correctly due to the inherent restrictions of a WebView on iOS and Android.

Common restrictions

A WebView may have the following restrictions:

• JavaScript execution: By default, JavaScript execution may be blocked. This can cause problems when loading your website content, including payment widgets. To ensure full functionality, it's crucial to explicitly enable JavaScript in your WebView configuration.
• Redirections to External Links: Redirections to external links, either through window.open or by clicking a link, are blocked by default. This is a critical limitation for payment flows that require the user to be redirected to an external page to complete the transaction. Common examples include:
  • 3D Secure Authentication (3DS): When the user's bank requires additional verification.
  • Alternative Payment Methods (APMs): Payments that are processed through external platforms (e.g., PayPal, online banking services).

    📘

    It is the developer's responsibility to intercept these redirections and handle them appropriately. This could involve opening the link in the device's default browser or implementing a custom URL handling mechanism within the application

Communication between Web Checkout and the App

It's necessary to implement a bidirectional communication mechanism, such as PostMessages or WebSockets, to exchange data between your Web Checkout and the mobile application.

Requisites

Configure the following functionalities in your application:

1. WebView Configuration: Your WebView must be able to intercept redirection URLs, such as those used in 3DS flows, APMs, and other services.
2. Communication between Web Checkout and the App: Implement a bidirectional communication mechanism to exchange data between your Web Checkout and the mobile application. Use PostMessages or WebSockets.

Custom WebView implementation

In the following video, we demonstrate how we integrate a Web Checkout into an iOS app using a WebView:

The website explore.deuna.io is loaded, which uses DEUNA's Web SDK to render the widgets.

Communication between the Web Checkout and the iOS app is managed through a custom WebView and PostMessages.

You can access the complete source code of our custom WebView solution for each platform in the following repositories:

• iOS See example in: Examples/checkout-web-wrapper
• Android See example in: examples/checkout-web-wrapper

Communication between Web Checkout and mobile apps

The site explore.deuna.io uses a similar approach to the following to establish communication between the web checkout and mobile applications:

/**
 * Sends messages from Web Checkout to native WebView
 * @param {string} callbackName - Callback name (e.g: 'onSuccess')
 * @param {Object} data - Data to transmit
 * @param {string} widgetType - Widget type (e.g: 'paymentWidget')
 */
const sendMessage = (callbackName, data, widgetType) => {
  const payload = JSON.stringify({ callbackName, data, widgetType });

  // Platform-specific handlers
  window.webkit?.messageHandlers.deunaPayment?.postMessage(payload); // iOS
  window.deunaPayment?.postMessage(payload);                        // Android
  window.ReactNativeWebView?.postMessage(payload);                  // React Native
};

// DEUNA Payment Widget initialization
await DeunaSDK.initPaymentWidget({
  orderToken: "<DEUNA_ORDER_TOKEN>",
  callbacks: {
    onSuccess: (data) => {
      sendMessage('onSuccess', data, 'paymentWidget');
    },
    onError: (data) => {
      sendMessage('onError', data, 'paymentWidget');
    },
    onEventDispatch: (event, data) => {
      sendMessage('onEventDispatch', { event, data }, 'paymentWidget');
    },
  },
});