n1co.js reference

The loader, the client, the card element, the cvc element, card capture, charging and the errors of n1co.js.

1. Load n1co.js from the n1co host, on an https page.
2. Create the client: n1co('pk_…').
3. Mount the card element and call capture() or confirmPayment().

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>n1co.js</title>
  </head>
  <body>
    <div id="card"></div>
    <script src="https://elements.n1co.dev/v1/n1co.js"></script>
    <script>
      const card = n1co('pk_3x4mpl3pUbl1shabl3k3yAAAAAAAAAAA').elements().create('card');
      card.on('ready', () => console.log('card element ready'));
      card.on('error', (error) => console.error(error.code, error.message));
      card.mount('#card');
    </script>
  </body>
</html>

Loading n1co.js#

<script src="https://elements.n1co.dev/v1/n1co-<hash>.js" integrity="sha384-…" crossorigin="anonymous"></script>

Each pinned version will be published in the Changelog. In development, the host is https://elements.n1co.dev.

Your page uses https:// (or localhost for development) and a different origin from n1co.js. Its Content Security Policy allows that host in script-src and frame-src.

n1co(publishableKey)#

Creates the client with your publishable key. It takes no options.

The card element#

n1co('pk_…').elements().create('card', options?) creates the element.

Options#

All are optional; an invalid value throws invalid_options.

A number from a brand outside brands is reported as unsupported_brand.

Appearance#

Free-form CSS is not accepted, only these tokens:

colorText and colorDanger need a 3:1 contrast with colorBackground, and colorTextPlaceholder 2:1. With a dark background, use theme: 'dark'.

const card = n1co('pk_3x4mpl3pUbl1shabl3k3yAAAAAAAAAAA')
  .elements()
  .create('card', {
    layout: 'inline',
    brands: ['visa', 'mastercard'],
    appearance: { theme: 'light', variables: { fontFamily: 'system', colorBorderFocus: '#7b3eff', borderRadius: 8 } },
  });

Methods#

All except capture() return the element and can be chained.

mount() throws an N1coError if the page does not meet the requirements. Call focus() and clear() after ready.

Events#

change fires when the state changes, not on every keystroke.

capture()#

const result = await card.capture({ client_secret: 'cs_…_secret_…' });
// { ok: true, card: { id: 'card_…', brand: 'visa', last4: '4242', exp_month: 12, exp_year: 2030 } }

client_secret is the one of a card session. During the capture the fields are disabled; on success they are emptied, and another capture responds already_captured until clear(). On failure, the promise rejects with N1coCaptureError.

capture() codes#

The cvc element#

A single field, in n1co's frame, for the security code of a saved card. The code never reaches your page.

const n1 = n1co('pk_3x4mpl3pUbl1shabl3k3yAAAAAAAAAAA');
const cvc = n1.elements().create('cvc', { brand: 'visa', last4: '4242' });
cvc.mount('#cvc');
const intent = await n1.confirmPayment({ client_secret, cvc });

confirmPayment()#

Pays a payment intent with the card element or with the card your server attached, and shows 3D Secure if the bank asks for it.

const n1 = n1co('pk_3x4mpl3pUbl1shabl3k3yAAAAAAAAAAA');
const intent = await n1.confirmPayment({ client_secret, card }); // new card
const paid = await n1.confirmPayment({ client_secret }); // attached card
const withCode = await n1.confirmPayment({ client_secret, cvc }); // attached card with its code

It resolves with the intent in succeeded, processing, requires_payment_method or canceled; see Charge. If n1co is slow, it reads the intent for up to 60 seconds before resolving with processing.

Run one confirmation at a time per client.

confirmPayment() rejections#

It rejects with N1coPaymentError when the attempt could not be made.

retrievePaymentIntent()#

const intent = await n1.retrievePaymentIntent(client_secret);

Reads the intent to show the amount or the attached card before confirming. Your page sees a reduced version:

It never includes metadata, reference, billing, card ids, order_id or authorization_code.

Errors#

Decide with code, which is stable; message comes translated and can be shown.

Browsers#

Current versions of Chrome, Edge, Firefox and Safari. not_visible only works with IntersectionObserver v2.