Help

2 min read

Enable payments on your app

Your Poq app uses a webview to take payment for your customers’ orders. This is a screen showing the payment page from your website within the app. Customers don't notice any change as they move between native and web payment screens.

To make this process work, your Poq app needs to be able to connect and interact with your web payment screens. You also need to make sure the payment screen displays correctly when it is being accessed through the app.

There are two implementation stages that make this possible:

  • Cart transfer. This is the process of transferring the contents of your customer’s cart in the app to a web view.
  • Web checkout. This is the process of payment on your website, seen by the customer through the app.

The payment flow

The checkout process is fast and seamless for customers, but there are multiple stages that take place between your app and your payment website. At a high level, the flow looks like this:

Cart transfer phase

cart transfer icon

The Cart transfer phase initiates the web checkout view for your customers in three stages:

  1. Your customer taps Checkout in the Cart screen, triggering the Cart Transfer API. Via the Poq platform, your app makes a request to the payment page of your website.
  2. Just as when someone shops on your website, the contents and details of your customer’s cart are transferred to a checkout screen on your website.
  3. Your app uses the URL of this web page to show your website’s checkout page to your customer.

Learn how to implement Cart transfer.

Web checkout phase

web checkout icon

Now that there is a connection between your website and your customer’s app, your customer can follow the checkout process, just as they would on your website:

  1. The connection and flow of data is sustained by the Poq JS Bridge. The bridge is established by a small snippet of JS code that you need to add into the HTML of your web payment screens.
  2. When the order is complete, a message is sent to the app to close the webview, and the connection between the app and payment web page is ended.
  3. The web checkout screen is also where you can add additional checkout methods, like Apple Pay. For other payment methods, you may need a customisation, so talk to your contact at Poq.

Learn how to implement the JS Bridge and enable the webview

Next steps

The next step is to start the integration process between your payment web payment screens and your app. Use the docs below to get started:

  1. Cart transfer
  2. Web checkout