@slashfi/elements-react

React Elements that render the payment-method form for one Slash PaymentIntent and confirm it from the browser.

Your server creates the intent and hands the clientSecret to the page; the SDK renders the form, tokenizes the payment method, and runs any buyer step such as 3-D Secure. You keep full control of the surrounding checkout UI, including the email, name, and billing-address fields.

Requires React 18 or 19.

Install

npm install @slashfi/elements-react

Quickstart

1. Your server calls POST /payments/payment-intent and returns the clientSecret to the browser.
2. Wrap your checkout in <PaymentProvider clientSecret={...}>, render <PaymentElement /> where the form belongs, and render the required <BrandingElement />.
3. Collect email, name, and billing address in your own fields, then call confirm() from usePaymentElements().
4. Treat the result as "the buyer is done", not "the payment settled". Fulfill from your server when the intent's status becomes succeeded.

import { useState } from 'react';
import {
  BrandingElement,
  PaymentElement,
  PaymentProvider,
  usePaymentElements,
  type PaymentError,
} from '@slashfi/elements-react';

function CheckoutForm() {
  const payment = usePaymentElements();
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [postalCode, setPostalCode] = useState('');
  const [error, setError] = useState<PaymentError | null>(null);
  const [submitting, setSubmitting] = useState(false);

  if (payment.state === 'loading') return <p>Loading…</p>;
  if (payment.state === 'error') return <p>{payment.error.message}</p>;

  async function handlePay() {
    setSubmitting(true);
    setError(null);

    const result = await payment.confirm({
      email,
      name,
      billingAddress: { line1: '123 Main St', postalCode, country: 'US' },
      returnUrl: 'https://merchant.example/checkout/complete',
    });

    setSubmitting(false);

    if (result.type === 'error') {
      setError(result.error);
      return;
    }

    // The buyer is done. This is not a settlement guarantee — your server
    // fulfills when the intent reaches `succeeded`.
    window.location.assign(`/orders/pending?pi=${result.paymentIntentId}`);
  }

  return (
    <>
      <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Name on card" />
      <input value={postalCode} onChange={(e) => setPostalCode(e.target.value)} placeholder="ZIP" />

      <PaymentElement />

      {error && <p role="alert">{error.message}</p>}

      <button
        type="button"
        disabled={!payment.canConfirm || submitting}
        onClick={() => void handlePay()}
      >
        Pay
      </button>

      {/* Required. Payments are blocked on pages that omit this. */}
      <BrandingElement />
    </>
  );
}

export function Checkout({ clientSecret }: { clientSecret: string }) {
  return (
    <PaymentProvider clientSecret={clientSecret}>
      <CheckoutForm />
    </PaymentProvider>
  );
}

Documentation

Check the docs for more information: docs.slash.com/docs/payments/payment-elements