Split Payment Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Charge button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same SplitFields component and share the block's state, so an amount typed in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Every amount is a whole number of cents. What you type ("49.50") is read into cents once, and the total, the allocation and the remainder are integer sums, so the remainder is exactly zero or it isn't: there is no floating-point dust to round. Text that isn't an amount, an amount of zero, and an amount above what a gift card or credit holds are each refused with a sentence on that row. The figures are formatted with Intl.NumberFormat in one left-to-right run, so a price never reorders in a right-to-left page.

It belongs to the last row. It sets that row to its current amount plus what remains, but never past what the method holds: on a gift card or store credit it stops there and says how much is still to cover ("Store credit holds $10.00, so $5.00 is still to cover"). With nothing left, or with too much allocated, it says so and changes nothing. Adding a method fills its row with whatever fits, and removing one puts its share back in the remainder.

A disabled button can't be focused or explain itself. Pay stays a real button marked aria-disabled, described by the line above it ("Allocated $74.50 of $84.50: $10.00 still to cover"). Pressing it early, or pressing Enter in an amount, speaks that line and moves focus to the first row with a problem, or to the last row when the sum is simply short. It pays only when every row is sound and the remainder is exactly $0.00.

Everything. Paying only changes the ticket behind the dialog and says, in the polite status, that nothing was charged. The methods and their balances are typed in the file, and no card number is typed here: a real point of sale takes cards on its terminal or with its payment provider's hosted fields. In your app load the customer's methods and balances from your API, authorize each part, and only mark the ticket paid when every part succeeded.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the first amount and stays inside until it closes, and Escape, Cancel and the close button return focus to Charge. Each amount is named for its method ("Amount for Gift card"), each Remove button says which method it removes, and adding, removing and covering are said in the polite status inside the dialog. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange.