Campos alojados: integración de un formulario de tarjeta personalizado y seguro para PCI

<form id="payment-form">
  <div id="card-number"></div>  <!-- El iframe de Therius se renderiza aquí -->
  <div id="expiry"></div>
  <div id="cvv"></div>
  <button type="submit">Pay</button>
</form>

const fields = sdk.hostedFields({
  card_number: '#card-number',   // Selector CSS para el elemento contenedor
  expiry: '#expiry',
  cvv: '#cvv',
})

document.getElementById('payment-form').addEventListener('submit', async (e) => {
  e.preventDefault()

  const { nonce } = await sdk.createNonce({
    cardholderName: 'Ada Lovelace',
  })

  // Envía el nonce a tu servidor — nunca lo registres ni lo guardes
  const response = await fetch('/api/charge', {
    method: 'POST',
    body: JSON.stringify({ nonce }),
  })
})

curl -X POST https://api.therius.io/v1/payment/purchase \
  -H "Authorization: Bearer prv_production_your_key_here" \
  -H "Idempotency-Key: $(uuidgen)" \
  -d '{
    "merchantCode": "MERCHANT_001",
    "orderCode": "ORDER-123",
    "amount": { "currency": "USD", "value": 4999, "exponent": 2 },
    "card": { "nonceData": { "nonce": "<nonce>" } }
  }'

{
  "card": {
    "nonceData": {
      "nonce": "<nonce>",
      "tokenize": true
    }
  },
  "shopper": {
    "id": "customer-42"
  }
}

const result = await sdk.authorize(nonce)

if (result.actionRequired) {
  // sdk.handleAction abre el iframe de 3DS y espera a que se complete
  const finalResult = await sdk.handleAction(result.actionRequired)
  // finalResult tiene la misma forma de PaymentResult que la API REST
}