Setting up paystack
first install the react-paystack package
Import "PaystackButton" from "react-paystack"
copy code the code snippet bellow, click here if you need to refer to the paystack Docementation
const config = {
reference: new Date().getTime().toString(),
email: email,
amount: total * 100, //Amount is in the country's lowest currency. E.g Kobo, so 20000 kobo = N200
publicKey: {FingertippsPaystackKey},
};
const handlePaystackCloseAction = () => {
// implementation for whatever you want to do when the Paystack dialog closed.
console.log("closed");
};
const componentProps = {
...config,
text: "pay now",
onSuccess: (reference) => sucessAction,
onClose: handlePaystackCloseAction,
};replace "FingertippsPaystackKey" with the either one of the following
Fingergetipps' test public keys for test payments
Fingergetipps' live public keys for live payments
At this point, your code should look something like the following
const PaymentPage = () => {
import { PaystackButton } from "react-paystack";
const config = {
reference: new Date().getTime().toString(),
email: email,
amount: total * 100, //Amount is in the country's lowest currency. E.g Kobo, so 20000 kobo = N200
publicKey: "pk_test_787c0bd300e48e8088c77fcd1bfc613740c89210",
};
const handlePaystackCloseAction = () => {
// implementation for whatever you want to do when the Paystack dialog closed.
console.log("closed");
};
const componentProps = {
...config,
text: "pay now",
onSuccess: (reference) => sucessAction(),
onClose: handlePaystackCloseAction,
};
return <div>
...
</div>;
};
export default PaymentPage;
Next import the "savePaymentRecord" function from "fingertipps-handshakes"
The "savePaymentRecord" function accepts 6 aurguments
1 the refresh of the paystack stransaction
2 total value of the users' cart items :number
3 name of the user: string
4 email of the user: string
5 phone number of the user: number
6 the users cart item :Array
Use the following code snippet to calculate the total monetary value of a user's cart.
At this point, your code should look something like the following
const PaymentPage = ({cartItems}) => {
import { PaystackButton } from "react-paystack"
import {savePaymentRecord} from "fingertipps-handshakes"
const config = {
reference: new Date().getTime().toString(),
email: email,
amount: total * 100, //Amount is in the country's lowest currency. E.g Kobo, so 20000 kobo = N200
publicKey: "pk_test_787c0bd300e48e8088c77fcd1bfc613740c89210",
};
const handlePaystackCloseAction = () => {
// implementation for whatever you want to do when the Paystack dialog closed.
console.log("closed");
};
const total = cartItems.count..reduce(
(a, c) => a + c.price * c.count.reduce((a, c) => a + c, 0),
0
);
const componentProps = {
...config,
text: "pay now",
onSuccess: (reference) => savePaymentRecord(reference.reference,
total,
address,
name,
email,
phoneNumber,
itemsInCart),
onClose: handlePaystackCloseAction,
};
return (
<div>
<PaystackButton {...componentProps} />
</div>
);
};
export default PaymentPage;