// 諸々を定義
// 本旨から逸れるので割愛
const clientSecret = 'xxxxx'
const stripe = await getStripe()

// カード番号を入力する要素を生成
const elements = stripe.elements()
const card = elements.create('card', {
  hidePostalCode: true
})

// blurイベント発生時に処理実施
card.on('blur', () => {
  // コントロールを入力不可とする
  card.update({ disabled: true })

  stripe.confirmCardPayment(clientSecret, {
    payment_method: {
      card
    }
  }).then((confirmResult) => {
    if (confirmResult.error) {
      // エラーありの場合、入力完了を示すアラートを表示
      // 割愛

      // コントロールを再度入力可能とする
      card.update({ disabled: false })
    } else {
      // エラーなしの場合、画面項目を編集不可とする
      // 割愛
    }
  }).catch((error) => {
    // システムエラーの場合
    // 割愛
  })
})

// IdがCardNoの要素の配下にマウント
card.mount('#CardNo')

  1) トップページ -> 検索 -> カートに入れる -> 注文情報入力 -> 購入:
     SecurityError: Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.

  1) トップページ -> 検索 -> カートに入れる -> 注文情報入力 -> 購入:
     IntegrationError: The following error originated from your application code, not from Cypress.

  > You have an in-flight confirmCardPayment! Please be sure to disable your form submit button when confirmCardPayment is called.

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.

https://on.cypress.io/uncaught-exception-from-application

it('トップページ -> 検索 -> カートに入れる -> 注文情報入力 -> 購入', () => {
  const options = {
    timeout: 10000
  }

  // 他のシナリオは割愛

  // クレジットカード情報を設定
  // Stripe起因で発生する特定のエラーを無視する
  cy.on('uncaught:exception', (error) => {
    if (/You have an in-flight confirmCardPayment/gi.test(error.message)) {
      return false
    }
    // 他のエラーは無視しない
    return true
  })

  // 読み込みを確認
  cy.frameLoaded('#CardNo iframe')

  // カード番号・有効期限・セキュリティコードを入力
  cy.iframe('#CardNo iframe')
    // カード番号のinputを選択
    .find('input[placeholder="カード番号"]')
    // 各inputに値をフル桁入力すると、自動的に次のinputにフォーカスされるのでありがたく利用する
    .type(['4242424242424242', '01', '50', '123'].join(''))

  // Stripeのレスポンスを確認
  cy.get('#CardNo')
    // 他の要素を適当にクリックし、blurイベントを発火させる
    .click()
    // waitUntil()は `cypress-wait-until` というプラグインのものですが割愛
    .waitUntil(() => cy.contains('お支払い情報を確認しました'), options)

  // 他のシナリオは割愛
})

{
  "chromeWebSecurity": false
}