Poq-Documentation

Web Checkout Integration Part 2: Web Page Setup

Important: We will set up the checkout journey and analytics tracking based on the specifications in this document. These may stop working properly if you make incompatible changes to your website.

Website

We need your website to:

Be mobile friendly
Use a publicly verifiable (i.e. not self-signed) SSL certificate. This is also required for the test environment.
Support any functionality required in your checkout process, such as capturing and applying discount codes, showing delivery methods and delivery dates
Authenticate the user when the initial request has authentication information (This only applies if the app has native account integration)
Be styled appropriately to match the native app design
Be devoid of any links navigating to the unrelated sections of the website

Bag or Check Out Details page

This page is the initial page users see when they press the “Go To Checkout” button on the native bag page.

Order Completion page

This page is the page users see when they successfully place an order.

URL of this page must have order_completed as one of its query parameters. E.g. https://myshop.com/checkout?order_completed
For tracking analytics data accurately, you must include a parameterless JavaScript function named getPoqOrder in the page. An example implementation is as follows:

<script type="text/javascript">
function getPoqOrder() {
  return {
    "orderId" : "0776620100",
    "subTotal" : 10.00,
    "delivery" : 5.00,
    "discount" : 2.00,
    "total" : 13.00,
    "currency": "GBP"
  };
}
</script>

The page should have a “Continue Shopping” button for users to return to the native app and continue shopping. “Continue Shopping” button creates a better user experience compared to users having to close the web view manually. When they press this button, the URL of the web page must now have continue_shopping as one of its query parameters (e.g. https://myshop.com/checkout?continue_shopping) We listen to this URL change to natively detect the button is pressed and close the web view.

Sample HTML

As a guideline, you can use the following sample HTML that includes all the required elements for our app to work. Highlighted in the comments are the placeholders variables that need to be changed to match your app values.

<html>
     <head>
        <script type="text/javascript">  //This is the javascript to get the analytcs data
        function getPoqOrder() {
            return {
                orderId: "85JG-H29L-211P-WX91", //String - populate this with the order id coming from your system
                subTotal: 12.99, //Float - total amount of the products purchased before discounts
                discount: 2.99, //Float - total amount of discounts applied to that order
                deliveryCost: 2.50, //Float - delivery charges for that order
                total: 12.50, //Float - total amoutn of the order with delivery charges after discounts
                currency: "GBP" //String - currency isocode (e.g. GBP)
                };
            }
        </script>
        <title>Web Checkout</title>
        <link rel="stylesheet" type="text/css" href="_styles/styles.css">
    </head>
    <body>
        <h1>Thanks for your order!</h1>
        <div><!-- Order details --></div>
        <!-- This button with that href is required in order to close down the webview once the order is completed. The copy of the button can be changed. -->
        <a id="continue" href="/?continue_shopping">Continue Shopping</a> 
    </body>
</html>

CSS And JavaScript Injection

It is best if your back-end provides HTML pages that are optimised and tested for embedding in an app web view.

To style the pages and hide navigation and other links you may use the CSS and JavaScript injection on the CMS. When you set up custom CSS styles or custom JavaScript using this feature the CSS and the JavaScript code is automatically inserted into the web pages.