How To Create WooCommerce POS Cart Page using React Native.

Rahul Saini

8 October 2024

In this blog, we will learn how to create WooCommerce POS Cart Page in React Native.

Introduction

In this blog, we’ll show you how to create a WooCommerce POS Cart page using React Native. This will help you build a user-friendly mobile POS system that integrates with your WooCommerce store.

Implementation

Now we will implement the cart page, step by step.

Setting Up Your Project with React Native

For setting up the environment, check out our previous blog, How to Create an Odoo Product Page in React Native, where we walk through the entire setup process.

Create the Cart Page Components

We’ll start by creating CartScreen file named index.tsx in the src/screens/cart folder.

1. Cart Screen

The CartScreen component renders a shopping cart interface using React Native, displaying items, price details, and a payment button, all within a scrollable view.

Here’s a basic example of what your index.tsx might look like:

import React from "react"
import { View, Text, ScrollView } from "react-native"
import Toolbar from "../../components/Toolbar"
import ItemsList from "./components/ItemsList"
import styles from "./styles"
import PriceDetails from "./components/PriceDetails"
import PaymentButton from "./components/PaymentButton"

const CartScreen = ()=> {
    return(
        <ScrollView showsVerticalScrollIndicator={false} >
        <View style={styles.CartScreenView}>
            <Toolbar/>
            <View style={{padding:5}}>
                <Text style={styles.itemsLabel}>3 ITEM(S)</Text>
                <ItemsList/>
            </View>
            <View>
                <PriceDetails/>
            </View>
            <View>
                <PaymentButton/>
            </View>
        </View>
        </ScrollView>
    )
}

export default CartScreen

import React from "react"

import { View, Text, ScrollView } from "react-native"

import Toolbar from "../../components/Toolbar"

import ItemsList from "./components/ItemsList"

import styles from "./styles"

import PriceDetails from "./components/PriceDetails"

import PaymentButton from "./components/PaymentButton"

const CartScreen = ()=> {

return(

</View>

<View>

</View>

<View>

</View>

</ScrollView>

)

}

export default CartScreen

Now let’s create some other components that CartScreen use.

2. Tool Bar

The Toolbar component provides a top bar for the cart screen with a back arrow icon on the left, a title (“Cart”) in the center, and a delete icon on the right to remove all items from the cart.

we have use react native vector icons for delete and left arrow icons. install this from here.

import React from "react"
import { View, Text } from "react-native"
import styles from "../screens/cart/styles"
import Icon from 'react-native-vector-icons/AntDesign';
import Delete from 'react-native-vector-icons/MaterialCommunityIcons';

const Toolbar = ()=> {
    return(
        <View style={styles.toolbarContainer}>
            <View style={{flexDirection:'row', flex:1}}>
            <Icon name="arrowleft" size={24} color="#ff7143" />
            <Text style={styles.toolBarTitle}>Cart</Text>
            </View>
            <View style={{flex:1, alignItems:'flex-end', marginEnd:15}}>
            <Delete name="delete-forever" size={24} color="#ff7143" />
            </View>
        </View>
    )
}

export default Toolbar

import React from "react"

import { View, Text } from "react-native"

import styles from "../screens/cart/styles"

import Icon from 'react-native-vector-icons/AntDesign';

import Delete from 'react-native-vector-icons/MaterialCommunityIcons';

const Toolbar = ()=> {

return(

</View>

</View>

)

}

export default Toolbar

3. ItemsList

The ItemList component renders a list of cart items with their image, name, price, quantity, and a delete icon using FlatList.

import React from "react"
import { View, Text, FlatList, Image } from "react-native"
import { data } from "../../../data/itemsData"
import styles from "../styles"
import Delete from 'react-native-vector-icons/MaterialCommunityIcons';

const ItemsList = () => {

    const itemsView = ({ item }) => (
        <View style={[styles.itemView,styles.marginT]}>
            <View>
                <Image source={item.img} style={styles.itemsImage} />
            </View>
            <View style={styles.name_price_View}>
                <Text style={styles.itemsName}>{item.name}</Text>
                <Text style={styles.itemsPrice}>${item.price}</Text>
            </View>
            <View style={styles.delete_icon_qty_View}>
                <Delete name="delete-forever" size={24} color="#ff7143" />
                <Text style={styles.itemsPrice}>Qty:{item.quantity}</Text>
            </View>
        </View>
    );

    return (
        <View style={styles.greyView}>
            <FlatList
                data={data}
                renderItem={itemsView}
            />
        </View>
    )
}

