@parafin/vue-parafin-elements

vue-parafin-elements

Vue component for integrating with Parafin

Install

With npm

npm install --save @parafin/vue-parafin-elements

With yarn

yarn add @parafin/vue-parafin-elements

Documentation

Please refer to the official Parafin docs.

Examples

Using pre-built component

<script>
  import { ref, onMounted } from 'vue'
  import Elements from '@parafin/vue-parafin-elements'
  import { ENVIRONMENT } from './config'
  import * as Backend from './backend'
  import Header from './components/Header.vue'

  export default {
    setup() {
      const externalId = ref({{BUSINESS_ID}})
      const onOptIn = ref(() => Backend.getBusinessDetails(externalId.value))
      const token = ref(null)
      const loading = ref(true);

      const fetchData = () => {
        loading.value = true
        Backend.getToken(externalId.value).then(tokenRes => {
          token.value = tokenRes
          loading.value = false
        })
      }

      onMounted(() => { fetchData() })

      return {
        token,
        loading,
        onOptIn,
        environment: ENVIRONMENT,
      }
    },
    components: {
      'my-header': Header,
      'elements': Elements,
    },
  }
</script>
<template>
  <div>
    <my-header class="header" />
    <div class="elements-wrapper" v-if="!loading">
      <elements
        :token="token"
        :environment="ENVIRONMENT"
        :on-opt-in="onOptIn"
        :style="{
          primary: '#000000',
          secondary: '#555555',
          accent: '#9f12a7',
        }"
      />
    </div>
  </div>
</template>