Top Bar Payment Methods Banner Block for React

Edit METHODS at the top of the file: each entry is an icon and a label. Four chips fit on one line beside the note from the medium breakpoint (the icons appear from the large one); more will wrap the chips to a second line, so keep the list to the methods that matter and let "See all methods" carry the rest.

Payment marks are trademarks with their own usage rules, and a block shouldn't ship them. The chips say what kind of method it is (cards, a bank transfer, a wallet, an invoice), which is what most shoppers look for. If your agreement lets you show brand marks, put them in the chips' place; keep each as a list item with its name as text for screen readers.

It's copy for the demo: replace "TLS 1.3" with what your checkout really guarantees, or drop that part and keep "Secure checkout". On a phone the words "over TLS 1.3" are hidden to keep the note on one line, and the number sits in a bdi so it keeps its order in right-to-left pages.

The note's cell has a start-side border and a Guides layer that draws only the plus mark at its top corner, so the divider meets the page's top rule at a mark. Under the medium breakpoint the border goes and a second Guides layer draws a hairline with marks between the stacked parts instead. The block draws no bottom rule: the next block's top rule is its bottom edge.

The two parts stack, each one line: the four chips without icons ("Bank transfer" shortens to "Bank" for sighted users; screen readers still hear the whole name), then the lock, "Secure checkout" and the link. Nothing scrolls sideways, and in a right-to-left page the order mirrors.