{
    "componentChunkName": "component---src-templates-article-index-js",
    "path": "/support/web-checkout-js-bridge/custom-events",
    "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\": \"Send custom events from the Web Checkout JS bridge\",\n  \"published\": true,\n  \"sortOrder\": 4\n};\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, \"As well as being used for the payment process, the JS Bridge can be used to transfer custom events between a web view and your app. \"), mdx(\"h2\", {\n    \"id\": \"send-custom-data-in-platform-events\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#send-custom-data-in-platform-events\",\n    \"aria-label\": \"send custom data in platform 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  }))), \"Send custom data in platform events\"), mdx(\"p\", null, \"All events between your Poq app and the Web Checkout JS bridge support an extra \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"customData\"), \" property which can contain information that you require to be passed through to your customisations made using the Poq SDK.\"), mdx(\"p\", null, \"The following snippet sends extra data containing the collection information for the user.\"), 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  },\\n  customData: {\\n    nearestStore: '0141',\\n    collectionDate: '2019/01/01'\\n  }\\n});\\n\")), mdx(\"h2\", {\n    \"id\": \"send-custom-events\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#send-custom-events\",\n    \"aria-label\": \"send custom 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  }))), \"Send custom events\"), mdx(\"p\", null, \"The Poq web checkout JS bridge also supports sending completely custom events that you can develop with the Poq SDK.\"), mdx(\"p\", null, \"The following snippet sends a custom event containing custom data.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"PoqWebCheckout.send('mycustomevent', {\\n  customData: {\\n    analyticsEvent: 'cta_clicked',\\n    userId: '26b5abba-b597-4209-8187-6eda501b0663'\\n  }\\n})\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"As well as being used for the payment process, the JS Bridge can be used to transfer custom events between a web view and your app.  Send…","fields":{"lastModified":"2026-04-10 12:41:16 +0100\n","slug":"/support/web-checkout-js-bridge/custom-events"},"frontmatter":{"date":null,"excerpt":null,"published":true,"title":"Send custom events from the Web Checkout JS bridge"},"headings":[{"depth":2,"value":"Send custom data in platform events"},{"depth":2,"value":"Send custom events"}],"rawBody":"---\ntitle: Send custom events from the Web Checkout JS bridge\npublished: true\nsortOrder: 4\n---\n\nAs well as being used for the payment process, the JS Bridge can be used to transfer custom events between a web view and your app. \n\n## Send custom data in platform events\n\nAll events between your Poq app and the Web Checkout JS bridge support an extra `customData` property which can contain information that you require to be passed through to your customisations made using the Poq SDK.\n\nThe following snippet sends extra data containing the collection information for the user.\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  },\n  customData: {\n    nearestStore: '0141',\n    collectionDate: '2019/01/01'\n  }\n});\n```\n\n## Send custom events\n\nThe Poq web checkout JS bridge also supports sending completely custom events that you can develop with the Poq SDK.\n\nThe following snippet sends a custom event containing custom data.\n\n```js\nPoqWebCheckout.send('mycustomevent', {\n  customData: {\n    analyticsEvent: 'cta_clicked',\n    userId: '26b5abba-b597-4209-8187-6eda501b0663'\n  }\n})\n```\n","timeToRead":1}},"pageContext":{"id":"18af9ea2-2907-5cee-8bd9-8e5f0c42bc15","breadcrumb":{"location":"/support/web-checkout-js-bridge/custom-events","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/custom-events","crumbLabel":"custom-events"}]}}},
    "staticQueryHashes": ["2937047697","3649515864","63159454"]}