ワンクリック決済ボタンを追加する

The Express Checkout Element gives you a single integration for accepting payments through one-click payment buttons. Supported payment methods include Link, Apple Pay, Google Pay, PayPal, and Amazon Pay.

デモを試す

次のデモでは、事前構築済みのオプションの一部を切り替えて、決済インターフェイスの背景色、レイアウト、サイズ、配送先住所の収集を変更できます。デモでは、利用可能なプラットフォームでのみ Google Pay と Apple Pay が表示されます。決済手段ボタンは、対応している国でのみ表示されます。

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

前提条件

開始する前に、次のことを行う必要があります。

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

ワンクリック決済を処理する

Express Checkout Element は、顧客が支払いを確定すると、confirm イベントを発行します。confirm を呼び出してイベントに応答するハンドラーを作成し、Express Checkout Element に渡します。

このイベントには、次のフィールドも含まれています。

• expressPaymentType: One of 'apple_pay', 'google_pay', 'link', 'paypal', or 'amazon_pay'.
• billingDetails:顧客の請求の詳細に関する情報を含むオブジェクト。
• shippingAddress:顧客の配送先住所に関する情報を含むオブジェクト。
• shippingRate:選択した配送料に関する情報を含むオブジェクト。

<div id="express-checkout-element"></div>

const expressCheckoutElement = checkout.createExpressCheckoutElement();
expressCheckoutElement.on('confirm', (event) => {
  checkout.confirm({expressCheckoutConfirmEvent: event})
});
expressCheckoutElement.mount('#express-checkout-element');

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

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

Collect additional customer details

You can collect additional information from the Express Checkout Element by configuring options on your Checkout Session, such as phone_number_collection, shipping_address_collection, and shipping_options.

curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  -d mode=payment \
  -d ui_mode=custom \
  -d return_url={{RETURN_URL}} \
  -d "phone_number_collection[enabled]"=true \
  -d "shipping_address_collection[allowed_countries][0]"=US \
  -d "shipping_options[0][shipping_rate]"=
{{SHIPPING_RATE_ID}}