{
    "componentChunkName": "component---src-templates-article-index-js",
    "path": "/support/web-checkout-js-bridge/web-checkout-js",
    "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\": \"API for Poq web checkout JavaScript library\",\n  \"published\": true,\n  \"sortOrder\": 3\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 Alert = makeShortcode(\"Alert\");\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, \"This document contains the public-facing API of the Poq web checkout JavaScript library. It lists methods made available on \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"window.PoqWebCheckout\"), \" and details of the events that are sent between your web page and your Poq app.\"), mdx(\"h2\", {\n    \"id\": \"methods\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#methods\",\n    \"aria-label\": \"methods 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  }))), \"Methods\"), mdx(\"h3\", {\n    \"id\": \"poqwebcheckoutoptionsoptions\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#poqwebcheckoutoptionsoptions\",\n    \"aria-label\": \"poqwebcheckoutoptionsoptions 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  }))), mdx(\"inlineCode\", {\n    parentName: \"h3\"\n  }, \"PoqWebCheckout.options(options)\")), mdx(\"p\", null, \"Provide an object to configure the web checkout bridge. Nested options are in dot notation.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Name\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Description\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"applePay.className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"'apple-pay-button'\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The class name to use for Apple Pay buttons.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"applePay.containerClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"'poq-apple-pay-container'\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The class name of the container to inject Apple Pay buttons into.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"debug\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bool\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"false\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Run the bridge in debug mode to test your use of Poq web checkout JS. It will display logs and mock the Apple Pay process.\")))), mdx(\"h3\", {\n    \"id\": \"poqwebcheckoutsendeventname-payload\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#poqwebcheckoutsendeventname-payload\",\n    \"aria-label\": \"poqwebcheckoutsendeventname payload 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  }))), mdx(\"inlineCode\", {\n    parentName: \"h3\"\n  }, \"PoqWebCheckout.send(eventName, payload?)\")), mdx(\"p\", null, \"Sends an event to your Poq app.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"order\"))), mdx(\"p\", null, \"Update the order object. This must be kept up to date if you are using Apple Pay.\"), mdx(Alert, {\n    type: \"info\",\n    mdxType: \"Alert\"\n  }, mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"total\"), \" is required, other fields are optional. See Order schema below.\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"PoqWebCheckout.send('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\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"paymentcompleted\"))), mdx(\"p\", null, \"Once the user has completed their transaction, tell your Poq app that the user has successfully placed an order. The payload must contain the  final \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"order\"), \" object.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\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, mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"error\"))), mdx(\"p\", null, \"You can send an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"error\"), \" event, if there is an error processing the payment with your payment service provider, which will show an alert on your Poq app. This event will also hide the Apple Pay modal if active.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"PoqWebCheckout.send('error', {\\n  errorMessage: 'Payment failed. Please try again.'\\n});\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"closewebview\"))), mdx(\"p\", null, \"Close the WebView to allow the user to continue shopping in your Poq app.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"PoqWebCheckout.send('closewebview');\\n\")), mdx(\"h3\", {\n    \"id\": \"poqwebcheckoutoneventname-callback\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#poqwebcheckoutoneventname-callback\",\n    \"aria-label\": \"poqwebcheckoutoneventname callback 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  }))), mdx(\"inlineCode\", {\n    parentName: \"h3\"\n  }, \"PoqWebCheckout.on(eventName, callback)\")), mdx(\"p\", null, \"Use this to receive events from your Poq app. The callback will be called when your Poq app sends the matching event name. See: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#events\"\n  }, \"Events\"), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"PoqWebCheckout.on('applepayauthorized', paymentData => {\\n  console.log(paymentData);\\n});\\n\")), mdx(\"h3\", {\n    \"id\": \"poqwebcheckoutdestroy\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#poqwebcheckoutdestroy\",\n    \"aria-label\": \"poqwebcheckoutdestroy 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  }))), mdx(\"inlineCode\", {\n    parentName: \"h3\"\n  }, \"PoqWebCheckout.destroy()\")), mdx(\"p\", null, \"Remove the bridge with your Poq app.\"), mdx(\"h2\", {\n    \"id\": \"events\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#events\",\n    \"aria-label\": \"events 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  }))), \"Events\"), mdx(\"p\", null, \"Asynchronous events can occur during the web checkout process. Event names are lower case and the data payload is an object containing the appropriate structure.\"), mdx(\"h3\", {\n    \"id\": \"send\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#send\",\n    \"aria-label\": \"send 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  }))), \"Send\"), mdx(\"p\", null, \"You can send the following events to your Poq app using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"PoqWebCheckout.send\"), \".\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Name\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Description\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Payload\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"paymentcompleted\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Once the user has completed their transaction, tell your Poq app that the user has successfully placed an order.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"{ order }\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"error\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"If there is an error processing the payment with your payment service provider, you can show an alert on your Poq app.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"{ errorMessage }\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"closewebview\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Closes the WebView to allow the user to continue shopping in your Poq app. If this is triggered before paymentcompleted, the customer is shown a confirmation popup asking if they are sure they want to close this view. To customise this behaviour, talk to your contact at Poq.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"h2\", {\n    \"id\": \"schemas\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#schemas\",\n    \"aria-label\": \"schemas 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  }))), \"Schemas\"), mdx(\"h3\", {\n    \"id\": \"order\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#order\",\n    \"aria-label\": \"order 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  }))), \"Order\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Field\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Required\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"total\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"float\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u2713\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"orderId\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"subTotal\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"float\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"delivery\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"float\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"discount\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"float\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"currency\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"This document contains the public-facing API of the Poq web checkout JavaScript library. It lists methods made available on  window…","fields":{"lastModified":"2026-04-10 12:41:16 +0100\n","slug":"/support/web-checkout-js-bridge/web-checkout-js"},"frontmatter":{"date":null,"excerpt":null,"published":true,"title":"API for Poq web checkout JavaScript library"},"headings":[{"depth":2,"value":"Methods"},{"depth":3,"value":"PoqWebCheckout.options(options)"},{"depth":3,"value":"PoqWebCheckout.send(eventName, payload?)"},{"depth":3,"value":"PoqWebCheckout.on(eventName, callback)"},{"depth":3,"value":"PoqWebCheckout.destroy()"},{"depth":2,"value":"Events"},{"depth":3,"value":"Send"},{"depth":2,"value":"Schemas"},{"depth":3,"value":"Order"}],"rawBody":"---\ntitle: API for Poq web checkout JavaScript library\npublished: true\nsortOrder: 3\n---\n\nThis document contains the public-facing API of the Poq web checkout JavaScript library. It lists methods made available on `window.PoqWebCheckout` and details of the events that are sent between your web page and your Poq app.\n\n## Methods\n\n### `PoqWebCheckout.options(options)`\n\nProvide an object to configure the web checkout bridge. Nested options are in dot notation.\n\n| Name                        | Type   | Default                     | Description                                                                                                                             |\n| --------------------------- | ------ | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| applePay.className          | string | `'apple-pay-button'`        | The class name to use for Apple Pay buttons.                                                                                            |\n| applePay.containerClassName | string | `'poq-apple-pay-container'` | The class name of the container to inject Apple Pay buttons into.                                                                       |\n| debug                       | bool   | `false`                     | Run the bridge in debug mode to test your use of Poq web checkout JS. It will display logs and mock the Apple Pay process. |\n\n### `PoqWebCheckout.send(eventName, payload?)`\n\nSends an event to your Poq app.\n\n**`order`**\n\nUpdate the order object. This must be kept up to date if you are using Apple Pay.\n\n<Alert type=\"info\">\n\n`total` is required, other fields are optional. See Order schema below.\n\n</Alert>\n\n```js\nPoqWebCheckout.send('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\n**`paymentcompleted`**\n\nOnce the user has completed their transaction, tell your Poq app that the user has successfully placed an order. The payload must contain the  final `order` object.\n\n```js\nPoqWebCheckout.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```\n\n**`error`**\n\nYou can send an `error` event, if there is an error processing the payment with your payment service provider, which will show an alert on your Poq app. This event will also hide the Apple Pay modal if active.\n\n```js\nPoqWebCheckout.send('error', {\n  errorMessage: 'Payment failed. Please try again.'\n});\n```\n\n**`closewebview`**\n\nClose the WebView to allow the user to continue shopping in your Poq app.\n\n```js\nPoqWebCheckout.send('closewebview');\n```\n\n### `PoqWebCheckout.on(eventName, callback)`\n\nUse this to receive events from your Poq app. The callback will be called when your Poq app sends the matching event name. See: [Events](#events).\n\n```js\nPoqWebCheckout.on('applepayauthorized', paymentData => {\n  console.log(paymentData);\n});\n```\n\n### `PoqWebCheckout.destroy()`\n\nRemove the bridge with your Poq app.\n\n## Events\n\nAsynchronous events can occur during the web checkout process. Event names are lower case and the data payload is an object containing the appropriate structure.\n\n### Send\n\nYou can send the following events to your Poq app using `PoqWebCheckout.send`.\n\n| Name | Description | Payload |\n|------|-------------|---------|\n|paymentcompleted|Once the user has completed their transaction, tell your Poq app that the user has successfully placed an order.|`{ order }`|\n|error|If there is an error processing the payment with your payment service provider, you can show an alert on your Poq app.|`{ errorMessage }`|\n|closewebview|Closes the WebView to allow the user to continue shopping in your Poq app. If this is triggered before paymentcompleted, the customer is shown a confirmation popup asking if they are sure they want to close this view. To customise this behaviour, talk to your contact at Poq.||\n\n## Schemas\n\n### Order\n\n| Field      | Type   | Required |\n| ---------- | ------ | -------- |\n| `total`    | float  | ✓        |\n| `orderId`  | string |          |\n| `subTotal` | float  |          |\n| `delivery` | float  |          |\n| `discount` | float  |          |\n| `currency` | string |          |\n","timeToRead":1}},"pageContext":{"id":"b84233a6-0b56-5047-81e3-fabd38484066","breadcrumb":{"location":"/support/web-checkout-js-bridge/web-checkout-js","crumbs":[{"pathname":"/","crumbLabel":"Home"},{"pathname":"/support","crumbLabel":"support"},{"pathname":"/support/web-checkout-js-bridge","crumbLabel":"web-checkout-js-bridge"},{"pathname":"/support/web-checkout-js-bridge/web-checkout-js","crumbLabel":"web-checkout-js"}]}}},
    "staticQueryHashes": ["2937047697","3649515864","63159454"]}