Good day, please I created a page for payment when the payment is successful, all the Items the user purchased, which are the items in the cartItems should be sent to mySql data base. I am using PHP as my server.
The problem I encountered is that the I get try post the cartItems is said to be undefined and the when I echoed out cartItems I got null
Errors:
Array ( )
Warning: Undefined array key "cartItems" in C:xampphtdocsapiinsertOrders.php on line 14
Warning: Undefined variable $_cartItems in C:xampphtdocsapiinsertOrders.php on line 16
NULL
Warning: foreach() argument must be of type array|object, null given in C:xampphtdocsapiinsertOrders.php on line 23
Cart items inserted successfully!
so the items where not inserted
This is the Php code:
<?php
include 'connection.php';
// Prepare the SQL statement for inserting into orderProducts table
$insertOrderProductsStmt = $mysqli->prepare("INSERT INTO orders (userId, bookId, name, quantity, price) VALUES (?, ?, ?, ?,?)");
// $jsonPayload = file_get_contents('php://input');
// $data = json_decode($jsonPayload, true);
// Get the cart items from the request
print_r($_POST);
// if(isset($_POST['cartItems'])){
$cartItems = $_POST['cartItems'];
echo $cartItems;
var_dump($_cartItems);
// Start the transaction
$mysqli->begin_transaction();
try {
// Iterate over each cart item and execute the insert statement
foreach ($cartItems as $cartItem) {
$userId = $cartItem['userId'];
$bookId = $cartItem['bookId'];
$name = $cartItem['name'];
$quantity = $cartItem['quantity'];
$price = $cartItem['quantity'] * $cartItem['price'];
// Bind the parameters and execute the statement
$insertOrderProductsStmt->bind_param("iisii", $userId, $bookId, $name, $quantity, $price);
$insertOrderProductsStmt->execute();
}
// Commit the transaction
$mysqli->commit();
// Close the prepared statement
$insertOrderProductsStmt->close();
// Send a success response
echo "Cart items inserted successfully!";
} catch (Exception $e) {
// Rollback the transaction if an error occurred
$mysqli->rollback();
// Close the prepared statement
$insertOrderProductsStmt->close();
// Send an error response
echo "Error: " . $e->getMessage();
}
// Close the database mysqliection
$mysqli->close();
// }
// else{
// echo "an error occured";
// }
?>
This is my react native page :
the insertOrders is responsible for that and I called it in the onSuccess props of the Paystack component
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
TextInput,
Alert,
} from "react-native";
import React, { useRef, useState } from "react";
import { cartTotalPriceSelector } from "../redux/selectors";
import { useDispatch, useSelector } from "react-redux";
import { color } from "react-native-reanimated";
import colors from "../config/colors";
import { clear } from "../redux/features/cart/cartSlice";
import { Paystack, paystackProps } from "react-native-paystack-webview";
const PaymentScreen = () => {
// const isValidEmail = (email) => {
// const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
// return emailRegex.test(email);
// };
const paystackWebViewRef = useRef(paystackProps.PayStackRef);
const totalPrice = useSelector(cartTotalPriceSelector);
const userId = useSelector((state) => state.user.userId);
const email = useSelector((state) => state.email.email);
const cart = useSelector((state) => state.cart);
const cartItems = cart.map((cartItem) => {
return {
userId: userId,
bookId: cartItem.bookId,
name: cartItem.name,
quantity: cartItem.quantity,
price: cartItem.price,
};
});
console.log("myItem",{ cartItems });
const insertOrders = () => {
const url = "http://192.168.11.102:80/api/insertOrders.php"; // Replace with the actual URL of your PHP page
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ cartItems }),
};
console.log("Before fetch request"); // Debugging statement
fetch(url, requestOptions)
.then((response) => {
console.log("Response received"); // Debugging statement
return response.json();
})
.then((result) => {
console.log("Result:", result); // Debugging statement
})
.catch((error) => {
console.error("Error:", error);
});
};
return (
<View style={styles.container}>
<Paystack
paystackKey="*****************************************"
billingEmail={email}
amount={totalPrice}
onCancel={(e) => {
// handle response here
}}
onSuccess={(res) => {
// handle response here
Alert.alert("Payment successful");
console.log("myItem",{ cartItems });
insertOrders();
}}
ref={paystackWebViewRef}
/>
<Image style={styles.image} source={require("../assets/payment.jpg")} />
<View style={styles.totalContainer}>
<Text style={styles.totalText}>₦{totalPrice}</Text>
<TouchableOpacity
style={styles.checkoutButton}
onPress={() => paystackWebViewRef.current.startTransaction()}>
<Text style={styles.checkoutButtonText}>Pay Now</Text>
</TouchableOpacity>
</View>
</View>
);
};
export default PaymentScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
checkoutButton: {
backgroundColor: colors.orange,
paddingHorizontal: 20,
paddingVertical: 10,
borderRadius: 20,
elevation: 3,
},
checkoutButtonText: {
fontSize: 16,
fontWeight: "bold",
color: "#FFFFFF",
},
image: {
width: 200,
height: 200,
resizeMode: "cover",
marginRight: 10,
borderRadius: 11,
},
totalContainer: {
margin: 10,
borderColor: colors.lightOrange,
borderWidth: 3,
borderRadius: 10,
padding: 20,
justifyContent: "center",
alignItems: "center",
},
totalText: {
fontSize: 18,
fontWeight: "bold",
},
emailInput: {
height: 40,
width: "100%",
borderColor: colors.lightOrange,
borderWidth: 2,
borderRadius: 5,
paddingHorizontal: 10,
marginTop: 10,
},
errorText: {
color: "red",
marginTop: 5,
},
});
when I console.log("myItems", {cartItems}) I got these response
myItem {"cartItems": [{"bookId": 18, "name": "The diary of a nigerian christian girl", "price": "2000.00", "quantity": 5, "userId": 31}, {"bookId": 21, "name": "A Time to Love", "price": "1500.00", "quantity": 3, "userId": 31}]}
