it would be great if you could point me in the right direction. im trying to implment E-transactions in my sample app but im getting no where.
i'm using NextJs :
Epayment.jsx:
`
import { useState, useEffect } from 'react';
import axios from 'axios';
const EPayment = ({ payload }) => {
const [submissionStatus, setSubmissionStatus] = useState('initial');
const [error, setError] = useState(null);
const initializePayment = async () => {
try {
setSubmissionStatus('submitting');
const response = await axios.post('/api/process-payment', payload);
const paymentForm = response.data;
console.log("paymentForm================================",paymentForm);
// Validate payment gateway response
if (!paymentForm?.url || !paymentForm?.method || !paymentForm?.elements) {
throw new Error('Invalid payment gateway configuration');
}
//Create and submit hidden form
const form = document.createElement('form');
form.action = paymentForm.url;
form.method = paymentForm.method;
form.style.display = 'none';
paymentForm.elements.forEach(({ name, value }) => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = name;
input.value = value;
form.appendChild(input);
});
document.body.appendChild(form);
setSubmissionStatus('submitted');
form.submit();
} catch (err) {
console.error('Payment error:', err);
setError(err.response?.data?.error || err.message || 'Payment failed');
setSubmissionStatus('error');
}
};
useEffect(() => {
initializePayment();
}, []);
return (
<div className="text-center p-4">
{submissionStatus === 'submitting' && (
<p>Connecting to payment gateway...</p>
)}
{submissionStatus === 'submitted' && (
<p>Redirecting to payment gateway...</p>
)}
{submissionStatus === 'error' && (
<div className="text-red-600">
<p>Error: {error}</p>
</div>
)}
</div>
);
};
export default EPayment;
`
route.js:
`
import { Up2Pay } from "@highcanfly-club/up2pay";
export async function POST(request) {
try {
const { address1, address2, city, zipCode, firstName, lastName, email, numItems, totalAmount, orderId } = await request.json();
const payment = Up2Pay.create({
payboxSite: process.env.NEXT_PUBLIC_PBX_SITE,
payboxRang: process.env.NEXT_PUBLIC_PBX_RANG,
payboxIdentifiant: process.env.NEXT_PUBLIC_PBX_IDENTIFIANT,
payboxHmac: process.env.NEXT_PUBLIC_HMAC_KEY,
payboxEffectue: 'http://localhost:3000/success',
payboxRefuse: 'http://localhost:3000/error',
payboxAnnule: 'http://localhost:3000/cancelled',
payboxAttente: 'http://localhost:3000/waiting',
payboxRepondreA: 'http://localhost:3000/',
amount: totalAmount * 100, // This is the price x100 to remove the comma
email: email,
firstname: firstName,
lastname: lastName,
address1: address1,
address2: address2,
zipcode: zipCode,
city: city,
countrycode: "250", // Code ISO-3166-1
totalquantity: numItems,
reference: orderId,
baseUrls: {
prod: {
main: "https://tpeweb.e-transactions.fr",
fallback: "https://tpeweb.e-transactions.fr",
},
sandbox: {
main: "https://recette-tpeweb.e-transactions.fr/php/",
fallback: "https://recette-tpeweb.e-transactions.fr/php/",
},
},
});
const response = await payment.form();
// Return payment gateway configuration
return Response.json(response);
} catch (error) {
console.error('Payment processing error:', error);
return Response.json(
{ error: 'Payment processing failed' },
{ status: 500 }
);
}
}
`
any help would be appreciated
it would be great if you could point me in the right direction. im trying to implment E-transactions in my sample app but im getting no where.
i'm using NextJs :
Epayment.jsx:
`
import { useState, useEffect } from 'react';
import axios from 'axios';
const EPayment = ({ payload }) => {
const [submissionStatus, setSubmissionStatus] = useState('initial');
const [error, setError] = useState(null);
};
export default EPayment;
`
route.js:
`
import { Up2Pay } from "@highcanfly-club/up2pay";
export async function POST(request) {
try {
const { address1, address2, city, zipCode, firstName, lastName, email, numItems, totalAmount, orderId } = await request.json();
} catch (error) {
console.error('Payment processing error:', error);
return Response.json(
{ error: 'Payment processing failed' },
{ status: 500 }
);
}
}
`
any help would be appreciated