Does configuration for fonts exists?

[dvlden]

Apparently, this does not seem to do anything:

<template>
  <card
    class="StripeCard"
    :stripe="publicKey"
    :options="options"
    @change="checkForErrors"
    :fonts="[{
      cssSrc: 'https://fonts.googleapis.com/css?family=Roboto+Condensed:700'
    }]"
  />
</template>

<script>
  import { Card } from 'vue-stripe-elements-plus'

  export default {
    components: {
      Card
    },

    data () {
      return {
        publicKey: '',
        options: {
          style: {
            base: {
              color: '#9AA7C0',
              fontSmoothing: 'antialiased',
              fontSize: '16px',
              fontWeight: 700,
              fontFamily: 'Roboto Condensed'
            }
          },
          hidePostalCode: true
        }
      }
    },

    methods: {
      checkForErrors (event) {
        this.errors.remove('card')

        if (!event.error) {
          return
        }

        this.errors.add({
          field: 'card',
          msg: event.error.message
        })
      }
    }
  }
</script>

And if I try to add fonts in the options object... This comes up in console:

Error in beforeMount hook: "IntegrationError: Invalid value for create(): fonts should be used in elements() instead. You specified: [object Object]."

Is this currently unsupported or I'm doing something wrong?

[dvlden]

So this project seems abandoned.

src updated "about a year ago"

To those that were using it, any other up to date alternative?

[slurmulon]

For anyone else who encounters the same problem, I figured out how to handle it:

<template>
  <card
    class="stripe-card"
    :options="options"
    :class="{ complete }"
    stripe="pk_test_XXXXXXXXXXXX"
    @change="complete = $event.complete"
  />
</template>

<script>
export default {
  data: () => ({
    complete: false,
    options: {
      elements: {
        fonts: [
          {
            cssSrc: 'https://fonts.googleapis.com/css?family=Roboto+Condensed:700'
          }
        ]
      },
      style: {
        base: {
          color: '#9AA7C0',
          fontSmoothing: 'antialiased',
          fontSize: '16px',
          fontWeight: 700,
          fontFamily: 'Roboto Condensed'
        }
      }
    }
  })
}
</script>

You have to provide an elements object (containing a fonts array) in your configuration.

[dvlden]

Yup that works. Figured it out as well, but forgot to come back and post for the others that may had same issue.

Thank you for posting!