Extension points​

• Static extension points: display at fixed positions on the checkout page and are associated with core functions of the checkout process, such as contact information, shipping methods, and order summaries.
• Dynamic extension points: display at any location on the checkout page and remain visible on the UI, unaffected by the checkout functions. A typical example of utilizing a dynamic extension point is adding a field to collect customer order notes.

Use the render(extensionPoint, App) method to register one or more extension points for a Checkout UI Customizer. Extension points are implemented as React components. Components receive API objects through props to interact with SHOPLINE apps.

Static extension points​

Static extension points are closely tied to the core functions of the checkout page, such as contact information, shipping methods, and order summaries. SHOPLINE provides these extension points before and after most core checkout features. If a core checkout feature is not displayed, the static extension point bound to it will not appear either.

Merchants need to activate static extension points through the checkout editor. The positions of static extension points in the checkout editor are fixed, and merchants cannot change their display locations within the checkout editor.

The following figure shows the static extension points in the shipping method section on the checkout page.

Example​

render("Checkout::CheckoutLines::RenderAfter", (props) => {
    return <Text>Hello World!</Text>;
});

Dynamic extension points​

Dynamic extension points are independent of core checkout functions and can be positioned between each step of the checkout process. Merchants have the flexibility to adjust the position of each dynamic extension point in the checkout editor, placing it on the checkout page, the order status page, or the thank you page, according to their preferences.

Dynamic extension points will always be displayed and are not affected by changes in other elements on the checkout page. For example, even if the Express checkout module, as shown in the following figure, is not activated, the dynamic extension Information1 will still be displayed.

Example​

render("Checkout::Dynamic::Render", (props) => {
    return <Text>Hello World!</Text>;
});