export default ItemsList

import React from "react"

import { View, Text, FlatList, Image } from "react-native"

import { data } from "../../../data/itemsData"

import styles from "../styles"

import Delete from 'react-native-vector-icons/MaterialCommunityIcons';

const ItemsList = () => {

const itemsView = ({ item }) => (

<View>

</View>

<Text style={styles.itemsPrice}>${item.price}</Text>

</View>

<Text style={styles.itemsPrice}>Qty:{item.quantity}</Text>

</View>

);

return (

<FlatList

data={data}

renderItem={itemsView}

</View>

)

}

export default ItemsList

4. PriceDetails

The PriceDetails component displays a breakdown of the cart’s total price, including subtotal, tax, discount, and the final total amount.

import React from "react"
import { Text, View } from "react-native"
import styles from "../styles"

const PriceDetails = () => {
    return (
        <View style={styles.greyView}>
            <View style={styles.priceDetailsView}>
                <Text style={styles.itemsName}>PRICE DETAIL</Text>
            </View>
            <View style={{marginTop:0.5}}>
            <View style={styles.itemView}>
                <View style={styles.name_price_View}>
                    <Text style={styles.itemsPrice}>SubTotal</Text>
                </View>
                <View style={styles.priceDetailsEndItems}>
                    <Text style={styles.itemsPrice}>$60</Text>
                </View>
            </View>

            <View style={styles.itemView}>
                <View style={styles.name_price_View}>
                    <Text style={styles.itemsPrice}>Tax</Text>
                </View>
                <View style={styles.priceDetailsEndItems}>
                    <Text style={styles.itemsPrice}>$5.2</Text>
                </View>
            </View>

            <View style={styles.itemView}>
                <View style={styles.name_price_View}>
                    <Text style={styles.itemsPrice}>Discount</Text>
                </View>
                <View style={styles.priceDetailsEndItems}>
                    <Text style={styles.itemsPrice}>$0.00</Text>
                </View>
            </View>

            <View style={styles.itemView}>
                <View style={styles.name_price_View}>
                    <Text style={styles.itemsPrice}>Total</Text>
                </View>
                <View style={styles.priceDetailsEndItems}>
                    <Text style={styles.itemsPrice}>$65.2</Text>
                </View>
            </View>
            </View>

        </View>
    )
}

export default PriceDetails

import React from "react"

import { Text, View } from "react-native"

import styles from "../styles"

const PriceDetails = () => {

return (

<Text style={styles.itemsName}>PRICE DETAIL</Text>

</View>

<Text style={styles.itemsPrice}>SubTotal</Text>

</View>

</View>

</View>

</View>

<Text style={styles.itemsPrice}>Discount</Text>

</View>

</View>

<Text style={styles.itemsPrice}>Total</Text>

</View>

</View>

)

}

export default PriceDetails

5. PaymentButton

The PaymentButton component displays a button with a confirmation text and a right arrow icon for accepting payment.

import React from "react";
import { Text, View } from "react-native";
import Icon from 'react-native-vector-icons/AntDesign';
import styles from "../styles";

const PaymentButton = () => {
    return (
        <View style={styles.buttonView}>
            <View style={{flex:1, alignItems:'center'}}>
                <Text style={[styles.itemsName,styles.TextColor]}>CONFIRM AND ACCEPT PAYMENT</Text>
            </View>
            <View>
                <Icon name="arrowright" size={20} color="#000000" />
            </View>
        </View>
    )
}

export default PaymentButton

import React from "react";

import { Text, View } from "react-native";

import Icon from 'react-native-vector-icons/AntDesign';

import styles from "../styles";

const PaymentButton = () => {

return (

<Text style={[styles.itemsName,styles.TextColor]}>CONFIRM AND ACCEPT PAYMENT</Text>

</View>

<View>

</View>

)

}

export default PaymentButton

6. Styles

