Full Samples – Nuvei Documentation

On this page:

Overview
Three-Part Card Fields
One-Part Card Field
Without Nuvei Fields

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

To try-out sample Web SDK Flow ReactJS code in a sandbox, see the Three-Part Card Fields ReactJS Sandbox topic.

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: "someone@somedomain.com",
              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: "someone@somedomain.com",
              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: "someone@somedomain.com",
              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

To try-out sample Web SDK Flow ReactJS code in a sandbox, see the One-Part Card Field ReactJS Sandbox topic.

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: "someone@somedomain.com",
              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: "someone@somedomain.com",
              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: "someone@somedomain.com",
              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

To try-out sample Web SDK Flow ReactJS code in a sandbox, see the Without Nuvei Fields ReactJS Sandbox topic.

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: "someone@somedomain.com",
            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: "someone@somedomain.com",
            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>
    </>
  );
});