Add Fraud Protection to a Vue.js Website

This guide walks you through installing Opportify Fraud Protection on a Vue.js website. Once set up, every form submission is analyzed for fraud signals in real time — bots, disposable emails, VPNs, and more.

Prerequisites

Access to the Opportify Admin Console
A Vue.js project (v3) you can edit
Basic familiarity with the Composition API and fetch

How it works

Opportify's approach has two parts:

The tracking script — loaded once in the page <head>. It silently observes browser signals and injects two hidden values into each of your forms: opportifyToken (a per-session risk token) and opportifyFormUUID (the identifier of the matched form endpoint).
The submit endpoint — instead of POSTing to your own backend, your form sends data directly to https://api.opportify.ai/intel/v1/submit/<endpoint-id>. Opportify analyzes the submission, stores the result, and returns a JSON response your app can act on.

Step-by-Step Setup

Step 1 — Open Opportify Admin and complete the Quick Start

Navigate to Quick Start and complete Steps 1 through 3.

Step 1 — Allowlist your domain. Enter your site's hostname (no https://, no trailing slash).

Example: for https://my-app.vercel.app enter my-app.vercel.app

Step 2 — Create a Form Endpoint. Click + New Endpoint, give it a descriptive name (e.g. Contact Form), and select a public key. Each endpoint maps to one form on your site.

Step 3 — Copy the Submit URL. From the endpoint list, copy the value in the Submit URL column. It looks like:

https://api.opportify.ai/intel/v1/submit/<your-endpoint-id>

Keep this URL handy — you will use it in Step 3 below.

Step 2 — Load the Opportify script

The script must be loaded once, globally, before any user interaction. Add it to index.html (in the project root for Vite-based projects) inside the <head> tag. Replace YOUR_PUBLIC_KEY with the key shown in the Opportify Admin Console.

<!-- index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>

    <!-- Opportify Fraud Protection — load before first user interaction -->
    <script
      src="https://cdn.opportify.ai/f/v0.4.3.min.js"
      data-opportify-key="YOUR_PUBLIC_KEY"
      async
    ></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Where to find your public key

In the Opportify Admin Console, go to Settings → API Keys. The public key starts with pk_.

Step 3 — Connect your form to the Opportify endpoint

Update your component's submit handler to POST to the Opportify Submit URL instead of your own backend.

Before

const onSubmit = async () => {
  await fetch('/api/contact-form', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: name.value, email: email.value, message: message.value }),
  });
};

After

const onSubmit = async () => {
  await fetch(
    'https://api.opportify.ai/intel/v1/submit/YOUR_ENDPOINT_ID',
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: name.value, email: email.value, message: message.value }),
    }
  );
};

Replace YOUR_ENDPOINT_ID with the UUID from the Submit URL you copied in Step 1.

Step 4 — Include the Opportify tokens in the payload

When the tracking script runs, it injects two hidden <input> fields into your form:

Field name	Purpose
`opportifyToken`	Per-session risk token generated by the script
`opportifyFormUUID`	Identifies which Form Endpoint matched this form

Read these values from the DOM and include them in the payload before the fetch call:

const onSubmit = async () => {
  const opportifyToken =
    document
      .querySelector<HTMLInputElement>('input[name="opportifyToken"]')
      ?.value ?? '';
  const opportifyFormUUID =
    document
      .querySelector<HTMLInputElement>('input[name="opportifyFormUUID"]')
      ?.value ?? '';

  const payload = {
    name: name.value,
    email: email.value,
    message: message.value,
    opportifyToken,
    opportifyFormUUID,
  };

  const response = await fetch(
    'https://api.opportify.ai/intel/v1/submit/YOUR_ENDPOINT_ID',
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    }
  );

  const result = await response.json();

  if (!result.accepted) {
    errorMessage.value = result.errorMessage ?? 'Something went wrong.';
  } else {
    successMessage.value = 'Your message was sent successfully.';
  }
};

Why read from the DOM?

The Opportify script injects opportifyToken and opportifyFormUUID as hidden inputs into the rendered HTML form — not into Vue's reactive state. Reading them with document.querySelector is the correct approach here.

Step 5 — Disable automatic interception on self-managed forms (optional)

By default, the Opportify script intercepts form submissions automatically. If your component already handles its own @submit (as shown above), add the data-opty-submit-interception="disable" attribute to the <form> element to prevent double submission:

<form
  data-opty-submit-interception="disable"
  @submit.prevent="onSubmit"
>
  <!-- form fields -->
