Add Split with others to checkout

Your checkout shows the official Split with others button beside Pay now. When a customer selects it, the button calls a route on your own server. That route starts the split and returns the session URL. The browser never sends order details to PayShare.

Placement

• Put the button directly under or beside Pay now, on the same step.
• Leave Pay now exactly as it is.
• Use the official button. It owns the label, logo and brand colour. You control width, spacing and layout.
• Show it only for orders your server can start a split for.

React and Next.js

Install @payshare/checkout and render PayShareButton next to Pay now.

npm install @payshare/checkout

import { PayShareButton } from "@payshare/checkout";

export function CheckoutActions({ booking }) {
  return (
    <div className="checkout-actions">
      <PayNowButton booking={booking} />
      <PayShareButton
        bookingId={booking.id}
        amountMinor={booking.totalMinor}
        currency={booking.currency}
        className="w-full"
      />
    </div>
  );
}

bookingIdstringRequired

Your booking or order reference. Your server looks the order up with it.

amountMinornumberRequired

The order total in minor units. It is passed to your route as a hint only. Your server must use its own stored total.

currencystringRequired

Three-letter currency code, for example NZD. Also a hint only.

startSplitPathstring

Your start-split route on the same origin as the page. Defaults to /api/payshare/start-split.

className, stylestring, object

Size and position the button.

disabledboolean

Show the button but prevent starting a split.

onError(message: string) => void

Called when your route returns an error or no session URL.

onRedirect(url: string) => void

Replaces the built-in redirect. If you set it, you must move the current tab to the URL yourself. Leave it unset unless you need it.

What the button does

• Sends POST to your start-split route with JSON { bookingId, amountMinor, currency }.
• Reads redirectUrl or sessionUrl from the response and moves the current tab to it. Do not open the session in a new tab.
• If the response is not successful or has no URL, it shows error.message and calls onError.

// 200: the button moves the browser to the session
{ "redirectUrl": "https://app.payshare.nz/session/…", "sessionUrl": "https://app.payshare.nz/session/…" }

// 4xx or 5xx: the button shows the message instead
{ "error": { "message": "Split isn’t available for this booking" } }

Build this route in Start a split.

Any website: script tag

For WordPress, PHP or plain HTML, load PayShare.js and add a placeholder. It renders the same official button and calls the same start-split route on your server.

<!-- Under your Pay now button -->
<div
  data-payshare="split"
  data-payshare-endpoint="/api/payshare/start-split"
  data-payshare-booking-id="BK-10482"
  data-payshare-amount-minor="42000"
  data-payshare-currency="NZD"
></div>

<script src="https://app.payshare.nz/js/v1/payshare.js" defer></script>

data-payshare="split"attributeRequired

Marks the placeholder.

data-payshare-endpointpath

Your start-split route. Defaults to /api/payshare/start-split.

data-payshare-booking-idstring

Your booking or order reference. Sent to your route as bookingId and orderReference.

data-payshare-amount-minorinteger

Order total in minor units, as a hint.

data-payshare-currencystring

Three-letter currency code, as a hint.

data-payshare-widthpixels

Button width.

data-payshare-eligibility-endpointpath

Optional availability route on your server. See availability.

data-payshare-debugtrue | false

Logs requests to the browser console while you build.

If your page renders the placeholder after the script loads, as single-page apps do, call PayShare.mount().

// After your framework renders the placeholder
window.PayShare?.mount();

Availability (optional)

PayShare.js can ask your server whether a split is available before the customer selects it. Set data-payshare-eligibility-endpoint to a GET route on your server. It receives the booking reference, amount and currency as query parameters.

{ "allowed": true }

{ "allowed": false, "unavailableLabel": "Split unavailable for this booking" }

The button stays enabled while the check runs, and if the route is missing or fails. The check only changes what the button shows. PayShare enforces every rule again when your server starts the split.