Como integrar validação de CPF em lojas Shopify com Liquid e JavaScript

<div class="cpf-validation-wrapper" style="margin: 20px 0;">
    <label for="cart-cpf" style="display: block; margin-bottom: 6px; font-weight: bold;">
    CPF (obrigatório)
    </label>
    <div style="display: flex; gap: 8px; align-items: center;">
    <input
    type="text"
    id="cart-cpf"
    name="attributes[cpf]"
    placeholder="000.000.000-00"
    inputmode="numeric"
    maxlength="14"
    required
    style="padding: 10px; border: 1px solid #ccc; border-radius: 4px; flex: 1; font-size: 16px;"
    value="{{ cart.attributes.cpf }}"
    />
    <button
    type="button"
    id="btn-validar-cpf"
    style="padding: 10px 16px; background: #2563eb; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;"
    >
    Validar
    </button>
    </div>
    <div id="cpf-feedback" style="margin-top: 6px; font-size: 14px; min-height: 20px;"></div>
</div>

(function() {
    'use strict';

    var cpfInput = document.getElementById('cart-cpf');
    var btnValidar = document.getElementById('btn-validar-cpf');
    var feedback = document.getElementById('cpf-feedback');
    var form = cpfInput ? cpfInput.closest('form') : null;
    var cpfValidado = false;

    if (!cpfInput || !btnValidar || !feedback) return;

    // Máscara de CPF
    cpfInput.addEventListener('input', function(e) {
    var valor = e.target.value.replace(/\D/g, '');
    if (valor.length > 11) valor = valor.substring(0, 11);

    if (valor.length > 9) {
    valor = valor.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
    } else if (valor.length > 6) {
    valor = valor.replace(/(\d{3})(\d{3})(\d{1,3})/, '$1.$2.$3');
    } else if (valor.length > 3) {
    valor = valor.replace(/(\d{3})(\d{1,3})/, '$1.$2');
    }

    e.target.value = valor;
    cpfValidado = false;
    feedback.textContent = '';
    });

    // Validação de dígitos locais
    function validarDigitosCPF(cpf) {
    if (cpf.length !== 11) return false;
    if (/^(\d)\1{10}$/.test(cpf)) return false;

    var soma = 0;
    for (var i = 0; i < 9; i++) {
    soma += parseInt(cpf[i]) * (10 - i);
    }
    var resto = (soma * 10) % 11;
    if (resto === 10) resto = 0;
    if (resto !== parseInt(cpf[9])) return false;

    soma = 0;
    for (var i = 0; i < 10; i++) {
    soma += parseInt(cpf[i]) * (11 - i);
    }
    resto = (soma * 10) % 11;
    if (resto === 10) resto = 0;
    return resto === parseInt(cpf[10]);
    }

    // Validar via API (através de proxy)
    async function validarCPFAPI(cpf) {
    try {
    var response = await fetch('https://seu-proxy.com/api/validar-cpf', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ cpf: cpf })
    });

    return await response.json();
    } catch (e) {
    return null;
    }
    }

    // Botão de validação
    btnValidar.addEventListener('click', async function() {
    var cpf = cpfInput.value.replace(/\D/g, '');

    if (cpf.length !== 11) {
    feedback.textContent = 'CPF deve ter 11 dígitos.';
    feedback.style.color = '#dc2626';
    return;
    }

    if (!validarDigitosCPF(cpf)) {
    feedback.textContent = 'CPF com dígitos verificadores inválidos.';
    feedback.style.color = '#dc2626';
    return;
    }

    feedback.textContent = 'Validando...';
    feedback.style.color = '#666';
    btnValidar.disabled = true;

    var resultado = await validarCPFAPI(cpf);

    if (resultado && resultado.success) {
    feedback.textContent = 'CPF válido - ' + resultado.data.name;
    feedback.style.color = '#16a34a';
    cpfValidado = true;
    } else if (resultado) {
    feedback.textContent = 'CPF não encontrado. Verifique o número.';
    feedback.style.color = '#dc2626';
    cpfValidado = false;
    } else {
    // Fallback: se a API não respondeu, aceitar validação local
    feedback.textContent = 'CPF com formato válido (verificação online indisponível).';
    feedback.style.color = '#d97706';
    cpfValidado = true;
    }

    btnValidar.disabled = false;
    });

    // Impedir checkout sem CPF validado
    if (form) {
    form.addEventListener('submit', function(e) {
    var cpf = cpfInput.value.replace(/\D/g, '');

    if (cpf.length !== 11) {
    e.preventDefault();
    feedback.textContent = 'Informe um CPF válido para continuar.';
    feedback.style.color = '#dc2626';
    cpfInput.focus();
    return;
    }

    if (!cpfValidado) {
    e.preventDefault();
    feedback.textContent = 'Valide o CPF antes de prosseguir.';
    feedback.style.color = '#dc2626';
    cpfInput.focus();
    }
    });
    }
})();

