QliroOne Checkout

What does QliroOne Checkout offer?

This package wraps QliroOne Checkout and exposes its functionality as a React Native component.

Getting started

Install the package yarn add qliroone_reactnative

iOS

Run pod install --project-directory=ios.

Android

Nothing more required

Payment Providers

BankID (Trustly and customer authentication)

To be able to open BankID in Sweden you will have to add an entry in the Info.plist for iOS:

	<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>bankid</string>
	</array>

Swish

To be able to open Swish in Sweden you will have to add an entry in the Info.plist for iOS:

	<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>swish</string>
	</array>

Usage

Import the QliroOneCheckout component from qliroone_reactnative and use it like:

With scroll enabled (default):

import React from "react";
import { View } from "react-native";
import { QliroOneCheckout } from "qliroone_reactnative";

// ...

const CheckoutPage = () => {
  const checkoutRef = useRef<QliroOneCheckout>(null);

  return (
    <View style={{ flex: 1 }}>
      <QliroOneCheckout
        ref={checkoutRef}
        orderHtml={htmlSnippet}
        isScrollEnabled={true}
        onCheckoutLoaded={() => console.log("loaded")}
      />
    </View>
  );
};

With scroll disabled:

import React from "react";
import { View } from "react-native";
import { QliroOneCheckout } from "qliroone_reactnative";

// ...

const CheckoutPage = () => {
  const checkoutRef = useRef<QliroOneCheckout>(null);

  return (
    <ScrollView style={{ flex: 1 }}>
      <QliroOneCheckout
        ref={checkoutRef}
        orderHtml={htmlSnippet}
        isScrollEnabled={false}
        onCheckoutLoaded={() => console.log('loaded')}
      />
    </ScrollView>
  );
};

Configurable props

• orderHtml
• isScrollEnabled

Checkout Event props

• onCheckoutLoaded
• onCustomerInfoChanged
• onCustomerDeauthenticating
• onPaymentMethodChanged
• onPaymentDeclined
• onPaymentProcessStart
• onPaymentProcessEnd
• onShippingMethodChanged
• onShippingPriceChanged
• onSessionExpired

SDK Specific Event props

• onLogged
• onCompletePurchaseRedirect
• onOrderUpdated

Checkout Actions

• lock
• unlock
• enableScrolling
• excludeResultModules

SDK Specific Actions

• updateOrders
• onScroll

Configurable props

orderHtml

The html-snippet to the checkout, it is the html-snippet returned from the getOrder.

isScrollEnabled

Sets to enable scroll, default is true. If scrolling is disabled the component height is as tall as the content of QlirOne.

SDK Specific Event props

onOrderUpdated

Called after the ´updateOrders´ action has been called when Qliro One has synced its orders. This might be called multiple times and should return true when the Qliro One and the app is in sync. Once the order change can be validated, call removeOrderUpdateCallback and unset the locked property in order for the customer to interact with the checkout again.

Example:

const checkoutRef = useRef<QliroOneCheckout>(null);

const onCartChanged = async () => {
  checkoutRef.current?.lock();
  /// ...
  const updatedCart = await ...
  /// ...
  checkoutRef.current?.addOrderUpdateCallback();
}

const onOrderUpdated = (order: Order) => {
  // Check that the order is synced with your order.
  const orderCorrect = ...
  if (orderCorrect) {
    checkoutRef.current?.removeOrderUpdateCallback();
    checkoutRef.current?.unlock();
  }
};

// ...
<QliroOneCheckout
  onOrderUpdated={onOrderUpdated}
  // ...
/>;

onCompletePurchaseRedirect

A callback called when a purchase has been completed. The successUrl you created in the createCart will be provided in this callback in an object as merchantConfirmationUrl: { merchantConfirmationUrl: string }

Example:

<QliroOneCheckout
  // ...
  onCompletePurchaseRedirect={(options) => {
    dispatch({ type: "CHECKOUT_SUCCESS" });
    navigation.dispatch(
      StackActions.replace("ThankYou", {
        successUrl: options.merchantConfirmationUrl,
      })
    );
  }}
  // ...
  // ...
/>

SDK Specific Actions

addOrderUpdateCallback and removeOrderUpdateCallback

Initiates and removes the order sync process.

See onOrderUpdated

lock and unlock

Initiates and removes the order sync process.

See onOrderUpdated

onScroll

If QliroOne is rendered inside a scrollview this function needs to be called on when scrolling to ensure correct positions on popups in the checkout.

Example:

<FlatList
  ref={listRef}
  scrollEventThrottle={120}
  onScroll={() => {
    checkoutRef.current?.onScroll();
    // ...
  }}
  data={productsInCart}
  renderItem={({ item }) => (
    //
    // rendering products in cart
    //
  )}
  ListFooterComponent={
    <QliroOneCheckout
        ref={checkoutRef}
        // ...
        // ...
        // ...
      />
  }
/>

More information about these callbacks can be found in the developer portal.