0.0.6 • Published 3 years ago

frontend-giftcard-kiosk-beta v0.0.6

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

Frontend Gift Card Kiosk

[toc]

Configuration

import { configureGiftCardElements } from 'frontend-giftcard-kiosk-beta'

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 'frontend-giftcard-kiosk-beta'

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
   */
  paymentGatewayCustomerId: '',
  paymentGatewayPaymentMethod: {
    reference: '',
    type: '',
  },
  onError(error: Error< FrameError | ApiError>) {
    // Callback when any errors occurring with element
  },
  onProcess() {
    // Callback when form submitting. 
  },
  onMounted() {
    // The form is ready to display
  },
})

/**
 * 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()

Result

export interface testResultsObject {
  
}

Error Codes

CodeDescription
10API key required
11Payment API URL not found
12Unhandled API error
20HTML container required
21Failed to render gift card UI
60Failed 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,
}
0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago