{
    "componentChunkName": "component---src-templates-article-index-js",
    "path": "/support/web-checkout-js-bridge",
    "result": {"data":{"mdx":{"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Enable web checkout with the JS Bridge\",\n  \"published\": true,\n  \"sortOrder\": 2\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar CodeBlockWrap = makeShortcode(\"CodeBlockWrap\");\nvar LanguageTabs = makeShortcode(\"LanguageTabs\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Web checkout on your app is enabled by the Poq JS Bridge. This is a JavaScript snippet that, when added to your web-based checkout, opens up communication between your web page and the Poq app on your customer\\u2019s device.\"), mdx(\"p\", null, \"The bridge allows data about your customer\\u2019s order to flow seamlessly and securely between the payment screens of your website and your app.\"), mdx(\"p\", null, \"To complete this process you should also refer to the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/support/web-checkout-js-bridge/web-checkout-js\"\n  }, \"Poq Web Checkout API documentation\"), \" for details on the transfer of data between your app and your website.\"), mdx(\"h2\", {\n    \"id\": \"outline-of-requirements\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#outline-of-requirements\",\n    \"aria-label\": \"outline of requirements permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Outline of requirements\"), mdx(\"p\", null, \"To enable web checkout, you need to complete the following steps:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Set up your checkout pages to support mobile view.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Ensure your website can identify requests from your Poq app.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Add a 'Continue Shopping' button to your web checkout screen that enables your customers to return to the app native screens once they have completed checkout.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Add the Poq JavaScript snippet to your web checkout pages. This includes setting up the API call to return transaction data to your app.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Test your implementation in debug mode.\")), mdx(\"h2\", {\n    \"id\": \"set-up-your-checkout-pages-to-support-a-mobile-webview\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#set-up-your-checkout-pages-to-support-a-mobile-webview\",\n    \"aria-label\": \"set up your checkout pages to support a mobile webview permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Set up your checkout pages to support a mobile webview\"), mdx(\"p\", null, \"To ensure your customers get a clean checkout experience, you need to ensure that the checkout screens:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Can be displayed on mobile screen sizes\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Can display an 'Out of stock' warning if products in the customer's cart become unavailable during the checkout process.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Do not display a header with your brand, logo, or navigation to other parts of your website.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Do not display any other material that is not relevant to the checkout process.\")), mdx(\"h2\", {\n    \"id\": \"identify-requests-from-your-poq-app\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#identify-requests-from-your-poq-app\",\n    \"aria-label\": \"identify requests from your poq app permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Identify requests from your Poq app\"), mdx(\"p\", null, \"To allow you optimise the checkout page (e.g. remove headers and footers), your Poq app will construct the request to the checkout page with an additional identifier in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"User-Agent\"), \" header in the following format:\"), mdx(\"p\", null, \"On iOS this is the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.apple.com/documentation/bundleresources/information_property_list/cfbundledisplayname\"\n  }, \"bundle-name\"), \" of your app. This usually tends to be \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<Client-Name> - Live\"), \" but do confirm the actual string with your project team.\"), mdx(\"p\", null, \"On Android this is the App Name.\"), mdx(\"p\", null, \"An example for the out-of-the-box iOS user-agent is as follows:\"), mdx(CodeBlockWrap, {\n    mdxType: \"CodeBlockWrap\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-text\"\n  }, \"Mozilla/5.0 (iPhone; CPU iPhone OS 16_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) PoqDemoApp - Live/14 (iPhone; iOS/16.2) CFNetwork/1402.0.8 Darwin/22.6.0 poq.ios/21.0.4\\n\"))), mdx(\"p\", null, \"An example for the out-of-the-box Android user-agent is as follows:\"), mdx(CodeBlockWrap, {\n    mdxType: \"CodeBlockWrap\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-text\"\n  }, \"Mozilla/5.0 (Linux; Android 14; sdk_gphone64_arm64 Build/UE1A.230829.036.A2; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/126.0.6478.186 Mobile Safari/537.36 PoqDemoApp/2024.SS-1.0\\n\"))), mdx(\"p\", null, \"We recommend detecting this change on the server-side and changing the template or view used to render the web payment screens. You can also use JavaScript once the page has been loaded to hide elements if you are restricted.\"), mdx(LanguageTabs, {\n    languages: {\n      cs: \"if (Request.UserAgent.IndexOf(\\\"PoqDemoApp\\\") > -1)\\n{\\n  // Use mobile webview template\\n}\",\n      php: \"if (strpos($_SERVER['HTTP_USER_AGENT'], 'PoqDemoApp') !== false) {\\n  // Use mobile webview template\\n}\",\n      js: \"window.addEventListener('DOMContentLoaded', () => {\\n  if (navigator.userAgent.indexOf('PoqDemoApp') > -1) {\\n      // Hide header\\n    }\\n  });\\n});\"\n    },\n    mdxType: \"LanguageTabs\"\n  }), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"em\", {\n    parentName: \"strong\"\n  }, \"Note:\")), \" The bundle name on iOS and the App Name on Android are configured by your development team and can be configured differently. In which case both strings would need to be checked for on your webpage to optimise for app. Alternatively these user-agents can easily be customised on either platform to adopt a pattern that is consistent across both platforms.\"), mdx(\"h2\", {\n    \"id\": \"create-a-continue-shopping-button\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#create-a-continue-shopping-button\",\n    \"aria-label\": \"create a continue shopping button permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Create a continue shopping button\"), mdx(\"p\", null, \"Add a button allowing your customer to return to the native screens in your app, once they have completed checked out.\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"750px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ff4194386bbaa69dcf5b1615ea935f87/89048/order-complete.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"171.27659574468086%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/ff4194386bbaa69dcf5b1615ea935f87/7b30e/order-complete.webp 188w\", \"/static/ff4194386bbaa69dcf5b1615ea935f87/f3a60/order-complete.webp 375w\", \"/static/ff4194386bbaa69dcf5b1615ea935f87/08b4d/order-complete.webp 750w\", \"/static/ff4194386bbaa69dcf5b1615ea935f87/5543b/order-complete.webp 1125w\", \"/static/ff4194386bbaa69dcf5b1615ea935f87/a3537/order-complete.webp 1242w\"],\n    \"sizes\": \"(max-width: 750px) 100vw, 750px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/ff4194386bbaa69dcf5b1615ea935f87/4dcb9/order-complete.png 188w\", \"/static/ff4194386bbaa69dcf5b1615ea935f87/5ff7e/order-complete.png 375w\", \"/static/ff4194386bbaa69dcf5b1615ea935f87/1d69c/order-complete.png 750w\", \"/static/ff4194386bbaa69dcf5b1615ea935f87/78797/order-complete.png 1125w\", \"/static/ff4194386bbaa69dcf5b1615ea935f87/89048/order-complete.png 1242w\"],\n    \"sizes\": \"(max-width: 750px) 100vw, 750px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/ff4194386bbaa69dcf5b1615ea935f87/1d69c/order-complete.png\",\n    \"alt\": \"Web checkout screen with continue shopping button\",\n    \"title\": \"Web checkout screen with continue shopping button\",\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"Web checkout screen with continue shopping button\"), \"\\n  \")), mdx(\"h2\", {\n    \"id\": \"integrate-the-poq-web-checkout-javascript-into-your-website\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#integrate-the-poq-web-checkout-javascript-into-your-website\",\n    \"aria-label\": \"integrate the poq web checkout javascript into your website permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Integrate the Poq Web Checkout JavaScript into your website\"), mdx(\"p\", null, \"To integrate the JS bridge into your checkout pages:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Add the following script before the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"</body>\"), \" tag on your website\\u2019s checkout pages. This snippet must be loaded only once per page:\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"pre\", {\n    parentName: \"p\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<script>\\n    !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\\\")\\n</script>\\n\")))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"When the checkout has been completed and the order has been placed, send the order to your Poq app in the following format:\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"pre\", {\n    parentName: \"p\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"PoqWebCheckout.send('paymentcompleted', {\\n  order: {\\n    total: 13.0,\\n    orderId: '0776620100',\\n    subTotal: 10.0,\\n    delivery: 5.0,\\n    discount: 2.0,\\n    currency: 'GBP'\\n  }\\n});\\n\"))))), mdx(\"p\", null, \"In this request, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"total\"), \" is required, other fields are optional. See the Order schema in \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/support/web-checkout-js-bridge/web-checkout-js#schemas\"\n  }, \"Poq Web Checkout API documentation for full details\"), \".\"), mdx(\"p\", null, \"When the user wants to continue shopping, for example by tapping a button, close the WebView using:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"PoqWebCheckout.send('closewebview');\\n\")), mdx(\"h2\", {\n    \"id\": \"test-your-implementation\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#test-your-implementation\",\n    \"aria-label\": \"test your implementation permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Test your implementation\"), mdx(\"p\", null, \"Poq will provide you with a development build of your app before you start implementing these changes. This will allow you to inspect the webview in web browser developer tools and debug the calls made between your web payment screens and the app.\"), mdx(\"p\", null, \"Once you have the build and you are making the necessary changes to your website, you can test them by enabling debug mode and checking the console in Google Chrome for Android builds or Safari for iOS builds.\"), mdx(\"p\", null, \"To set up and test using debuggable mode:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Talk to your contact at Poq to request a development version of your iOS or Android app.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Ensure you are working in the latest version of your browser, with developer tools enabled, when testing the debuggable app.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Enable the Poq JS bridge debug mode in your web view by adding this line of code below your Poq checkout bridge JS snippet:\\n\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"PoqWebCheckout.options({ debug: true });\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Make sure your device with the debuggable version of your app is connected to your computer.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Open your browser\\u2019s developer console.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Go through the stages of checking out on the connected debuggable app.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Check the JavaScript console for log messages.\")), mdx(\"p\", null, \"A typical JavaScript console log during the checkout process looks like this:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-text\"\n  }, \"[PoqWebCheckout] Running in debug mode\\n[PoqWebCheckout] Setting order object: { ... }\\n[PoqWebCheckout] Sending event: paymentcompleted { order: { ... } }\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"Web checkout on your app is enabled by the Poq JS Bridge. This is a JavaScript snippet that, when added to your web-based checkout, opens up…","fields":{"lastModified":"2026-04-10 12:41:16 +0100\n","slug":"/support/web-checkout-js-bridge"},"frontmatter":{"date":null,"excerpt":null,"published":true,"title":"Enable web checkout with the JS Bridge"},"headings":[{"depth":2,"value":"Outline of requirements"},{"depth":2,"value":"Set up your checkout pages to support a mobile webview"},{"depth":2,"value":"Identify requests from your Poq app"},{"depth":2,"value":"Create a continue shopping button"},{"depth":2,"value":"Integrate the Poq Web Checkout JavaScript into your website"},{"depth":2,"value":"Test your implementation"}],"rawBody":"---\ntitle: Enable web checkout with the JS Bridge\npublished: true\nsortOrder: 2\n---\n\nWeb checkout on your app is enabled by the Poq JS Bridge. This is a JavaScript snippet that, when added to your web-based checkout, opens up communication between your web page and the Poq app on your customer’s device.\n\nThe bridge allows data about your customer’s order to flow seamlessly and securely between the payment screens of your website and your app.\n\nTo complete this process you should also refer to the [Poq Web Checkout API documentation](/support/web-checkout-js-bridge/web-checkout-js) for details on the transfer of data between your app and your website.\n\n## Outline of requirements\n\nTo enable web checkout, you need to complete the following steps:\n\n1. Set up your checkout pages to support mobile view.\n2. Ensure your website can identify requests from your Poq app.\n3. Add a 'Continue Shopping' button to your web checkout screen that enables your customers to return to the app native screens once they have completed checkout.\n4. Add the Poq JavaScript snippet to your web checkout pages. This includes setting up the API call to return transaction data to your app.\n5. Test your implementation in debug mode.\n\n## Set up your checkout pages to support a mobile webview\n\nTo ensure your customers get a clean checkout experience, you need to ensure that the checkout screens:\n\n- Can be displayed on mobile screen sizes\n- Can display an 'Out of stock' warning if products in the customer's cart become unavailable during the checkout process.\n- Do not display a header with your brand, logo, or navigation to other parts of your website.\n- Do not display any other material that is not relevant to the checkout process.\n\n## Identify requests from your Poq app\n\nTo allow you optimise the checkout page (e.g. remove headers and footers), your Poq app will construct the request to the checkout page with an additional identifier in the `User-Agent` header in the following format:\n\nOn iOS this is the [bundle-name](https://developer.apple.com/documentation/bundleresources/information_property_list/cfbundledisplayname) of your app. This usually tends to be `<Client-Name> - Live` but do confirm the actual string with your project team.\n\nOn Android this is the App Name.\n\nAn example for the out-of-the-box iOS user-agent is as follows:\n<CodeBlockWrap>\n\n```text\nMozilla/5.0 (iPhone; CPU iPhone OS 16_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) PoqDemoApp - Live/14 (iPhone; iOS/16.2) CFNetwork/1402.0.8 Darwin/22.6.0 poq.ios/21.0.4\n```\n\n</CodeBlockWrap>\n\nAn example for the out-of-the-box Android user-agent is as follows:\n<CodeBlockWrap>\n\n```text\nMozilla/5.0 (Linux; Android 14; sdk_gphone64_arm64 Build/UE1A.230829.036.A2; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/126.0.6478.186 Mobile Safari/537.36 PoqDemoApp/2024.SS-1.0\n```\n\n</CodeBlockWrap>\n\n\nWe recommend detecting this change on the server-side and changing the template or view used to render the web payment screens. You can also use JavaScript once the page has been loaded to hide elements if you are restricted.\n\n<LanguageTabs\n  languages={{\n    cs: `if (Request.UserAgent.IndexOf(\"PoqDemoApp\") > -1)\n{\n  // Use mobile webview template\n}`,\n    php: `if (strpos($_SERVER['HTTP_USER_AGENT'], 'PoqDemoApp') !== false) {\n  // Use mobile webview template\n}`,\n    js: `window.addEventListener('DOMContentLoaded', () => {\n  if (navigator.userAgent.indexOf('PoqDemoApp') > -1) {\n      // Hide header\n    }\n  });\n});`\n  }}\n/>\n\n***Note:*** The bundle name on iOS and the App Name on Android are configured by your development team and can be configured differently. In which case both strings would need to be checked for on your webpage to optimise for app. Alternatively these user-agents can easily be customised on either platform to adopt a pattern that is consistent across both platforms.\n\n## Create a continue shopping button\n\nAdd a button allowing your customer to return to the native screens in your app, once they have completed checked out.\n\n![Web checkout screen with continue shopping button](./assets/order-complete.png)\n\n## Integrate the Poq Web Checkout JavaScript into your website\n\nTo integrate the JS bridge into your checkout pages:\n\n1. Add the following script before the `</body>` tag on your website’s checkout pages. This snippet must be loaded only once per page:\n\n    `embed:snippets/web-checkout-snippet.html`\n\n2. When the checkout has been completed and the order has been placed, send the order to your Poq app in the following format:\n\n    `embed:snippets/paymentcompleted.js`\n\nIn this request, `total` is required, other fields are optional. See the Order schema in [Poq Web Checkout API documentation for full details](/support/web-checkout-js-bridge/web-checkout-js#schemas).\n\nWhen the user wants to continue shopping, for example by tapping a button, close the WebView using:\n\n```js\nPoqWebCheckout.send('closewebview');\n```\n\n## Test your implementation\n\nPoq will provide you with a development build of your app before you start implementing these changes. This will allow you to inspect the webview in web browser developer tools and debug the calls made between your web payment screens and the app.\n\nOnce you have the build and you are making the necessary changes to your website, you can test them by enabling debug mode and checking the console in Google Chrome for Android builds or Safari for iOS builds.\n\nTo set up and test using debuggable mode:\n\n1. Talk to your contact at Poq to request a development version of your iOS or Android app.\n2. Ensure you are working in the latest version of your browser, with developer tools enabled, when testing the debuggable app.\n3. Enable the Poq JS bridge debug mode in your web view by adding this line of code below your Poq checkout bridge JS snippet:\n   `PoqWebCheckout.options({ debug: true });`\n4. Make sure your device with the debuggable version of your app is connected to your computer.\n5. Open your browser’s developer console.\n6. Go through the stages of checking out on the connected debuggable app.\n7. Check the JavaScript console for log messages.\n\nA typical JavaScript console log during the checkout process looks like this:\n\n```text\n[PoqWebCheckout] Running in debug mode\n[PoqWebCheckout] Setting order object: { ... }\n[PoqWebCheckout] Sending event: paymentcompleted { order: { ... } }\n```\n","timeToRead":3}},"pageContext":{"id":"a0757bad-8d23-57c1-bb7e-eb941413fddd","breadcrumb":{"location":"/support/web-checkout-js-bridge","crumbs":[{"pathname":"/","crumbLabel":"Home"},{"pathname":"/support","crumbLabel":"support"},{"pathname":"/support/web-checkout-js-bridge","crumbLabel":"web-checkout-js-bridge"}]}}},
    "staticQueryHashes": ["2937047697","3649515864","63159454"]}