Web

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

// null during server-side rendering: call it in the browser.
const client = await loadN1co('pk_3x4mpl3pUbl1shabl3k3yAAAAAAAAAAA', { environment: 'sandbox' });

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

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

onMounted(async () => {
  // null during server-side rendering; in Nuxt you can also wrap this component in <ClientOnly>.
  client.value = await loadN1co('pk_3x4mpl3pUbl1shabl3k3yAAAAAAAAAAA', { environment: 'sandbox' });
  if (!client.value || !cardBox.value) return;
  card.value = client.value.elements().create('card', { locale: 'en' });
  card.value.on('change', (e) => {
    complete.value = e.complete;
    message.value = e.error ? e.error.message : '';
  });
  card.value.mount(cardBox.value);
});

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

async function pay() {
  if (!client.value || !card.value) return;
  paying.value = true;
  message.value = '';
  try {
    // Your endpoint creates the intent with your secret_key and returns only its intent_token.
    const { intent_token } = await fetch('/checkout/payment-intent', { method: 'POST' }).then((r) => r.json());
    const intent = await client.value.confirmPayment({ intent_token, card: card.value });
    if (intent.status === 'succeeded') {
      // Your server confirms with the webhook before fulfilling the order.
      window.location.assign('/checkout/thanks');
    } else if (intent.status === 'processing') {
      message.value = 'We are confirming your payment. Do not pay again; we will let you know.';
    } else {
      message.value = intent.last_error?.message ?? 'The payment could not be completed.';
      paying.value = false;
    }
  } catch (error) {
    message.value = error instanceof Error ? error.message : String(error);
    paying.value = false;
  }
}
</script>

<template>
  <form @submit.prevent="pay">
    <div ref="cardBox"></div>
    <p role="alert" v-text="message"></p>
    <button type="submit" :disabled="!complete || paying">Pay $12.50</button>
  </form>
</template>

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

const themes = {
  light: {
    theme: 'light',
    variables: {
      colorBackground: '#ffffff',
      colorText: '#1a1a1a',
      colorTextPlaceholder: '#767676',
      colorBorder: '#cccccc',
      colorBorderFocus: '#0b7a75',
      colorDanger: '#c62828',
    },
  },
  dark: {
    theme: 'dark',
    variables: {
      colorBackground: '#1a1a1a',
      colorText: '#f2f2f2',
      colorTextPlaceholder: '#8b8b8b',
      colorBorder: '#444444',
      colorBorderFocus: '#4da3ff',
      colorDanger: '#ff7b72',
    },
  },
} as const;
// Follows the OS theme; update() always gets the full appearance.
const media = matchMedia('(prefers-color-scheme: dark)');
const pick = (dark: boolean) => themes[dark ? 'dark' : 'light'];

const client = await loadN1co('pk_3x4mpl3pUbl1shabl3k3yAAAAAAAAAAA', { environment: 'sandbox' });
const card = client?.elements().create('card', { appearance: pick(media.matches) });
card?.mount('#card');
media.addEventListener('change', (e) => card?.update({ appearance: pick(e.matches) }));

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

const themes = {
  light: {
    theme: 'light',
    variables: {
      colorBackground: '#ffffff',
      colorText: '#1a1a1a',
      colorTextPlaceholder: '#767676',
      colorBorder: '#cccccc',
      colorBorderFocus: '#0b7a75',
      colorDanger: '#c62828',
    },
  },
  dark: {
    theme: 'dark',
    variables: {
      colorBackground: '#1a1a1a',
      colorText: '#f2f2f2',
      colorTextPlaceholder: '#8b8b8b',
      colorBorder: '#444444',
      colorBorderFocus: '#4da3ff',
      colorDanger: '#ff7b72',
    },
  },
} as const;

const cardBox = ref<HTMLElement | null>(null);
const card = ref<CardElement | null>(null);
const media = ref<MediaQueryList | null>(null);
const pick = (dark: boolean) => themes[dark ? 'dark' : 'light'];
const follow = (e: MediaQueryListEvent) => card.value?.update({ appearance: pick(e.matches) });

onMounted(async () => {
  const client = await loadN1co('pk_3x4mpl3pUbl1shabl3k3yAAAAAAAAAAA', { environment: 'sandbox' });
  if (!client || !cardBox.value) return;
  media.value = window.matchMedia('(prefers-color-scheme: dark)');
  card.value = client.elements().create('card', { appearance: pick(media.value.matches) });
  card.value.mount(cardBox.value);
  media.value.addEventListener('change', follow);
});

onBeforeUnmount(() => {
  media.value?.removeEventListener('change', follow);
  card.value?.unmount();
});
</script>

<template>
  <div ref="cardBox"></div>
</template>