コンテンツにスキップ
stripe-pwa-elements

stripe-payment-request-button から stripe-express-checkout-element への移行

なぜ移行が必要か

Section titled “なぜ移行が必要か”

Stripe は stripe.paymentRequest() API を Stripe.js 9.x で削除予定です（2025-09-30 非推奨宣言 / 2026-03-25 削除予定）。 <stripe-payment-request-button> はこの API に依存しているため、非推奨（deprecated） となりました。

代替として、<stripe-express-checkout-element> を使用してください。こちらはモダンな Express Checkout Element API を使用し、Apple Pay・Google Pay・Link・PayPal・Amazon Pay など多数の決済手段をサポートします。

移行前後のコード比較

Section titled “移行前後のコード比較”

Before: <stripe-payment-request-button>

Section titled “Before: <stripe-payment-request-button>”
<stripe-payment-request-button
  publishable-key="pk_test_xxxxx"
  stripe-account="acct_xxxxx"
></stripe-payment-request-button>
const element = document.querySelector('stripe-payment-request-button');


// PaymentRequest オプションを設定
await element.setPaymentRequestOption({
  country: 'US',
  currency: 'usd',
  total: {
    label: 'Total',
    amount: 1099,
  },
  requestPayerName: true,
  requestPayerEmail: true,
});


// Stripe を初期化
await element.initStripe('pk_test_xxxxx');


// 決済メソッドイベントを処理
await element.setPaymentMethodEventHandler(async (event, stripe) => {
  const { error } = await stripe.confirmCardPayment(
    paymentIntent.client_secret,
    {
      payment_method: event.paymentMethod.id,
    },
    { handleActions: false },
  );


  if (error) {
    event.complete('fail');
  } else {
    event.complete('success');
  }
});

After: <stripe-express-checkout-element>

Section titled “After: <stripe-express-checkout-element>”
<stripe-express-checkout-element
  publishable-key="pk_test_xxxxx"
  client-secret="pi_xxxxx_secret_xxxxx"
  amount="1099"
  currency="usd"
  stripe-account="acct_xxxxx"
></stripe-express-checkout-element>
const element = document.querySelector('stripe-express-checkout-element');


// Stripe を初期化
await element.initStripe('pk_test_xxxxx');


// 決済確定イベントを処理（カスタム動作が必要な場合）
element.addEventListener('confirm', async ({ detail }) => {
  const { error } = await detail.stripe.confirmPayment({
    elements: detail.elements,
    confirmParams: {
      return_url: 'https://example.com/success',
    },
  });


  if (error) {
    console.error(error);
  }
});


// デフォルトの確定動作を使用する場合（推奨）
// should-use-default-confirm-action="true"（デフォルト）のまま
// defaultConfirmResult イベントで結果を受け取る
element.addEventListener('defaultConfirmResult', ({ detail }) => {
  if (detail instanceof Error) {
    console.error(detail);
  } else {
    console.log('Success:', detail);
  }
});

Props / Events マッピング

Section titled “Props / Events マッピング”

Props

Section titled “Props”
stripe-payment-request-button stripe-express-checkout-element 備考
publishable-key publishable-key 同じ
stripe-account stripe-account 同じ
application-name application-name 同じ
stripeDidLoaded stripeDidLoaded 同じ（JS プロパティ）
(PaymentRequestOptions の total.amount) amount 属性として直接指定
(PaymentRequestOptions の currency) currency 属性として直接指定
(PaymentRequestOptions の country) (Elements に自動設定) client-secret から自動推定
paymentMethodEventHandler (confirm イベントで代替) イベントリスナーに移行
shippingAddressEventHandler (Express Checkout Element の shippingaddresschange で代替) Stripe.js 直接利用
shippingOptionEventHandler (Express Checkout Element の shippingoptionchange で代替) Stripe.js 直接利用

Events

Section titled “Events”
stripe-payment-request-button stripe-express-checkout-element 備考
stripeLoaded stripeLoaded 同じ
(paymentmethod コールバック) confirm Express Checkout 確定時に発火
(なし) expressCheckoutClick ボタンクリック時に発火
(なし) defaultConfirmResult デフォルト確定動作の結果
(なし) cancel ユーザーがキャンセルした場合

Methods

Section titled “Methods”
stripe-payment-request-button stripe-express-checkout-element 備考
initStripe(key, options) initStripe(key, options) ほぼ同じ
setPaymentRequestOption(options) (属性 amount, currency で代替) 移行先では属性で指定
setPaymentMethodEventHandler(fn) (confirm イベントで代替) イベントリスナーに移行
setPaymentRequestShippingOptionEventHandler(fn) (Stripe Elements API で代替) より柔軟な API を使用
setPaymentRequestShippingAddressEventHandler(fn) (Stripe Elements API で代替) より柔軟な API を使用
isAvailable(type) (Express Checkout は自動的にボタンを表示制御) 明示的な確認不要
(なし) updateProgress(status) ローディング状態の制御
(なし) setErrorMessage(msg) エラーメッセージの表示
(なし) updateElementOptions(options) 動的なオプション更新

関連リンク

Section titled “関連リンク”

次に読む

Section titled “次に読む”