Checkout Template

In this Article:

  1. Download Template
  2. Update your logo
  3. Update your products
  4. Customise success handler
  5. Publish

1: Download Template

  • Download our Checkout template (React app) and customise it for your usecase.

    Hyper Checkout Template

  • Navigate to src > pages > Checkout folder

  • Edit src/pages/Checkout/index.js file by updating the DesktopLogo component or point it to a png/jpg source, similar to the mobile logo implementation.

Hyper Checkout Desktop Logo

  • Edit src/pages/Checkout/index.js file by updating the MobileLogo source or implement an svg component similar to desktop logo implementation.

Hyper Checkout Mobile Logo

2.3: Mobile Background

  • Edit src/pages/Checkout/checkout.styles.js file by updating “bgImage” source, currently pointing at “../Brands/mobile-bg.png”.

Hyper Checkout Mobile Background

3: Update your products

  • Edit products.json file:

Hyper Checkout Product

4: Resizing of hyper-widget

  • Edit index.html file and modify window.onHyperWidgetResize handler and modify window.onWidgetResize handler that informs the client page of the changes in the size of the hyper-widget content using widget.onWidgetResize method.

Hyper Widget Resize Handler

5: Handling Valid Preference and Selecting Product

  • Edit index.html file and modify widget.onValidPreference handler, pass data.sku on window.checkout.selectRecommendedProduct function.

Hyper Valid Preference Handler and Product Selection

6: Handling Product Selection and Setting Widget Order

  • Edit index.html file and modify window.onSelectCheckoutProduct handler, capture and process the product information and update the widget order using widget.setOrder method.

Hyper Handling Checkout Product Selection

7: Customise success handler

  • Edit index.html file and modify onApprove handler with custom logic to complete checkout process

Hyper Checkout Handler

8: Publish

  • Publish the template to your site by uploading the entire React project