新着
チェックアウトSingle-Page Checkout
Contact, shipping and payment in one scrolling form with a single place-order button.
#checkout#form#single-page
3 個のフレームワーク中級
Loading…
Apple Pay, Google Pay and PayPal-style express buttons over a labelled "or" divider.
<!--
Express-wallet buttons over a labelled "or" divider. The brand marks are plain
inline SVG/text stand-ins - NOT the real Apple/Google/PayPal logos, which are
trademarked and must be dropped in from each provider's own SDK/brand kit. Each
button is a real <button type="button"> with an aria-label, because the wordmark
alone is not a reliable accessible name.
-->
<div class="w-full max-w-sm space-y-3">
<button aria-label="Pay with Apple Pay" class="flex w-full items-center justify-center gap-2 rounded-lg bg-black px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-offset-gray-950" type="button">
<svg viewBox="0 0 24 24" class="h-4 w-4" fill="currentColor" aria-hidden="true"><path d="M16.5 3c.1 1-.3 2-1 2.8-.6.7-1.7 1.3-2.7 1.2-.1-1 .4-2 1-2.7C14.5 3.6 15.6 3 16.5 3zm2.9 15.3c-.5 1.1-.7 1.6-1.3 2.6-.9 1.4-2.1 3.1-3.6 3.1-1.4 0-1.7-.9-3.5-.9s-2.2.9-3.5.9c-1.5 0-2.7-1.6-3.5-3C1.8 17 1.5 12.6 3.6 10.3c1-1.1 2.3-1.8 3.6-1.8 1.4 0 2.3.9 3.5.9 1.1 0 1.8-.9 3.5-.9 1.2 0 2.5.7 3.4 1.8-3 1.6-2.5 5.9.2 7z"/></svg>
<span>Apple Pay</span>
</button>
<button aria-label="Pay with Google Pay" class="flex w-full items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-5 py-3 text-sm font-semibold text-gray-900 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" type="button">
<svg viewBox="0 0 24 24" class="h-4 w-4" aria-hidden="true"><path fill="#4285F4" d="M12 11v2.8h4c-.2 1-1.4 3-4 3-2.4 0-4.3-2-4.3-4.5S9.6 8 12 8c1.3 0 2.2.6 2.7 1l1.9-1.9C15.4 6 13.9 5.3 12 5.3 8.3 5.3 5.3 8.3 5.3 12s3 6.7 6.7 6.7c3.9 0 6.4-2.7 6.4-6.5 0-.5 0-.8-.1-1.2H12z"/></svg>
<span>Google Pay</span>
</button>
<button aria-label="Pay with PayPal" class="flex w-full items-center justify-center gap-2 rounded-lg bg-[#ffc439] px-5 py-3 text-sm font-bold text-[#003087] transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#003087] focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-offset-gray-950" type="button">
<svg viewBox="0 0 24 24" class="h-4 w-4" fill="currentColor" aria-hidden="true"><path d="M9.5 5h5.2c2.4 0 4 1.4 3.6 3.9-.4 2.6-2.3 3.9-4.8 3.9h-1.4c-.4 0-.7.3-.8.7l-.7 4.2c0 .2-.2.4-.5.4H6.9c-.3 0-.5-.3-.4-.6L8.9 5.4c.1-.2.3-.4.6-.4z"/></svg>
<span>PayPal</span>
</button>
<div class="flex items-center gap-3 py-1" role="separator" aria-label="or pay with card">
<span class="h-px flex-1 bg-gray-200 dark:bg-gray-800"></span>
<span class="text-xs font-medium uppercase tracking-wide text-gray-400 dark:text-gray-500">or</span>
<span class="h-px flex-1 bg-gray-200 dark:bg-gray-800"></span>
</div>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
onSelect | (method: string) => void | - | ユーザーが選択したメニュー項目を引数に呼ばれます。 |
className | string | - | ルート要素にマージされる追加クラス。 |
The brand marks are plain inline SVG stand-ins, NOT the trademarked logos - drop the real ones in from each provider's SDK. Every button is a real `<button>` with an `aria-label`, since the wordmark alone is not a reliable accessible name. Wire `onSelect`, which fires `apple`, `google` or `paypal`.