React-apuvälineet

@feitpay/react sisältää pieniä rakennuspalikoita verkkokauppaasi varten, eivätkä ne tarvitse tunnistetietoja. Luo maksuaikomukset palvelimellasi; välitä selaimelle vain checkout_url tai kassaistunnon tunniste.

pnpm add @feitpay/react @feitpay/sdk

<CheckoutButton>

Aito linkki (navigointisemantiikka, toimii ilman JavaScriptiä) isännöityyn kassaan. Vain absoluuttiset http(s)-URL-osoitteet renderöidään; kaikesta muusta (esimerkiksi javascript:) tulee käytöstä poistettu painike.

import { CheckoutButton } from '@feitpay/react';

<CheckoutButton checkoutUrl={intent.checkout_url} className="btn-primary" locale="pt-BR" />;

newTab avaa uuden välilehden attribuutilla rel="noopener noreferrer".

useCheckoutSession

Seuraa istuntoa omalta tilaussivultasi. Koukku tilaa palvelimen lähettämät tapahtumat, siirtyy tarvittaessa kyselyyn ja lopettaa, kun maksu saavuttaa päätetilan.

import { PaymentStatus, useCheckoutSession } from '@feitpay/react';

function OrderStatus({ sessionId }: { sessionId: string }) {
  const { status, session, error, transport } = useCheckoutSession(sessionId, {
    baseUrl: 'https://api.feitpay.com',
    pollIntervalMs: 3000,
  });
  if (error) return <p role="alert">{error.message}</p>;
  if (!status) return <p>Loading payment status…</p>;
  return (
    <>
      <PaymentStatus status={status} live />
      {session?.confirmations && (
        <p>
          {session.confirmations.current} / {session.confirmations.required} confirmations
        </p>
      )}
      <small>updates via {transport}</small>
    </>
  );
}

Istuntotunnisteet validoidaan (cs_ + 32 merkkiä) ennen kuin yhtään pyyntöä tehdään. Vain julkisia päätepisteitä kutsutaan.

<PaymentStatus>

Näyttää tilan tekstinä sekä koristeellisena symbolina (aria-hidden), ja siinä on data-status- ja data-tone-attribuutit tyylittelyä varten. Tilanimet ovat saatavilla englanniksi, portugaliksi (Brasilia) ja suomeksi, ja ne vastaavat isännöityä kassaa ja hallintapaneelia. live-ominaisuuden kanssa muutokset ilmoitetaan kohteliaasti (polite) avustaville teknologioille.

[data-feitpay-status][data-tone='success'] { color: var(--semantic-success); }
[data-feitpay-status][data-tone='warning'] { color: var(--semantic-warning); }

Älä koskaan välitä maksun tilaa pelkällä värillä.