3. Handle Response
In this section we will look into handling responses returned by the payment process. These can be a succesful response in case a completed transaction, a failed payment in case of an error that occured, or a cancelled transaction in case the user clicked cancel.
3.1 Frontend, failure/cancel
In case of failure/cancel event, we can safely notify the user of failure via a message on the browser. This is shown below in a react component.
//We defined the url to be of the format http://..../callback/failure
// in the section trigger-payment.
// We can capture the status using a param of react dom by defining our route as below
//<Route path="/callback/:status">
// <ErrorCallback />
//</Route>
const ErrorCallback = () => {
const params = useParams();
const [status, setStatus] = useState();
useEffect(() => {
setStatus(params.status);
}, []);
if (!status) {
return null;
}
if (status === "failure") {
return <div>Failed</div>;
} else if (status === "cancel") {
return <div>Cancelled</div>;
} else {
return <div>Unknown error</div>;
}
};
It most cases it is ideal to send the transaction reference number to your backend so as to record this event on your transaction.
3.2 Backend, check transaction status
In case of a successful transaction, we would need to use the /transaction
API to query the status from the payments backend. This is to ensure that the transaction was actually successful and not a spoof by the customer by accessing the url directly.
Once again, we will make the transaction query on our backed as shown below in this nodejs express api.
const BASE_URL = process.env.BASE_URL;
const TOKEN = process.env.SS_PAY_TOKEN;
app.get(
"/transaction-status/:reference_number",
async (request, response, next) => {
const { reference_number } = request.params;
const { data } = await axios.post(
`${BASE_URL}/payments/transaction`,
{
reference_number,
},
{
headers: {
"X-SS-EXTERNAL-TOKEN": TOKEN,
},
}
);
return response.status(200).json(data);
}
);
Our backend service can now be used by the success event handler page to verify the transaction.
3.3 Frontend: Verify Transaction status
Once our success handler page is opened, we can retrieve the reference number from the query parameters and use that to check the transaction status via our backend service.
A sample code is shown below.
import qs from "qs";
const SuccessCallback = () => {
const location = useLocation(); //From react router
const [status, setStatus] = useState();
useEffect(() => {
const qp = qs.parse(location.search, { ignoreQueryPrefix: true });
if (qp.reference) {
Axios.get(`/transaction-status/${qp.reference}`)
.then((data) => {
setStatus("success");
})
.catch((err) => {
setStatus("failed");
});
} else {
setStatus("failed");
}
}, []);
if (!status) {
return <div>Checking transaction status</div>;
}
if (status === "success") {
return <div>Payment Successful</div>;
} else if (status === "failed") {
return <div>Failed</div>;
} else {
return <div>Unknown error</div>;
}
};
This completes the whole process of collecting a payment