liveh5-nuxt/app/components/StripeCheckout.vue

<template>
  <div class="stripe-container">
    <form id="payment-form" @submit.prevent="handleSubmit">
      <div id="payment-element">
        <!--Stripe.js injects the Payment Element-->
      </div>
      <button id="submit">
        <div class="spinner hidden" id="spinner"></div>
        <span id="button-text">Pay now</span>
      </button>
      <div id="payment-message" class="hidden"></div>
    </form>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// The items the customer wants to buy
const items = [{ id: "xl-tshirt", amount: 1000 }]

const stripe = ref(null)
const elements = ref(null)
const isLoading = ref(false)

onMounted(async () => {
  try {
    // 初始化 Stripe
    stripe.value = window.Stripe("pk_test_51QfbSAAB1Vm8VfJq3AWsR4k2mZjnlF7XFrmlbc6XVXrtwXquAUfwzZmOFDbxMIAwqJBgqao8KLt2wmPc4vNOCTeo00WB78KtfV")
    await initialize()
  } catch (error) {
    showMessage("Failed to initialize payment system")
  }
})

// Fetches a payment intent and captures the client secret
const initialize = async () => {
  try {
    const response = await fetch("/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ items }),
    })
    const { clientSecret } = await response.json()

    const appearance = {
      theme: 'stripe',
    }

    // 创建 elements 实例
    elements.value = stripe.value.elements({ 
      appearance, 
      clientSecret,
    })

    // 创建并挂载 Payment Element
    const paymentElement = elements.value.create("payment", {
      layout: "accordion",
    })

    // 确保挂载到正确的 DOM 元素
    const mountElement = document.getElementById("payment-element")
    if (mountElement) {
      paymentElement.mount(mountElement)
    } else {
      throw new Error("Payment element mount point not found")
    }
  } catch (error) {
    showMessage("Failed to load payment form")
  }
}

const handleSubmit = async () => {
  if (!stripe.value || !elements.value) {
    showMessage("Payment system not initialized")
    return
  }

  setLoading(true)

  try {
    const { error } = await stripe.value.confirmPayment({
      elements: elements.value,
      confirmParams: {
        return_url: window.location.origin + "/complete.html",
      },
    })

    if (error) {
      if (error.type === "card_error" || error.type === "validation_error") {
        showMessage(error.message)
      } else {
        showMessage("An unexpected error occurred.")
      }
    }
  } catch (e) {
    showMessage("Payment processing failed")
  } finally {
    setLoading(false)
  }
}

const showMessage = (messageText) => {
  const messageContainer = document.querySelector("#payment-message")

  messageContainer.classList.remove("hidden")
  messageContainer.textContent = messageText

  setTimeout(() => {
    messageContainer.classList.add("hidden")
    messageContainer.textContent = ""
  }, 4000)
}

// Show a spinner on payment submission
const setLoading = (isLoading) => {
  if (isLoading) {
    // Disable the button and show a spinner
    document.querySelector("#submit").disabled = true
    document.querySelector("#spinner").classList.remove("hidden")
    document.querySelector("#button-text").classList.add("hidden")
  } else {
    document.querySelector("#submit").disabled = false
    document.querySelector("#spinner").classList.add("hidden")
    document.querySelector("#button-text").classList.remove("hidden")
  }
}
</script>

<style scoped>
.stripe-container {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  height: 100vh;
  width: 100vw;
}

form {
  width: 30vw;
  min-width: 500px;
  align-self: center;
  box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
    0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
  border-radius: 7px;
  padding: 40px;
  margin-top: auto;
  margin-bottom: auto;
}

.hidden {
  display: none;
}

#payment-message {
  color: rgb(105, 115, 134);
  font-size: 16px;
  line-height: 20px;
  padding-top: 12px;
  text-align: center;
}

#payment-element {
  margin-bottom: 24px;
}

button {
  background: #0055DE;
  font-family: Arial, sans-serif;
  color: #ffffff;
  border-radius: 4px;
  border: 0;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: block;
  transition: all 0.2s ease;
  box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
  width: 100%;
}

button:hover {
  filter: contrast(115%);
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}

.spinner {
  color: #ffffff;
  font-size: 22px;
  text-indent: -99999px;
  margin: 0px auto;
  position: relative;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 2px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.spinner:before,
.spinner:after {
  position: absolute;
  content: "";
}

.spinner:before {
  width: 10.4px;
  height: 20.4px;
  background: #0055DE;
  border-radius: 20.4px 0 0 20.4px;
  top: -0.2px;
  left: -0.2px;
  -webkit-transform-origin: 10.4px 10.2px;
  transform-origin: 10.4px 10.2px;
  -webkit-animation: loading 2s infinite ease 1.5s;
  animation: loading 2s infinite ease 1.5s;
}

.spinner:after {
  width: 10.4px;
  height: 10.2px;
  background: #0055DE;
  border-radius: 0 10.2px 10.2px 0;
  top: -0.1px;
  left: 10.2px;
  -webkit-transform-origin: 0px 10.2px;
  transform-origin: 0px 10.2px;
  -webkit-animation: loading 2s infinite ease;
  animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 600px) {
  form {
    width: 80vw;
    min-width: initial;
  }
}
</style>