1 min read
Web Checkout
Web Checkout is a core feature of some apps which presents your existing website checkout flow. Navigation and events are handled via communication from our JavaScript (JS) bridge which must be added to your website.
Web views and Web Checkout have had a major rewrite in SS25 to make them much easier to work with. Bridges can be easily added to any webview allowing for communication from web to the app.
Deeplinks
# Web Checkout (AW24+)checkout
Unlike other features Web Checkout is always presented modally in its own navigation controller.
Set Up
Web Checkout doesn't require any developer set up. The checkout URL is returned from the BE along with any cookies to persist the user to web.
Website
Web Checkout requires changes to your website to include our JS bridge to communicate with the app.
Additionally, Apple requires that, when using ATT, you remove any Marketing Cookies opt-in from cookie banners. The app user-agent can be used to determine app traffic for this.
- Have a web developer follow these JS bridge set up steps.
- Read and understand the JS bridge communication.
JS Bridge
Poq developed a lightweight JavaScript bridge to add to checkout webpages to communicate with the app. The code found here has two modes of operation based on cookies injected by the app.
JavaScript
This is the preferred method of communication but was previously blocked by Apple's ApplePay shenanigans (which no longer affect apps). This essentially boils down to the following line of code using a message handler:
window.webKit.messageHandlers.poqWebCheckout.postMessage({name:"...",data:{...}})
Forms
To work around the Apple's previous ApplePay shenanigans (which no longer affect apps) we introduced an alternate mode of communication using forms. The bridge submits web forms to communicate with the app where the app intercepts and decodes the submissions.
ApplePay Shenanigans
Around iOS 13, Apple decided to block ApplePay when using JavaScript communication. This was reverted shortly after and no longer affects ApplePay via WebViews in apps.
History
- SS25: Rewrite to massively reduce technical solution using SwiftUI.
- v19: Added forms communication to circumvent ApplePay issues.