Help

2 min read

Communication

The Web Checkout feature has been built to work with the JS Bridge.

Cookies

The web bridge uses three cookies to configure itself:

  • poq.webcheckout.platform: The platform to determine the communication method.
  • poq.webcheckout.version: The version to fetch the bridge and determine the communication method.
  • poq.webcheckout.integrity: The checksum to fetch the bridge.

Message Format

The web bridge sends messages in the following JSON object format:

{ event: "event-name", data: { ... } }

The data parameter can be null or any JSON object. The event identifies the event name.

The bridge can be used to send custom events and easily intercepted by any web view.

Initialisation

For the app to communicate with the website the webpage must first load the JS bridge. The latest version of the bridge looks for the PoqVersion cookie which is injected by the app to decide which version to load.

  1. The user initiates Web Checkout (usually from the Cart).
  2. The app calls the Checkout API to fetch cookies and the checkout URL.
  3. The app injects the Cookies and sets up the webview.
  4. The app builds and presents the webview. The checkout page begins loading.
  5. The webpage runs the Poq JS Bridge loading script which uses the version cookie to download an appropriate version.
  6. The webpage is ready to communicate with the app.

flow jsbridge setup

Updating the Order Object

As the user completes checkout they are likely to change parts of the order such as delivery method and cost. If you have followed the JS Bridge docs the webpage can communicate these changes with the app by sending order events.

  1. The user selects a delivery option.
  2. The webpage instructs the JS Bridge to send the order event to the app.
  3. The JS Bridge submits a hidden form which is observed by the app.
  4. The app reads the form's payload to update it's state with the latest order object.
  5. The app now knows the latest order information.

flow update order

Payment Complete

Once the user has purchased their order and the website completes processing the webpage must notify the app. To do this the webpage should instruct the JS Bridge to send the paymentcompleted event.

  1. The user purchases their order.
  2. The website processes the order and navigates to an order summary page.
  3. The order summary page should load the JS Bridge following the same process as stated in Initialisation.
  4. The webpage instructs the JS Bridge to send the paymentcompleted event with the order to the app.
  5. The JS Bridge submits a hidden form which is observed by the app.
  6. The app reads the form's payload to update it's state with the complete order object.
  7. The app calls the Checkout API to complete the order (clear the Cart).
  8. The app sends the OrderSuccessful analytics event and clears the Cart.
  9. Web checkout is complete at this point but the user remains on the order summary webview.

flow payment complete

Close the Webview

Usually following payment completion the user may be presented a Continue Shopping button. For this the webpage is usually slightly tailored for the app so that the button instructs the JS Bridge to close the webview.

  1. The user taps the Continue Shopping button.
  2. The buttons action on the webpage instructs the JS Bridge to send the closewebview event.
  3. The JS Bridge submits a hidden form which is observed by the app with no payload.
  4. The app reads the form's destination URL as the closewebview event name.
  5. The app dismisses the webview which ends the Web Checkout flow.

flow continue shopping

Errors

At any point, if an error occurs on the webpage, the webpage can instruct the JS Bridge to send an error as part of the payload. The app will present an alert displaying the error.