sstest-react v0.1.8

NETOPIA Payments

NETOPIA Payments React component

Installation

Install the package with:

npm i netopia-payments-react

or

yarn add netopia-payments-react

CardForm

The CardForm component is a UI component designed for the web. It allows users to enter card payment information, validates input, and handles errors.

import { useRef } from "react";
import { CardForm } from 'netopia-payments-react'

export const Form = () => {
    const ref = useRef();

    const onSuccess = (data) => {
        console.log("success", data);
    };

    const onError = (data) => {
        console.log("error", data);
    };

    const onSubmit = (e) => {
        e.preventDefault();
        ref.current.startPayment();
    };

    return (
        <form onSubmit={onSubmit}>
            <CardForm
              purchaseID="XXXX-XXXX-XXXX"
              ref={ref}
              isLive={false}
              onSuccess={onSuccess}
              onError={onError}
        />
    )
}

useNetopiaPayments

The useNetopiaPayments hook provides functions and state variables for managing and validating payment information.

import { useNetopiaPayments } from "netopia-payments-react";

export const Form = () => {
  const {
    handler,
    setAccount,
    setCvv,
    setExpYear,
    setExpMonth,
    setBonus,
    setInstallments,
    cardOptions: { installments, bonus },
    errors,
  } = useNetopiaPayments(
    purchaseID,
    {
      onSuccess: async (data) => {
        alert("Payment success: " + JSON.stringify(data));
      },
      onError: (error) => {
        console.log(error);
      },
      before3dRedirect: () => {},
    },
    isLive
  );

  return (
    <form onSubmit={handler}>
      <div>
        <input
          {...inputProps("account")}
          onChange={(e) => setAccount(e.currentTarget.value)}
        />
        <input
          {...inputProps("expMonth")}
          onChange={(e) => setExpMonth(e.currentTarget.value)}
        />
        <input
          {...inputProps("expYear")}
          onChange={(e) => setExpYear(e.currentTarget.value)}
        />
        <input
          {...inputProps("secretCode")}
          onChange={(e) => setCvv(e.currentTarget.value)}
        />
      </div>
      {installments?.length > 1 && (
        <div>
          <label>Installments</label>
          <div>
            <select
              {...inputProps("installments")}
              onChange={(e) => setInstallments(e.currentTarget.value)}
            >
              <option>Choose installments</option>
              {installments?.map((value) => (
                <option key={value} value={value}>
                  {value}
                </option>
              ))}
            </select>
          </div>
        </div>
      )}
      {options > 0 && (
        <div>
          <label>Bonus points</label>
          <input
            {...inputProps("secretCode")}
            onChange={(e) => setBonus(e.currentTarget.value)}
          />
        </div>
      )}
    </form>
  );
};

Hook Parameters

State Variables