如何使用 Vue Stripe Checkout 库为信用卡信息创建离散输入？

Question

在其 GitHub 页面上的示例屏幕截图中显示， Vue Stripe Checkout库显示了一个信用卡输入表单，其中包含卡信息（CC#、到期、CVV）以及名称、国家/地区和 email 的单独输入：

---

基于 GitHub README.md 中显示的Vue 条纹元素示例，我的单文件 Vue 组件当前为所有信用卡信息创建了一个输入。 它看起来像这样：

这是创建它的代码：

<template>
  <div>
    <StripeElements
      ref="elementsRef"
      :pk="publishableKey"
      :amount="amount"
      @token="tokenCreated"
      @loading="loading = $event"
    >
    </StripeElements>
    <button @click="submit">Pay ${{ amount / 100 }}</button>
  </div>
</template>

<script>
import { StripeElements } from "vue-stripe-checkout";

export default {
  components: {
    StripeElements
  },
  data: () => ({
    loading: false,
    amount: 1000,
    publishableKey: process.env.VUE_APP_PUBLISHABLE_KEY,
    token: null,
    charge: null
  }),
  methods: {
    submit() {
      this.$refs.elementsRef.submit();
    },
    tokenCreated(token) {
      this.token = token;
      // for additional charge objects go to https://stripe.com/docs/api/charges/object
      this.charge = {
        source: token.id,
        amount: this.amount, // the amount you want to charge the customer in cents. $100 is 1000 (it is strongly recommended you use a product id and quantity and get calculate this on the backend to avoid people manipulating the cost)
        description: this.description // optional description that will show up on stripe when looking at payments
      }
      this.sendTokenToServer(this.charge);
    },
    sendTokenToServer(charge) {
      // Send to charge to your backend server to be processed
      // Documentation here: https://stripe.com/docs/api/charges/create
      console.log(charge)
    }
  }
};
</script>

<style lang="scss" scoped></style>

但是，在搜索了其文档、有限示例（此处及其源代码）和问题部分之后，我不清楚信用卡输入表单如何与卡信息（CC#、到期、CVV）以及名称的单独输入, 国家, 和 email 可以创建。 我希望对 Stripe 有经验的人能解释一下。

Answer 1

不幸的是，在当前版本的Vue Stripe Checkout中无法创建单独的卡号、到期时间和 cvc 输入。

该库的 Stripe Elements 组件在后台创建了一个Card 元素，如下所示：

https://github.com/jofftiquez/vue-stripe-checkout/blob/master/src/Elements.vue#L84

这意味着该组件将包括卡号、到期时间和 cvc 输入组合，如第二个屏幕截图所示。 据我所知，该库没有用于创建离散卡号、到期和 cvc 输入的组件或选项，这需要创建三个不同的条纹元素，如下所示：jsfiddle.net/3p89x9gL

第一个屏幕截图是Stripe Checkout的图像，它是由 Stripe 构建的产品。 这个想法是您向您的网站添加一个按钮，该按钮重定向到 Stripe 托管的表单，他们处理 rest。 在这种情况下，该库有一个组件可以轻松重定向到 Stripe Checkout：

https://github.com/jofftiquez/vue-stripe-checkout#vue-stripe-checkout-1