@n1co/elements

Carga n1co.js desde npm en tu app web, con tipos de TypeScript. El script sigue viniendo del host de n1co.

1. Instala @n1co/elements en tu app web.
2. Llama a loadN1co(pk, { url }) en el navegador.
3. Monta el card element y confirma el pago como con n1co.js.

npm install @n1co/elements

El paquete no contiene n1co.js. Agrega a tu página el script alojado por n1co (una sola vez) y devuelve el cliente de n1co(publishableKey). La tarjeta se sigue escribiendo solo en los frames de n1co.

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

export async function mountCheckout(form: HTMLFormElement, message: HTMLElement) {
  const n1 = await loadN1co('pk_3x4mpl3pUbl1shabl3k3yAAAAAAAAAAA', {
    url: 'https://elements.n1co.dev/v1/n1co.js', // desarrollo
  });
  if (!n1) return; // null en el renderizado del servidor

  const card = n1.elements().create('card', { locale: 'es' });
  card.mount('#card');

  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    // Tu servidor crea el intent con su llave secreta y devuelve solo el client_secret.
    const { client_secret } = await fetch('/checkout/payment-intent', { method: 'POST' }).then((r) => r.json());
    try {
      const intent: PaymentIntent = await n1.confirmPayment({ client_secret, card });
      if (intent.status === 'succeeded') window.location.assign('/checkout/gracias');
      else message.textContent = intent.last_error?.message ?? 'No se pudo completar el pago.';
    } catch (error) {
      message.textContent = (error as { message: string }).message;
    }
  });
}

El cliente es el mismo de n1co.js: todos sus elements, opciones y errores están en la referencia de n1co.js. Tu servidor confirma el pago con el webhook, como en Cobrar.

Opciones de loadN1co#

Sin url, el paquete usa el host de producción, que llega con el lanzamiento a producción. Pásalo siempre por ahora.

Si la página ya cargó n1co.js con su propio <script>, loadN1co usa ese cliente.

Tipos#

Exporta todos los tipos públicos de n1co.js: N1coClient, Element, CvcElement, CardOptionsInput, Appearance, ConfirmPaymentOptions, PaymentIntent, N1coError y más.

Lo que suele fallar#

• Pedir otra url o integrity. Cada llamada debe usar los mismos valores que la primera, o que el <script> de la página. Si no, rechaza con invalid_options: carga n1co.js desde un solo módulo.
• Usar instanceof con los errores. Los errores vienen del script alojado. Compara error.code: invalid_options, script_load_failed (una llamada posterior lo vuelve a intentar) o invalid_publishable_key.
• Una Content Security Policy sin el host. Permite el host de n1co.js en script-src y frame-src.

El README del paquete tiene los detalles de la carga.