This package wraps QliroOne Checkout and exposes its functionality as a React Native component.
Install the package yarn add qliroone_reactnative
Run pod install --project-directory=ios
.
Nothing more required
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>
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>
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>
);
};
- onCheckoutLoaded
- onCustomerInfoChanged
- onCustomerDeauthenticating
- onPaymentMethodChanged
- onPaymentDeclined
- onPaymentProcessStart
- onPaymentProcessEnd
- onShippingMethodChanged
- onShippingPriceChanged
- onSessionExpired
The html-snippet to the checkout, it is the html-snippet returned from the getOrder.
Sets to enable scroll, default is true. If scrolling is disabled the component height is as tall as the content of QlirOne.
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}
// ...
/>;
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,
})
);
}}
// ...
// ...
/>
Initiates and removes the order sync process.
See onOrderUpdated
Initiates and removes the order sync process.
See onOrderUpdated
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.