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: '[email protected]',
    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,
}