Build · New

Payment Buttons

Apple Pay and Google Pay buttons as Apple and Google supply them, from their official libraries: the mark, wording and translation are theirs; Kanz sets the height, width, shape and language.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/payment-buttons

Usage

import { ApplePayButton, GooglePayButton } from "@/components/ui/payment-buttons";

<ApplePayButton type="buy" onClick={startApplePaySession} />
<GooglePayButton type="buy" environment="PRODUCTION" allowedPaymentMethods={methods} onClick={openGooglePay} />

Examples

Apple Pay

type (buy, pay, plain), buttonStyle (black on light surfaces, white and outline on dark ones) and shape (rounded or pill). In Arabic, Apple writes “الشراء باستخدام”.

Google Pay

buttonStyle is dark on light surfaces, light on dark ones. Google applies the corner radius page-wide, so use one shape for every Google Pay button on a page. It shows the payer's saved card by itself (Figma's With Card type).

API reference

ApplePayButton

Prop	Type	Default	Description
`type`	`"buy" \| "pay" \| "plain"`	`"buy"`	Figma's Type.
`buttonStyle`	`"black" \| "white" \| "outline"`	`"black"`	Figma's Style (Apple's `buttonstyle`).
`shape`	`"rounded" \| "pill"`	`"rounded"`	Figma's Shape: `radius/8` or a pill.
`locale`	`string`		Apple's locale (“ar-AB”, “en-US”). Defaults to the page language around the button.
`onClick`	`() => void`		Starts your `ApplePaySession`.

GooglePayButton

Prop	Type	Default	Description
`allowedPaymentMethods`	`PaymentMethod[]`		Required. As in your Google Pay payment data request.
`onClick`	`() => void`		Required. Opens the Google Pay sheet (`loadPaymentData`).
`type`	`"buy" \| "pay" \| "plain"`	`"buy"`	Figma's Type.
`buttonStyle`	`"dark" \| "light"`	`"dark"`	Figma's Style (Google's `buttonColor`).
`shape`	`"rounded" \| "pill"`	`"rounded"`	Figma's Shape: `radius/4` or a pill. One per page: Google applies the last value to every button.
`environment`	`"TEST" \| "PRODUCTION"`	`"TEST"`	`PRODUCTION` with your merchant ID.
`locale`	`string`		Google's locale (“ar”). Defaults to the page language.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`TabEnter`	Both buttons come from Apple and Google and handle the keyboard themselves.

ARIA

The name and role come from the official library (“Buy with Apple Pay”), in the page language.
The libraries load from Apple's and Google's servers when the button appears; always offer another way to pay for people without the wallet.
The Apple Pay button shows only where Apple Pay works (Safari or a supported browser, over HTTPS); elsewhere it takes no space. Check isReadyToPay before showing Google Pay.

Arabic and RTL notes

Mirrors

The Arabic words sit at the inline start, and the buttons follow the page order.

Does not mirror

The Apple Pay and Google Pay marks never mirror or translate: Apple and Google control them.

Numerals: No numbers in the button; Google shows the saved card's digits itself.
Arabic typography: The type and wording are Apple's and Google's, not the Kanz fonts.
Mixed-direction text: The button language follows the page lang around it (ar → “ar-AB” for Apple), so Arabic shows inside an Arabic island on an English page.

All components ›