Migrating to Web Checkout v7

In JS Bridge v6 and below, Poq used a bespoke implementation to create Apple Pay buttons that worked natively in an iOS web view. Apple blocked the use of Apple Pay on the Web due to potential security issues of using evaluateJavaScript script injection in WKWebView.

From Poq Platform 19.1 on iOS and JS Bridge v7 onwards, Poq have implemented methods that allow native Apple Pay buttons to operate in the Poq Web Checkout process by communicating with your website via cookies and form requests.

1. Enable Apple Pay on the Web

If you haven't enabled Apple Pay for users on Safari already, implement Apple Pay on the Web.

2. Update the JavaScript snippet

To migrate your web checkout, update the JavaScript snippet to the following:

<script>
    !function(p,o,q){var n=p.PoqWebCheckout={q:[]},i=["options","send","on","destroy"];function r(e,a){var n=o.createElement(q);q=o.getElementsByTagName(q)[0],n.src=["https://assets.poq.io/web-checkout",e,"min.js"].filter(function(e){return!!e}).join("."),n.async=1,n.crossOrigin="anonymous",a&&(n.integrity=a),q.parentNode.insertBefore(n,q)}function a(e){var a;return(null===(a=document.cookie.match("(^|;)\\s*".concat("poq.webcheckout."+e,"\\s*=\\s*([^;]+)")))||void 0===a?void 0:a.pop())||""}i.forEach(function(e){n[e]=function(){n.q.push([e,arguments])},n[i[0]]=function(e){e.debug&&r("",""),n.q.push([i[0],[e]])}}),p.poqWebCheckout={postMessage:function(e,a){"bridgesettings"===e&&(a=JSON.parse(a),n.q.push([i[0],[a]]),r(a.version,a.integrity))}};var c="{\"name\":\"ping\"}";p.android?p.android.postMessage(c):"ios"===a("platform")?r(a("version"),a("integrity")):p.webkit&&p.webkit.messageHandlers.poqWebCheckout.postMessage(c)}(window,document,"script")
</script>

This new version of the snippet will check whether it is in a Poq app via cookies. It is also backwards compatible with Poq Platform 19.0 and below using JavaScript injection, so you don't need to worry about feature flagging for app release.

3. Remove applepayauthorized event listener and poq-apple-pay-container

Replace the applepayauthorized event listener with the paymentcompleted event that you have probably already have implemented for non-apple pay transactions. When the Apple Pay on the Web transaction has completed, call paymentcompleted to complete the transaction normally.

Remove the container that holds the Poq Apple Pay button from your web checkout page.