Cartões - Tokenização no navegador

<div id="card-element"></div>
<button id="pay">Pagar</button>

<script src="https://pay.selectwin.io/elements/v1/elements.js"></script>
<script>
  var selectwin = Selectwin('pk_test_…', { locale: 'pt-BR' });
  var card = selectwin.elements().create('card', {
    style: { base: { color: '#1f2933', fontSize: '16px', fontFamily: 'Inter, sans-serif' }, invalid: { color: '#dc2626' } }
  });
  card.mount('#card-element');

  var complete = false;
  card.on('change', function (ev) { complete = ev.complete; /* ev.brand, ev.error, ev.empty */ });

  document.getElementById('pay').addEventListener('click', function () {
    if (!complete) return;
    selectwin.createToken(card).then(function (r) {
      if (r.error) { alert(r.error.message); return; }   // já em pt-BR
      // r.token → envie ao seu servidor; r.card = { brand, brandType, firstDigits, lastDigits, expirationMonth, expirationYear, holderName }
    });
  });
</script>

navegador ──(1) GET /v1/tokenization/config?pk=pk_…──▶ Selectwin
navegador ◀── onde enviar o cartão + nomes dos campos ───┘
navegador ──(2) POST /v1/tokenization/tokens?pk=pk_… {holderName, numbering, …}──▶ Selectwin
navegador ◀── { token: "…" } ──────────────────────────────────────────────────────┘
navegador ──(3) token ──▶ seu servidor ──(4) POST /v1/transactions { payment.card.token } ──▶ Selectwin

GET /v1/tokenization/config?pk=pk_test_…

{
  "environment": "sandbox",
  "publicKey": "pk_test_…",
  "tokenization": {
    "method": "POST",
    "url": "https://api.selectwin.io/v1/tokenization/tokens?pk=pk_test_…",
    "headers": { "Content-Type": "application/json", "Accept": "application/json" },
    "fields": {
      "holderName": "holderName",
      "number": "numbering",
      "expirationMonth": "expirationMonth",
      "expirationYear": "expirationYear",
      "securityCode": "securityCode"
    },
    "tokenField": "token",
    "ttlSeconds": 3600
  },
  "acceptedBrands": ["visa", "mastercard", "elo", "amex", "hipercard"],
  "elements": {
    "scriptUrl": "https://pay.selectwin.io/elements/v1/elements.js",
    "fieldsUrl": "https://pay.selectwin.io/elements/v1/fields?pk=pk_test_…"
  }
}

<script>
async function tokenizeCard(pk, card) {
  const cfg = await fetch(`https://api.selectwin.io/v1/tokenization/config?pk=${encodeURIComponent(pk)}`)
    .then((r) => r.json());
  const f = cfg.tokenization.fields;
  const body = {
    [f.holderName]: card.holderName,
    [f.number]: card.number.replace(/\D/g, ''),
    [f.expirationMonth]: String(card.expirationMonth).padStart(2, '0'),
    [f.expirationYear]: String(card.expirationYear).length === 2 ? `20${card.expirationYear}` : String(card.expirationYear),
    [f.securityCode]: card.securityCode,
  };
  const res = await fetch(cfg.tokenization.url, {
    method: cfg.tokenization.method,
    headers: cfg.tokenization.headers,
    body: JSON.stringify(body),
  });
  const json = await res.json();
  if (!res.ok) throw new Error(json?.error?.details || json?.error?.message || 'card refused');
  return json[cfg.tokenization.tokenField]; // o token — envie ao seu servidor
}
</script>

POST /v1/tokenization/tokens?pk=pk_test_…

{
  "token": "a1b2c3d4…",
  "ttlSeconds": 3600,
  "card": { "brand": "Visa", "brandType": "visa", "firstDigits": "4111", "lastDigits": "1111",
            "expirationMonth": "12", "expirationYear": "2030", "holderName": "Ana Lima" }
}

POST /v1/transactions
{
  "amount": 15990,
  "payment": {
    "method": "credit",
    "installments": 3,
    "card": { "token": "a1b2c3…" }
  },
  "customer": { "id": "cus_…" }
}

POST /v1/cards
{ "customerId": "cus_…", "token": "a1b2c3…", "primary": true }