Captura de tarjeta

app.post('/checkout/card-session', async (req, res) => {
  // El comprador sale de tu sesión de usuario, nunca del navegador.
  const response = await fetch('https://api-epay-sandbox.n1co.shophttps://api-epay.n1co.com/v1/card_sessions', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.N1CO_SECRET_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      customer: { id: 'cust-1001', name: 'Ana López', email: 'ana.lopez@example.com', phone: '+503 7000-1234' },
      page_origins: ['https://shop.example.com'],
    }),
  });
  if (!response.ok) throw new Error(`n1co ${response.status}: ${await response.text()}`);
  const session = await response.json();
  res.json({ session_token: session.session_token });
});

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddHttpClient("n1co", http =>
{
    http.BaseAddress = new Uri("https://api-epay-sandbox.n1co.shophttps://api-epay.n1co.com");
    http.DefaultRequestHeaders.Authorization =
        new("Bearer", Environment.GetEnvironmentVariable("N1CO_SECRET_KEY"));
});
var app = builder.Build();

app.MapPost("/checkout/card-session", async (IHttpClientFactory factory) =>
{
    // El comprador sale de tu sesión de usuario, nunca del navegador.
    var response = await factory.CreateClient("n1co").PostAsJsonAsync("/v1/card_sessions", new
    {
        customer = new { id = "cust-1001", name = "Ana López", email = "ana.lopez@example.com", phone = "+503 7000-1234" },
        page_origins = new[] { "https://shop.example.com" },
    });
    response.EnsureSuccessStatusCode();
    var session = await response.Content.ReadFromJsonAsync<System.Text.Json.JsonElement>();
    return Results.Ok(new { session_token = session.GetProperty("session_token").GetString() });
});

<?php

// El comprador sale de tu sesión de usuario, nunca del navegador.
$ch = curl_init('https://api-epay-sandbox.n1co.shophttps://api-epay.n1co.com/v1/card_sessions');
curl_setopt_array($ch, [
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => json_encode([
        'customer' => ['id' => 'cust-1001', 'name' => 'Ana López', 'email' => 'ana.lopez@example.com', 'phone' => '+503 7000-1234'],
        'page_origins' => ['https://shop.example.com'],
    ]),
    CURLOPT_HTTPHEADER => [
        'Authorization: Bearer ' . getenv('N1CO_SECRET_KEY'),
        'Content-Type: application/json',
    ],
    CURLOPT_RETURNTRANSFER => true,
]);
$response = curl_exec($ch);
$status = curl_getinfo($ch, CURLINFO_RESPONSE_CODE);
if ($response === false || $status >= 300) {
    throw new RuntimeException("n1co $status: $response");
}
$session = json_decode($response, true);
header('Content-Type: application/json');
echo json_encode(['session_token' => $session['session_token']]);

<?php

use N1co\EPay\N1co;

$n1co = new N1co((string) getenv('N1CO_SECRET_KEY'), ['base_url' => 'https://api-epay-sandbox.n1co.shophttps://api-epay.n1co.com']);

// El comprador sale de tu sesión de usuario, nunca del navegador.
$session = $n1co->cardSessions->create([
    'customer' => ['id' => 'cust-1001', 'name' => 'Ana López', 'email' => 'ana.lopez@example.com', 'phone' => '+503 7000-1234'],
    'page_origins' => ['https://shop.example.com'],
]);
header('Content-Type: application/json');
echo json_encode(['session_token' => $session->session_token]);

// Java 21+, Spring Boot y Jackson.
@RestController
class CardSessionController {
  private final HttpClient http = HttpClient.newHttpClient();
  private final ObjectMapper json = new ObjectMapper();

  @PostMapping("/checkout/card-session")
  Map<String, Object> cardSession() throws Exception {
    // El comprador sale de tu sesión de usuario, nunca del navegador.
    var body = Map.of(
        "customer", Map.of("id", "cust-1001", "name", "Ana López", "email", "ana.lopez@example.com", "phone", "+503 7000-1234"),
        "page_origins", List.of("https://shop.example.com"));
    var request = HttpRequest.newBuilder(URI.create("https://api-epay-sandbox.n1co.shophttps://api-epay.n1co.com/v1/card_sessions"))
        .header("Authorization", "Bearer " + System.getenv("N1CO_SECRET_KEY"))
        .header("Content-Type", "application/json")
        .POST(HttpRequest.BodyPublishers.ofString(json.writeValueAsString(body)))
        .build();
    var response = http.send(request, HttpResponse.BodyHandlers.ofString());
    if (response.statusCode() >= 300) {
      throw new IllegalStateException("n1co " + response.statusCode() + ": " + response.body());
    }
    var session = json.readValue(response.body(), Map.class);
    return Map.of("session_token", session.get("session_token"));
  }
}

import { loadN1co } from '@n1co/elements';

// null durante el renderizado en servidor: llámalo en el navegador.
const client = await loadN1co('pk_3x4mpl3pUbl1shabl3k3yAAAAAAAAAAA', { environment: 'sandbox' });
if (client) {
  const card = client.elements().create('card', { locale: 'es' });
  card.mount('#card');

  document.querySelector('#save')!.addEventListener('click', async () => {
    const { session_token } = await fetch('/checkout/card-session', { method: 'POST' }).then((r) => r.json());
    try {
      const result = await card.capture({ session_token });
      // result.card: { id, brand, last4, exp_month, exp_year }
      document.querySelector('#card-error')!.textContent = '';
    } catch (error) {
      // error.code es estable; error.message viene traducido y se puede mostrar.
      document.querySelector('#card-error')!.textContent = (error as Error).message;
    }
  });
}

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { loadN1co, type Element as CardElement } from '@n1co/elements';

