ワンクリックの支払いボタンを追加

Express Checkout Element を使用すると、ワンクリックの決済ボタンで決済を受け付ける単一の実装システムを実現できます。サポートされる決済手段には、Link、Apple Pay、Google Pay などがあります。

Try the demo

以下のデモでは、構築済みのオプションを切り替えて、支払いインターフェイスの背景の色、レイアウト、サイズ、配送先住所収集を変更できます。このデモでは、Google Pay と Apple Pay が利用可能なプラットフォームでのみ表示されています。支払い方法ボタンは、サポート対象国でのみ表示されます。

デモが表示されない場合は、このページをサポート対象のブラウザーで表示してみてください。

前提条件

開始する前に、以下を行う必要があります。

• ダッシュボードで、Link、 Apple Pay、Google Pay のいずれかを有効にします
• ブラウザーに支払い方法を追加します。たとえば、カードを Google Pay アカウントや Safari のウォレットに追加できます。
• アプリケーションは HTTPS 経由で提供します。これは、開発環境と本番環境で必須です。ngrok などのサービスを利用できます。
• テスト環境と本番環境の両方で**ドメインを登録して確認**します。

Handle one-click payments

The Express Checkout Element emits the confirm event when your customer finalizes their payment. Create a handler that responds to the event by calling confirm and pass it to the Express Checkout Element.

イベントには以下のフィールドも含まれます。

• expressPaymentType: 'apple_pay'、'google_pay'、'link' のいずれか。
• billingDetails: 顧客の請求の詳細に関する情報を含むオブジェクト。
• shippingAddress: 顧客の配送先住所に関する情報を含むオブジェクト。
• shippingRate: 選択された配送料金に関する情報を含むオブジェクト。

import {useCheckout, ExpressCheckoutElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const checkout = useCheckout();
  const handleConfirmExpressCheckout = (event) => {
    checkout.confirm({expressCheckoutConfirmEvent: event})
  };
  return (
    <form>
      <ExpressCheckoutElement onConfirm={handleConfirmExpressCheckout} />
    </form>
  )
};

export default CheckoutForm;

以下のオプションもサポートされています。

• buttonHeight
• buttonTheme
• layout
• paymentMethodOrder
• paymentMethods
  • 注: Express Checkout Element で利用できる決済手段は、ダッシュボードの設定と Checkout の設定の両方の影響を受けます。デフォルトでは、両設定に基づいて利用可能なすべての決済手段が表示されます。 paymentMethods オプションを設定すると、Express Checkout Element は、指定されたオプションとデフォルトのロジックを統合して、表示する決済手段の最終的なセットを決定します。