The stylesheet defines styles for various components in the cart screen, such as the toolbar, item list, price details, and payment button, using properties like padding, margin, colors, and layout styles.

import { StyleSheet } from "react-native";
import CartScreen from ".";

export default StyleSheet.create({
    CartScreenView:{
        //backgroundColor:'#e0e0e0'
        backgroundColor:'white'
    },
    toolbarContainer:{
        flexDirection:'row',
        justifyContent:'space-between',
        padding:10,
        backgroundColor:'white'
    },
    toolBarTitle:{
        marginStart:20,
        color:'#ff7143',
        fontSize:16,
        fontWeight:'bold'
    },
    itemsLabel:{
        fontWeight:'bold',
        marginTop:10,
        color:'black'
    },
    itemsImage:{
        width:60,
        height:60
    },
    itemsName:{
        fontWeight:'bold',
        color:'black'
    },
    itemsPrice:{
        color:'black',
        marginEnd:15
    },
    itemView:{
        padding: 10, 
        flexDirection: 'row',
        backgroundColor:'white',
    },
    name_price_View:{
        marginStart: 20, 
        flex: 1, 
        justifyContent: 'center',
    },
    delete_icon_qty_View:{
        justifyContent:'center',
    },
    greyView:{
        backgroundColor:'#e0e0e0',
        marginTop: 10
    },
    priceDetailsView:{
        padding:5,
        marginTop:5,
        backgroundColor:'white'
    },
    priceDetailsEndItems:{
        flex:1,
        alignItems:'flex-end'
    },
    marginT:{
        marginTop:0.5
    },
    buttonView:{
        padding: 10, 
        flexDirection: 'row',
        backgroundColor:'#ff7143',
        marginTop:70,
        marginStart:10,
        marginBottom:10,
        marginEnd:10
    },
    TextColor:{
        color:'white'
    }
})

import { StyleSheet } from "react-native";

import CartScreen from ".";

export default StyleSheet.create({

CartScreenView:{

//backgroundColor:'#e0e0e0'

backgroundColor:'white'

toolbarContainer:{

flexDirection:'row',

justifyContent:'space-between',

padding:10,

backgroundColor:'white'

toolBarTitle:{

marginStart:20,

color:'#ff7143',

fontSize:16,

fontWeight:'bold'

itemsLabel:{

fontWeight:'bold',

marginTop:10,

color:'black'

itemsImage:{

width:60,

height:60

itemsName:{

fontWeight:'bold',

color:'black'

itemsPrice:{

color:'black',

marginEnd:15

itemView:{

padding: 10,

flexDirection: 'row',

backgroundColor:'white',

name_price_View:{

marginStart: 20,

flex: 1,

justifyContent: 'center',

delete_icon_qty_View:{

justifyContent:'center',

greyView:{

backgroundColor:'#e0e0e0',

marginTop: 10

priceDetailsView:{

padding:5,

marginTop:5,

backgroundColor:'white'

priceDetailsEndItems:{

flex:1,

alignItems:'flex-end'

marginT:{

marginTop:0.5

buttonView:{

padding: 10,

flexDirection: 'row',

backgroundColor:'#ff7143',

marginTop:70,

marginStart:10,

marginBottom:10,

marginEnd:10

TextColor:{

color:'white'

}

})

Integrate the Cart Page into Your App

Now integrate CartScreen component into your App.tsx file.

Open App.tsx : Replace the existing code with:

import React from "react";
import {View, Text} from 'react-native'
import CartScreen from "./src/screens/cart/index";
const App = ()=> {
  return(
    <View>
      <CartScreen/>
    </View>
  )
}

export default App

import React from "react";

import {View, Text} from 'react-native'

import CartScreen from "./src/screens/cart/index";

const App = ()=> {

return(

<View>

</View>

)

}

export default App

Now save or reload your react native app to view changes.

Here the Output of the project

https://mobikul.com/wp-content/uploads/2024/10/Mobikul-Blog-Improvement-With-BG-4.mp4?_=1

Conclusion

In conclusion, by using modern development tools, businesses can build strong and responsive point-of-sale systems that meet the needs of today’s customers.

Read more interesting React Native Blogs by Mobikul.

Thanks for reading this blog.

Hope this blog helped you to better understand how to create WooCommerce POS Cart Page in React Native.