// api/validar-cpf.js (Vercel, Netlify ou similar)

export default async function handler(req, res) {
    res.setHeader('Access-Control-Allow-Origin', 'https://sua-loja.myshopify.com');
    res.setHeader('Access-Control-Allow-Methods', 'POST');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

    if (req.method === 'OPTIONS') return res.status(200).end();
    if (req.method !== 'POST') return res.status(405).end();

    const { cpf } = req.body;
    const cpfLimpo = cpf.replace(/\D/g, '');

    if (cpfLimpo.length !== 11) {
    return res.status(400).json({ success: false, erro: 'CPF inválido' });
    }

    try {
    const response = await fetch(
    `https://api.cpfhub.io/cpf/${cpfLimpo}`,
    {
    headers: {
    'x-api-key': process.env.CPFHUB_API_KEY,
    'Accept': 'application/json'
    },
    signal: AbortSignal.timeout(10000)
    }
    );

    const dados = await response.json();
    return res.status(200).json(dados);
    } catch (erro) {
    return res.status(500).json({ success: false, erro: 'Falha na validação' });
    }
}

curl -X GET https://api.cpfhub.io/cpf/12345678900 \
    -H "x-api-key: SUA_CHAVE_DE_API" \
    -H "Accept: application/json"

// extensions/cpf-validation/src/Checkout.jsx
import {
    reactExtension,
    TextField,
    Banner,
    useApplyAttributeChange,
} from '@shopify/ui-extensions-react/checkout';
import { useState } from 'react';

export default reactExtension(
    'purchase.checkout.contact.render-after',
    () => <CPFField />
);

function CPFField() {
    const [cpf, setCPF] = useState('');
    const [mensagem, setMensagem] = useState('');
    const [erro, setErro] = useState(false);
    const applyAttributeChange = useApplyAttributeChange();

    const handleChange = (value) => {
    let limpo = value.replace(/\D/g, '').substring(0, 11);

    if (limpo.length > 9) {
    limpo = limpo.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
    } else if (limpo.length > 6) {
    limpo = limpo.replace(/(\d{3})(\d{3})(\d{1,3})/, '$1.$2.$3');
    } else if (limpo.length > 3) {
    limpo = limpo.replace(/(\d{3})(\d{1,3})/, '$1.$2');
    }

    setCPF(limpo);
    setMensagem('');
    setErro(false);
    };

    const handleBlur = async () => {
    const cpfLimpo = cpf.replace(/\D/g, '');
    if (cpfLimpo.length !== 11) {
    setErro(true);
    setMensagem('CPF deve ter 11 dígitos');
    return;
    }

    try {
    const response = await fetch(
    `https://seu-proxy.com/api/validar-cpf`,
    {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ cpf: cpfLimpo })
    }
    );

    const dados = await response.json();

    if (dados.success) {
    setErro(false);
    setMensagem('CPF válido - ' + dados.data.name);
    await applyAttributeChange({
    type: 'updateAttribute',
    key: 'cpf',
    value: cpfLimpo
    });
    } else {
    setErro(true);
    setMensagem('CPF não encontrado');
    }
    } catch (e) {
    setErro(true);
    setMensagem('Erro na validação');
    }
    };

    return (
    <>
    <TextField
    label="CPF"
    value={cpf}
    onChange={handleChange}
    onBlur={handleBlur}
    required
    />
    {mensagem && (
    <Banner status={erro ? 'critical' : 'success'}>
    {mensagem}
    </Banner>
    )}
    </>
    );
}

// Consultando o pedido e obtendo o CPF
const response = await fetch(
    'https://sua-loja.myshopify.com/admin/api/2024-04/orders/{order_id}.json',
    {
    headers: {
    'X-Shopify-Access-Token': 'SEU_TOKEN_SHOPIFY'
    }
    }
);

const pedido = await response.json();
const cpf = pedido.order.note_attributes.find(
    attr => attr.name === 'cpf'
)?.value;