Подключение 1ОПД к React, Vue и SPA

 # .env.local (Next.js) или .env (Vite)
NEXT_PUBLIC_OPD_KEY=pk_abc12345678901234567890
VITE_OPD_KEY=pk_abc12345678901234567890

# Никогда не коммитьте этот файл в git!
# Добавьте .env.local в .gitignore 

 // LeadForm.tsx (Next.js / Vite + React)
import { useState } from "react";

const OPD_API = "https://app.1opd.ru/api/v2/create-agreement";
const OPD_KEY = process.env.NEXT_PUBLIC_OPD_KEY!; // ← pk_xxxxxxxxx из .env

export function LeadForm() {
 const [email, setEmail] = useState("");
 const [name, setName] = useState("");
 const [submitting, setSubmitting] = useState(false);

 async function recordConsent(payload: Record<string, string>) {
 try {
 const res = await fetch(OPD_API, {
 method: "POST",
 headers: { "API-KEY": OPD_KEY, "Content-Type": "application/json" },
 body: JSON.stringify({
 form_id: 1, // ← form_id из ЛК 1ОПД
 hash_field: payload.email,
 fields: Object.entries(payload).map(([k, v]) => ({ field: k, value: v })),
 }),
 });
 const data = await res.json();
 return data.hash as string | undefined;
 } catch {
 // 1ОПД временно недоступен — не блокируем основную отправку
 return undefined;
 }
 }

 async function handleSubmit(e: React.FormEvent) {
 e.preventDefault();
 setSubmitting(true);
 await recordConsent({ email, name });
 // Здесь — ваша основная отправка (POST на /api/leads, mutation, и т.д.)
 setSubmitting(false);
 }

 return (
 <form onSubmit={handleSubmit}> <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" required /> <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Имя" required /> <label> <input type="checkbox" name="opd_consent" required /> Даю согласие на обработку персональных данных в соответствии с
 Политикой обработки персональных данных
 </label> <button disabled={submitting}>Отправить</button> </form> );
} 

 <!-- LeadForm.vue (Vue 3 + Vite) -->
<script setup lang="ts">
import { ref } from "vue";

const OPD_API = "https://app.1opd.ru/api/v2/create-agreement";
const OPD_KEY = import.meta.env.VITE_OPD_KEY; // ← pk_xxxxxxxxx из .env

const email = ref("");
const name = ref("");

async function submit() {
 try {
 await fetch(OPD_API, {
 method: "POST",
 headers: { "API-KEY": OPD_KEY, "Content-Type": "application/json" },
 body: JSON.stringify({
 form_id: 1,
 hash_field: email.value,
 fields: [
 { field: "email", value: email.value },
 { field: "name", value: name.value },
 ],
 }),
 });
 } catch (err) {
 console.warn("1ОПД error:", err);
 }
 // ... ваша основная логика
}
</script> <template> <form @submit.prevent="submit"> <input v-model="email" placeholder="Email" required /> <input v-model="name" placeholder="Имя" required /> <label> <input type="checkbox" name="opd_consent" required /> Даю согласие на обработку персональных данных в соответствии с
 Политикой обработки персональных данных
 </label> <button>Отправить</button> </form>
</template> 

 // hooks/use1OPD.ts — переиспользуемый хук для multi-form
export function use1OPD() {
 const API = "https://app.1opd.ru/api/v2/create-agreement";
 const KEY = process.env.NEXT_PUBLIC_OPD_KEY!;

 async function record(
 formId: number,
 fields: Record<string, string>,
 hashField = "email" ) {
 return fetch(API, {
 method: "POST",
 headers: { "API-KEY": KEY, "Content-Type": "application/json" },
 body: JSON.stringify({
 form_id: formId, // multi-form: разные form_id
 hash_field: fields[hashField],
 fields: Object.entries(fields).map(([k, v]) => ({ field: k, value: v })),
 }),
 }).then((r) => r.json());
 }

 return { record };
}

// Использование:
// const { record } = use1OPD();
// await record(1, { email: "ivan@example.com", name: "Иван" });
// await record(2, { email: "ivan@example.com", phone: "+79991234567" });
// ↑ разные form_id, тот же ключ — multi-form через forms_scope 

 {/* Основной чекбокс — согласие на обработку ПДн (обязательный) */}
<label style={{display:'flex', gap:8, alignItems:'flex-start'}}> <input type="checkbox" name="opd_consent" required /> <span> Даю согласие на обработку персональных данных в соответствии с{' '}
 <a href="https://app.1opd.ru/public/d/<slug>/<id>/privacy_policy" target="_blank"> Политикой обработки персональных данных
 </a>.
 </span>
</label> {/* Опционально: маркетинговый чекбокс (без required) */}
<label style={{display:'flex', gap:8, alignItems:'flex-start', marginTop: 8}}> <input type="checkbox" name="opd_consent_marketing" /> <span>Даю согласие на получение информационной и рекламной рассылки.</span>
</label>