0.0.6 • Published 3 years ago
frontend-giftcard-kiosk-beta v0.0.6
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
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,
}