</form>

note

Skip this step if you want the script to handle submission automatically (e.g. for simpler forms with no custom submit logic).

Step 6 — Full example: Contact component

Below is a complete, minimal contact component (Composition API with <script setup>) integrating all the steps above.

<!-- ContactForm.vue -->
<script setup lang="ts">
import { ref } from 'vue';

const name = ref('');
const email = ref('');
const message = ref('');
const successMessage = ref('');
const errorMessage = ref('');
const isSubmitting = ref(false);

const onSubmit = async () => {
  isSubmitting.value = true;
  errorMessage.value = '';

  const opportifyToken =
    document
      .querySelector<HTMLInputElement>('input[name="opportifyToken"]')
      ?.value ?? '';
  const opportifyFormUUID =
    document
      .querySelector<HTMLInputElement>('input[name="opportifyFormUUID"]')
      ?.value ?? '';

  const payload = {
    name: name.value,
    email: email.value,
    message: message.value,
    opportifyToken,
    opportifyFormUUID,
  };

  try {
    const response = await fetch(
      'https://api.opportify.ai/intel/v1/submit/YOUR_ENDPOINT_ID',
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      }
    );

    const result = await response.json();

    if (!result.accepted) {
      errorMessage.value = result.errorMessage ?? 'Something went wrong. Please try again.';
    } else {
      successMessage.value = 'Your message was sent successfully.';
      name.value = '';
      email.value = '';
      message.value = '';
    }
  } catch {
    errorMessage.value = 'Network error. Please check your connection and try again.';
  } finally {
    isSubmitting.value = false;
  }
};
</script>

<template>
  <form
    data-opty-submit-interception="disable"
    @submit.prevent="onSubmit"
  >
    <input v-model="name" placeholder="Your name" required />
    <input v-model="email" type="email" placeholder="your@email.com" required />
    <textarea v-model="message" placeholder="Your message" required></textarea>

    <p v-if="errorMessage" style="color: red">{{ errorMessage }}</p>
    <p v-if="successMessage" style="color: green">{{ successMessage }}</p>

    <button type="submit" :disabled="isSubmitting">
      {{ isSubmitting ? 'Sending…' : 'Send' }}
    </button>
  </form>
</template>

Step 7 — Setup is complete

Your Vue.js form is now connected to Opportify Fraud Protection.

Return to the Opportify Admin Console and complete the remaining Quick Start steps to fine-tune your setup:

Step 4 — Data Retention: Choose how long submission data is kept.
Alerts: Configure email or in-app alerts for suspicious submissions.
Webhooks: Forward fraud signals and submission data to your own backend or third-party tools.

Viewing Form Submissions

After deploying, every form submission from your site will appear in the Form Submissions page of the Opportify Admin Console. For each submission you can see:

Field	Description
Risk Score	A numeric fraud risk rating assigned to the submission
Risk Level	A human-readable label: Low, Medium, High, or Critical
IP Address	The originating IP of the submission
Country	Geo-location derived from the IP
Email	The email address submitted, if collected
Submitted At	Timestamp of when the submission was received
Form Endpoint	Which endpoint (and therefore which form) received the submission
Fraud Signals	Individual signals that contributed to the risk score (e.g. disposable email, VPN detected, bot behavior)

You can filter submissions by risk level, date range, or endpoint to quickly identify and act on suspicious activity.

Troubleshooting

Symptom	Likely cause	Fix
`opportifyToken` is always empty	Script not loaded or loaded after form render	Ensure the script tag is in `<head>` of `index.html` with `async` and the page has fully loaded before submission
CSP error in browser console	Missing CSP directives for Opportify origins	Add `https://cdn.opportify.ai` to `script-src` and `https://api.opportify.ai` to `connect-src` in your Content Security Policy
Form submits twice	Script auto-interception active on a self-managed form	Add `data-opty-submit-interception="disable"` to the `<form>` element (Step 5)
`404` on submit	Wrong endpoint ID in the URL	Double-check the Submit URL copied from the Opportify Admin Console

Prerequisites​

How it works​

Step-by-Step Setup​

Step 1 — Open Opportify Admin and complete the Quick Start​

Step 2 — Load the Opportify script​

Step 3 — Connect your form to the Opportify endpoint​

Before​

After​

Step 4 — Include the Opportify tokens in the payload​

Step 5 — Disable automatic interception on self-managed forms (optional)​

Step 6 — Full example: Contact component​

Step 7 — Setup is complete​

Viewing Form Submissions​

Troubleshooting​