Overview
There are many ways of using ReactJS to collect payment details on your own payment page and send them for processing as part of your own custom payment flow.
For you your convenience, we have provided the following set of full ReactJS code samples, which represents just one of the many ways to use ReactJS:
- Three-Part Card Fields – Full Implementation
- One-Part Card Field – Full Implementation
- Without Nuvei Fields – Full Implementation
Three-Part Card Fields
Example App.js
import React, { useEffect, useState } from "react";
import { SafeChargeCC } from "./SafeCharge";
import "./styles.css";
const loadScript = (src) =>
new Promise((resolve, reject) => {
const scriptElem = Object.assign(document.createElement("script"), {
type: "text/javascript",
defer: true,
src,
onerror: (e) => {
reject(e);
}
});
scriptElem.onload = () => {
resolve();
};
document.body.appendChild(scriptElem);
});
export default function App() {
//
const [safeCharge, setSafeCharge] = useState(null);
useEffect(() => {
loadScript(
"https://cdn.safecharge.com/safecharge_resources/v1/websdk/safecharge.js" //production
).then(() => {
setSafeCharge(
window.SafeCharge({
merchantId: "806659927845195034",
merchantSiteId: "196488"
})
);
});
}, []);
//safeCharge component
return (
<div className="App">
<h1>Web SDK</h1>
<h2>Three-Part Card Field Integration</h2>
<SafeChargeCC safeCharge={safeCharge} />
</div>
);
}
Example SafeCharge.jsx
import React, { memo, useEffect, useState } from "react";
export const SafeChargeCC = memo(({ safeCharge }) => {
const [cardN, setCardN] = useState(null);
const [sessionToken, setSessionToken] = useState("");
const [cardHolderName, setCardHolderName] = useState("CL-BRW1");
useEffect(() => {
if (safeCharge) {
const safeChargeFields = safeCharge.fields({
fonts: [{ cssUrl: "" }],
locale: "en",
fontSize: "16px"
});
// Card number----------------------------------------------------
const cardNumber = safeChargeFields.create("ccNumber", {
// style: {
// base: {
// fontSize: "16px"
// }
// }
});
cardNumber.attach("#card-number");
const cardExpiry = safeChargeFields.create("ccExpiration", {
style: {
base: {
fontSize: "16px"
}
}
});
// cardExpiry.on("change", (evt) => {
// console.log("cardExpiry change event >>>", evt);
// });
// cardExpiry.on("error", (evt) => {
// console.log("cardExpiry error event >>>", evt);
// });
cardExpiry.attach("#card-expiry");
// CVV--------------------------------------------------------------
const cardCvc = safeChargeFields.create("ccCvc", {
style: {
base: {
fontSize: "16px"
}
}
});
cardCvc.attach("#card-cvc");
console.log(cardNumber);
setCardN(cardNumber);
}
}, [safeCharge]);
const createPayment = (e) => {
if (cardN) {
try {
safeCharge.createPayment(
{
sessionToken: sessionToken,
cardHolderName: cardHolderName,
paymentOption: cardN,
billingAddress: {
email: "[email protected]",
country: "GB"
}
},
(resp) => console.log(resp)
);
} catch (e) {
console.error(e);
}
}
};
const authenticate3d = (e) => {
if (cardN) {
try {
safeCharge.authenticate3d(
{
sessionToken: sessionToken,
cardHolderName: cardHolderName,
paymentOption: cardN,
billingAddress: {
email: "[email protected]",
country: "GB"
}
},
(resp) => console.log(resp)
);
} catch (e) {
console.error(e);
}
}
};
const getToken = (e) => {
if (cardN) {
try {
safeCharge
.getToken(cardN, {
sessionToken: sessionToken,
cardHolderName: cardHolderName,
paymentOption: cardN,
billingAddress: {
email: "[email protected]",
country: "GB"
}
})
.then(function (result) {
if (result.status === "SUCCESS") {
console.log(result); //pass the paymentOption to the payment API call
} else {
console.log(result);
}
});
} catch (e) {
console.error(e);
}
}
};
return (
<>
<div className="container">
<div className="item sessionfield">
<label htmlFor="sessionField">Session Token</label>
<input
id="sessionField"
placeholder="Session Token"
type="text"
value={sessionToken}
onChange={(e) => setSessionToken(e.target.value)}
/>
</div>
<div className="item">
<label htmlFor="cardHolderName">Cardholder Name</label>
<input
id="cardHolderName"
placeholder="Cardholder Name"
type="text"
value={cardHolderName}
onChange={(e) => setCardHolderName(e.target.value)}
/>
</div>
<div className="item">
<label htmlFor="card-number">Card number</label>
<div id="card-number" className="input" />
</div>
<div className="item">
<label htmlFor="card-expiry">Expiration Date</label>
<div id="card-expiry" className="input empty" />
</div>
<div className="item">
<label htmlFor="card-cvc">CVC</label>
<div id="card-cvc" className="input empty" />
</div>
<div className="item100">
<button className="pay-button" onClick={createPayment}>
Create Payment
</button>
<button className="pay-button" onClick={authenticate3d}>
Authenticate3d
</button>
<button className="pay-button" onClick={getToken}>
getToken
</button>
</div>
</div>
</>
);
});
One-Part Card Field
Example App.js
import React, { useEffect, useState } from "react";
import { SafeChargeCC } from "./SafeCharge";
import { loadScript } from "./loadScript";
import "./styles.css";
export default function App() {
const [safeCharge, setSafeCharge] = useState(null);
useEffect(() => {
loadScript(
"https://cdn.safecharge.com/safecharge_resources/v1/websdk/safecharge.js" //production
).then(() => {
setSafeCharge(
window.SafeCharge({
env: "int",
merchantId: "4182997617632659388",
merchantSiteId: "208906"
})
);
});
}, []);
return (
<div className="App">
<h1>Web SDK</h1>
<h2>Nuvei Fields</h2>
<SafeChargeCC safeCharge={safeCharge} />
</div>
);
}
Example SafeCharge.jsx
import React, { memo, useEffect, useState } from "react";
export const SafeChargeCC = memo(({ safeCharge }) => {
const [cardNumber, setCardNumber] = useState(null);
const [sessionToken, setSessionToken] = useState("");
const [cardHolderName, setCardHolderName] = useState("CL-BRW1");
useEffect(() => {
if (safeCharge) {
const safeChargeFields = safeCharge.fields({
fonts: [{ cssUrl: "" }],
locale: "en"
});
// Card number----------------------------------------------------
const cardNumber = safeChargeFields.create("card", {});
cardNumber.attach("#card-field");
setCardNumber(cardNumber);
}
}, [safeCharge]);
const createPayment = (e) => {
if (cardNumber) {
try {
safeCharge.createPayment(
{
sessionToken: sessionToken,
cardHolderName: cardHolderName,
paymentOption: cardNumber,
billingAddress: {
email: "[email protected]",
country: "GB"
}
},
(resp) => console.log(resp)
);
} catch (e) {
console.error(e);
}
}
};
const authenticate3d = (e) => {
if (cardNumber) {
try {
safeCharge.authenticate3d(
{
sessionToken: sessionToken,
cardHolderName: cardHolderName,
paymentOption: cardNumber,
billingAddress: {
email: "[email protected]",
country: "GB"
}
},
(resp) => console.log(resp)
);
} catch (e) {
console.error(e);
}
}
};
const getToken = (e) => {
if (cardNumber) {
try {
safeCharge
.getToken(cardNumber, {
sessionToken: sessionToken,
cardHolderName: cardHolderName,
paymentOption: cardNumber,
billingAddress: {
email: "[email protected]",
country: "GB"
}
})
.then(function (result) {
if (result.status === "SUCCESS") {
console.log(result); //pass the paymentOption to the payment API call
} else {
console.log(result);
}
});
} catch (e) {
console.error(e);
}
}
};
return (
<>
<label htmlFor="sessionField">Session Token</label>
<div className="item sessionfield">
<input
id="sessionField"
placeholder="Session Token"
type="text"
value={sessionToken}
onChange={(e) => setSessionToken(e.target.value)}
/>
</div>
<label htmlFor="cardHolderName">Cardholder Name</label>
<div className="item cardHolderName">
<input
id="cardHolderName"
placeholder="Cardholder Name"
type="text"
value={cardHolderName}
onChange={(e) => setCardHolderName(e.target.value)}
/>
</div>
<div>
<div className="field">
<label htmlFor="card-field">Card details</label>
<div id="card-field" className="input" />
</div>
</div>
<div className="item buttons">
<button className="pay-button" onClick={createPayment}>
Create Payment
</button>
<button className="pay-button" onClick={authenticate3d}>
Authenticate3d
</button>
<button className="pay-button" onClick={getToken}>
getToken
</button>
</div>
</>
);
});
Without Nuvei Fields
Example App.js
import React, { useEffect, useState } from "react";
import { SafeChargeCC } from "./SafeCharge";
import "./styles.css";
const loadScript = (src) =>
new Promise((resolve, reject) => {
const scriptElem = Object.assign(document.createElement("script"), {
type: "text/javascript",
defer: true,
src,
onerror: (e) => {
reject(e);
}
});
scriptElem.onload = () => {
resolve();
};
document.body.appendChild(scriptElem);
});
export default function App() {
const [safeCharge, setSafeCharge] = useState(null);
useEffect(() => {
loadScript(
"https://cdn.safecharge.com/safecharge_resources/v1/websdk/safecharge.js" //production
).then(() => {
setSafeCharge(
window.SafeCharge({
env: "int",
merchantId: "479748173730597238",
merchantSiteId: "180083"
})
);
});
}, []);
return (
<div className="App">
<h1>Web SDK</h1>
<h2>without Nuvei Fields</h2>
<SafeChargeCC safeCharge={safeCharge} />
</div>
);
}
Example SafeCharge.jsx
import React, { memo, useState } from "react";
export const SafeChargeCC = memo(({ safeCharge }) => {
const [cardNumber, setCardNumber] = useState("");
const [sessionToken, setSessionToken] = useState("");
const [expDateMM, setExpDateMM] = useState("11");
const [expDateYY, setExpDateYY] = useState("22");
const [cardCVV, setCardCVV] = useState("");
const [cardHN, setCardHN] = useState("CL-BRW1");
const createPayment = (e) => {
try {
safeCharge.createPayment(
{
sessionToken: sessionToken,
paymentOption: {
card: {
cardNumber: cardNumber,
cardHolderName: cardHN,
expirationMonth: expDateMM,
expirationYear: expDateYY,
CVV: cardCVV
}
},
billingAddress: {
email: "[email protected]",
country: "GB"
}
},
(resp) => console.log(resp)
);
} catch (e) {
console.error(e);
}
};
const authenticate3d = (e) => {
try {
safeCharge.authenticate3d(
{
sessionToken: sessionToken,
paymentOption: {
card: {
cardNumber: cardNumber,
cardHolderName: cardHN,
expirationMonth: expDateMM,
expirationYear: expDateYY,
CVV: cardCVV
}
},
billingAddress: {
email: "[email protected]",
country: "GB"
}
},
(resp) => console.log(resp)
);
} catch (e) {
console.error(e);
}
};
return (
<>
<div className="container">
<div className="item">
<label htmlFor="sessionField">Session Token</label>
<input
id="sessionField"
placeholder="Session Token"
type="text"
value={sessionToken}
onChange={(e) => setSessionToken(e.target.value)}
/>
</div>
<div className="item">
<label htmlFor="cardHolderName">Cardholder Name</label>
<input
id="cardHolderName"
placeholder="Cardholder Name"
type="text"
value={cardHN}
onChange={(e) => setCardHN(e.target.value)}
/>
</div>
<div className="item">
<label htmlFor="card-number">Card number</label>
<input
id="card-number"
placeholder="Card number"
type="text"
value={cardNumber}
onChange={(e) => setCardNumber(e.target.value)}
/>
</div>
<div className="item">
<label htmlFor="exp-dateMM">Expiration Date</label>
<input
className="exp-date"
id="exp-dateMM"
placeholder="MM"
type="text"
value={expDateMM}
onChange={(e) => setExpDateMM(e.target.value)}
/>
<input
className="exp-date"
id="exp-dateYY"
placeholder="YY"
type="text"
value={expDateYY}
onChange={(e) => setExpDateYY(e.target.value)}
/>
</div>
<div className="item">
<label htmlFor="card-cvc">CVC</label>
<input
id="card-cvc"
placeholder="CVC"
type="text"
value={cardCVV}
onChange={(e) => setCardCVV(e.target.value)}
/>
</div>
<div className="item100 buttons">
<button className="pay-button" onClick={createPayment}>
Create Payment
</button>
<button className="pay-button" onClick={authenticate3d}>
Authenticate3d
</button>
</div>
</div>
</>
);
});
Last modified September 2024