@eonx/frontend-giftcard-kiosk

Frontend Gift Card Kiosk

• Configuration
• Create gift card
• Types
• Errors

Configuration

import { configureGiftCardElements } from '@eonx/frontend-giftcard-kiosk';

configureGiftCardElements({
  /**
   * Set it as true if you are working in a test environment
   **/
  test: true,
  themes: {
    /**
     * Global settings for all themes
     */
    '*': {
      fonts: [
        {
          css: 'https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Roboto&display=swap',
        },
      ],
      styles: {
        fontFamily: 'Lato',
        fontSizeBase: '12px',
        fontSizeSmall: '15px',
        colorPrimary: '#6366f1',
        colorBorder: '#e0e0e0',
        colorDanger: '#e53935',
        colorText: '#37474f',
        colorPlaceholder: '#78909c',
        colorInputLabel: '#455a64',
        colorInputBackground: '#fff',
        colorTextLight: 'gray',
        borderRadius: '6px',
        spacing: '10px',
        spacingLabel: '2px',
        inputHeight: '44px',
      },
    },
    /**
     * Global settings will be inherited and overrode here
     */
    custom: {
      fonts: [
        {
          family: 'Poppins',
          weight: '400',
          display: 'swap',
          src: `url(${window.location.origin}/fonts/poppins-regular.woff2)`,
        },
      ],
      styles: {
        fontFamily: 'Poppins',
        fontSizeBase: '16px',
      },
    },
  },
});

Create gift card

import {
  createGiftCard,
  ApiError,
  FrameError,
  PaymentCardTokenizeResult,
} from '@eonx/frontend-giftcard-kiosk';

const element = createGiftCard({
  /**
   * Predefined values: 'light' or 'dark'.
   * You can pass custom theme created by `createTheme` method.
   */
  theme: 'light',
  /**
   * API key with access to the payment API.
   */
  apiKey: '-api-key-',
  /**
   * HTML container where the payment element will be mounted.
   */
  container: 'container-id',
  /**
   * Initial values for the target customer.
   * Not required.
   */
  paymentGatewayCustomerId: '',
  /**
   * Payment method will be automatically attached to the order.
   * Not required.
   */
  paymentGatewayPaymentMethod: {
    reference: '',
    type: '',
  },
  /**
   * Prefill form values.
   * Not required.
   */
  formData: {
    receiptToEmail: '[e-mail]',
    fromName: 'Joe Black',
  },
  /**
   * Manage to display checkout button inside UI
   */
  showCheckoutButton: false,
  /**
   * Ability to hide buttons
   */
  isActionsVisible: false,
  /**
   * Height for 3DS container
   */
  threeDsHeight: 600,
  /**
   * Display CVV input after 3DS if the card already attached to the order
   */
  isVerificationCodeRequired: false,
  onError(error: Error<FrameError | ApiError>) {
    // Callback when any errors occurring with element
  },
  onProcess() {
    // Callback when form submitting.
  },
  onMounted() {
    // Frame mounted
  },
  onCheckout() {
    // When user completed to fill the form and switched to checkout page.
  },
  onReady() {
    // UI ready to display
  },
  onTransition() {
    // Transitions between routes
  },
  onPayment() {
    // 3DS displayed
  },
  onCancel() {
    // When process interrupted by local errors.
    // For example, when new card creation completed with error (unsupported card).
  },
});

/**
 * Element will be automatically disposed when container will be removed from DOM.
 * Use dispose method if you need to cancel element manually.
 */
element.dispose();

/**
 * Send submit event to form
 */
element.submit();

Error Codes

Code	Description
10	API key required
11	Payment API URL not found
12	Unhandled API error
20	HTML container required
21	Failed to render gift card UI
60	Failed to create gift card card

Types

type MountContainer = string | HTMLElement;

Errors

interface Error<T> {
  code: T;
  message: string;
  description: string;
  violations: Record<string, string[]>;
  data: any;
}

export enum ApiError {
  KeyRequired = 10,
  UrlRequired = 11,
  UnhandledError = 12,
}

export enum FrameError {
  ContainerRequired = 20,
  MountFailed = 21,
}