ワンクリックの支払いボタンを追加するベータ

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

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

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

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

Express Checkout Element は、顧客が支払いを確定したときに confirm イベントを送信します。event.confirm() を呼び出してイベントに応答するハンドラを追加し、それを Express Checkout Element に渡します。

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

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

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

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

export default CheckoutForm;

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

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