时间戳

首页 > 解决方案 > 如何使用 Vue Stripe Checkout 库为信用卡信息创建离散输入？

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

问题描述

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

显示 CC 信息的各个输入的屏幕截图

基于GitHub README.md 中显示的Vue Stripe Elements 示例，我的单文件 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）以及名称、国家和电子邮件可以创建。我希望对 Stripe 有经验的人能解释一下。

标签： javascriptvue.jsstripe-payments

解决方案

不幸的是，在当前版本的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 托管的表单，其余部分由他们处理。在这种情况下，该库有一个组件可以轻松重定向到 Stripe Checkout：

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

推荐阅读