const cardBox = ref<HTMLElement | null>(null);
const card = ref<CardElement | null>(null);
const message = ref('');
const complete = ref(false);
const saving = ref(false);

onMounted(async () => {
  // null durante el renderizado en servidor; en Nuxt también puedes envolver este componente en <ClientOnly>.
  const client = await loadN1co('pk_3x4mpl3pUbl1shabl3k3yAAAAAAAAAAA', { environment: 'sandbox' });
  if (!client || !cardBox.value) return;
  card.value = client.elements().create('card', { locale: 'es' });
  card.value.on('change', (e) => {
    complete.value = e.complete;
    message.value = e.error ? e.error.message : '';
  });
  card.value.on('error', (e) => {
    message.value = e.message;
  });
  card.value.mount(cardBox.value);
});

onBeforeUnmount(() => card.value?.unmount());

async function save() {
  if (!card.value) return;
  saving.value = true;
  try {
    // Tu endpoint crea la sesión con tu secret_key y devuelve solo su session_token.
    const { session_token } = await fetch('/checkout/card-session', { method: 'POST' }).then((r) => r.json());
    const result = await card.value.capture({ session_token });
    // result.card: { id, brand, last4, exp_month, exp_year }
    message.value = `Guardamos tu tarjeta terminada en ${result.card.last4}.`;
  } catch (error) {
    message.value = error instanceof Error ? error.message : String(error);
    saving.value = false;
  }
}
</script>

<template>
  <form @submit.prevent="save">
    <div ref="cardBox"></div>
    <p role="alert" v-text="message"></p>
    <button type="submit" :disabled="!complete || saving">Guardar tarjeta</button>
  </form>
</template>

import 'react-native-get-random-values'; // primera línea de tu app
import { useRef, useState } from 'react';
import { Button } from 'react-native';
import { CardField, N1coProvider, type CardFieldHandle } from '@n1co/react-native';

// Desde una app, tu servidor crea la sesión sin page_origins: la página que captura es la de n1co.
export function App() {
  return (
    <N1coProvider publishableKey="pk_3x4mpl3pUbl1shabl3k3yAAAAAAAAAAA" environment="sandbox" locale="es">
      <SaveCard />
    </N1coProvider>
  );
}

function SaveCard() {
  const card = useRef<CardFieldHandle>(null);
  const [complete, setComplete] = useState(false);

  async function save() {
    const { session_token } = await fetch('https://shop.example.com/checkout/card-session', { method: 'POST' }).then(
      (r) => r.json(),
    );
    const { card: saved } = await card.current!.capture({ session_token });
    // saved: { id, brand, last4, exp_month, exp_year }
  }

  return (
    <>
      <CardField ref={card} onChange={(event) => setComplete(event.complete)} />
      <Button title="Guardar tarjeta" disabled={!complete} onPress={save} />
    </>
  );
}

app.MapPost("/webhooks/n1co", async (HttpRequest request) =>
{
    using var buffer = new MemoryStream();
    await request.Body.CopyToAsync(buffer);
    var body = buffer.ToArray();
    var h = request.Headers;
    if (!N1coWebhook.Verify(h["webhook-id"], h["webhook-timestamp"], h["webhook-signature"], body))
        return Results.BadRequest();
    using var evt = System.Text.Json.JsonDocument.Parse(body);
    if (evt.RootElement.GetProperty("type").GetString() == "card.created")
    {
        // Guarda data.object.id con el comprador de la sesión data.object.card_session.
    }
    return Results.NoContent();
});

<?php

require __DIR__ . '/webhooks.php';

$body = file_get_contents('php://input');
if (!verify_webhook($body)) {
    http_response_code(400);
    exit;
}
$event = json_decode($body, true);
if ($event['type'] === 'card.created') {
    // Guarda $event['data']['object']['id'] con el comprador de la sesión $event['data']['object']['card_session'].
}
http_response_code(204);

<?php

require __DIR__ . '/webhooks.php'; // $event, verificado por el SDK

if ($event->type === 'card.created') {
    // Guarda $event->data->object->id con el comprador de la sesión $event->data->object->card_session.
}
http_response_code(204);

@RestController
class WebhookController {
  private final ObjectMapper json = new ObjectMapper();

  @PostMapping("/webhooks/n1co")
  ResponseEntity<Void> receive(@RequestHeader HttpHeaders headers, @RequestBody byte[] body) throws Exception {
    if (!N1coWebhook.verify(headers.getFirst("webhook-id"), headers.getFirst("webhook-timestamp"),
        headers.getFirst("webhook-signature"), body)) {
      return ResponseEntity.badRequest().build();
    }
    var event = json.readValue(body, Map.class);
    if ("card.created".equals(event.get("type"))) {
      // Guarda data.object.id con el comprador de la sesión data.object.card_session.
    }
    return ResponseEntity.noContent().build();
  }
}