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

Question

Shown in an example screenshot on its GitHub page , Vue Stripe Checkout library displays a credit card input form with individual inputs for the card information (CC#, expiration, CVV) and also the name, country, and email:

---

Based on the Vue Stripe Elements example shown in the GitHub README.md, my single-file Vue component currently creates a single input for all the credit card information. It looks like this:

And this is the code that created it:

<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>

However, after scouring its documentation, limited examples ( here and its source code ), and Issues section, I am unclear on how a credit card input form with individual inputs for the card information (CC#, expiration, CVV) and also the name, country, and email can be created. I am hoping someone with experience with Stripe might be able to shed some light.

Answer 1

Unfortunately, it's not possible to create separate card number, expiry, and cvc inputs in the current version of Vue Stripe Checkout .

The library's Stripe Elements component creates a Card Element under the hood as you can see here:

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

This means that the component will include the card number, expiry, and cvc inputs combined, as shown in your second screenshot. As far as I can tell, the library has no components or options to create discrete card number, expiry, and cvc inputs which would require making three distinct Stripe Elements as shown here: jsfiddle.net/3p89x9gL

The first screenshot is an image of Stripe Checkout which is a product built by Stripe. The idea is that you add a button to your site which redirects to a form hosted by Stripe and they handle the rest. In this case, the library has a component that makes it easy to redirect to Stripe Checkout:

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