Vue example component: payment with card

PaymentWithCard.vue

<script>
import paymentAPI from '@/api/paymentAPI'

export default {
  name: 'PaymentWithCard',

  props: ['amountInEuros'],

  data() {
    return {
      cardNumber: null,
      cardHolder: null,
      expirationDate: null
    }
  },

  methods: {
    ...mapActions('payments', ['addPayment']),

    async pay() {
      const result = await paymentAPI.pay({
        amount: this.amountInEuros,
        card: this.cardNumber,
        holder: this.cardHolder,
        expiration: this.expirationDate
      })

      if (result.ok) {
        this.$successMessage('Payment successful')
      } else {
        this.$errorMessage('You have no money!')
      }
    }
  }
}
</script>

<template>
  <el-card class="payment-card">
    <div class="payment-card__content">
      <p>Pay {{ amountInEuros }} €</p>
      <el-input v-model="cardNumber" placeholder="card number" />
      <el-input v-model="cardHolder" placeholder="card holder" />
      <el-input v-model="expirationDate" placeholder="expiration date" />
      <el-button type="primary" @click.native="pay" data-qa="pay-btn">
        Pay
      </el-button>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
.payment-card {
  width: 40%;
  margin: auto;

  &__content {
    display: flex;
    flex-direction: column;

    & > *:not(:last-child) {
      padding-bottom: 10px;
    }
  }
}
</style>