1
<script setup lang="ts">
2
import {ref, VNodeRef} from 'vue';
3
import { CoinflowCvvOnlyInput, CardType } from '@coinflowlabs/vue';
4
5
const cvvOnlyInput = ref<VNodeRef | undefined>(undefined);
6
const token = ref<string | null>(null);
7
const origins = [window.location.origin];
8
</script>
9
10
<template>
11
  <div :style="{width: '100%', height: `100%`}">
12
    {/* Create a button to trigger tokenization */}
13
    <button
14
      @click="
15
        async () => {
16
          token = await cvvOnlyInput.getToken();
17
        }
18
      "
19
    >
20
      Get Token
21
    </button>
22
23
		{/* Coinflow CVV Input field */}
24
    <CoinflowCvvOnlyInput
25
      ref="cvvOnlyInput"
26
      :args="{
27
        merchantId: 'YOUR_MERCHANT_ID', // Replace with your merchant id
28
        token: '411111YJM5TX1111', // The previously saved card token
29
        cardType: CardType.VISA, // Options: MASTERCARD, AMEX, DISCOVER, VISA
30
        env: 'sandbox', // Change to prod
31
        font: 'Arial',
32
        debug: true,
33
        css: {
34
          base: 'font-family: Montserrat, sans-serif;padding: 0 8px;border: 0px;margin: 0;width: 100%;font-size: 13px;line-height: 48px;height: 48px;box-sizing: border-box;-moz-box-sizing: border-box;',
35
          focus: 'outline: 0;',
36
          error:
37
            'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5);border: 1px solid rgba(224, 57, 57, 0.5);',
38
          cvv: {
39
            base: 'font-family: Montserrat, sans-serif;padding: 0 8px;border: 0px;margin: 0;width: 100%;font-size: 13px;line-height: 48px;height: 48px;box-sizing: border-box;-moz-box-sizing: border-box;',
40
            focus: 'outline: 0;',
41
            error:
42
              'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5);border: 1px solid rgba(224, 57, 57, 0.5);',
43
          },
44
        },
45
        origins,
46
      }"
47
    />
48
        
49
    {/* Display the refreshed token data */}
50
    <span>Token: {{ token }}</span>
51
  </div>
52
</template>

1
{"success":true}