Web

const options = {
	/* Other checkout options ... */

	locale: 'fr-FR', // Renders Universal Checkout in French
}

const options = {
	/* Other checkout options ... */

	locale: 'ar-AR', // Renders Universal Checkout in Arabic with right-to-left layout
}

const options = {
	/* Other checkout options ... */

	style: {
		/* Style options */
	},
}

interface TextStyle {
	color?: string
	fontFamily?: string
	fontWeight?: string
	fontSize?: string
	fontSmoothing?: string
	lineHeight?: string
	textTransform?: string
	letterSpacing?: string
}

interface BlockStyle {
	background?: string
	borderRadius?: number | string
	boxShadow?: string
	borderStyle?: string
	borderColor?: number | string
	borderWidth?: number | string
}

#my-checkout {
	font-family: 'MyFont', sans-serif;
}

const options = {
	/* Other options ... */
	style: {
		/* Forwarded to iframes */
		fontFaces: [
			{
				fontFamily: 'Open Sans',
				src: 'url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff")',
			},
		],

		/* Forwarded to iframes */
		stylesheets: [
			{
				href: '<https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap>',
			},
		],

		/* Unified across all inputs: inside and outside iframes */
		input: {
			base: {
				fontFamily: 'Open Sans',
			},
		},
	},
}

interface InputStyle {
	height?: number
	paddingHorizontal?: number

	background?: string
	borderRadius?: number | string
	boxShadow?: string

	borderStyle?: string
	borderColor?: string
	borderWidth?: number | string

	color?: string
	fontFamily?: string
	fontWeight?: string
	fontSize?: string
	fontSmoothing?: string
	lineHeight?: string
}

interface CheckoutStyle {
	// Input styling
	input?: {
		// Base style
		base?: InputStyle & {
			hover?: InputStyle // :hover
			focus?: InputStyle // :focus
			placeholder?: InputStyle //  ::placeholder
			webkitAutofill?: InputStyle // :-webkit-autofill
			selection?: InputStyle // ::selection
		}

		// Style of the label displayed above the input fields
		inputLabel?: TextStyle
	}
}

const options = {
	/* Other options ... */
	style: {
		inputLabel: {
			fontFamily: 'courier new',
			color: '#000000',
		},
		input: {
			base: {
				borderStyle: 'none none solid none',
				borderColor: '#000000',
				boxShadow: '0px',
				background: '#ffffff',
				fontFamily: 'courier new',
				borderRadius: '0px',
				paddingHorizontal: '0px',
				lineHeight: '',
				color: '#000000',
				placeholder: {
					color: '#e1deda',
				},
			},
		},
	},
}

const options = {
	/* Other options ... */
	form: {
		inputLabelsVisible: false,
	},
}

interface TextAlignmentStyle {
	textAlign?: string
}

const options = {
	/* Other options ... */
	style: {
		input: {
			error:
				InputStyle &
				{
					hover: InputStyle,
					focus: InputStyle,
					placeholder: InputStyle,
					webkitAutofill: InputStyle,
					selection: InputStyle,
				},
		},
		// Style of the error messages displayed below the input fields
		inputErrorText: TextStyle & TextAlignmentStyle,
	},
}

const options = {
	/* Other options ... */
	style: {
		inputErrorText: {
			fontFamily: 'courier new',
			textAlign: 'left',
			color: '#e70909',
		},
		inputLabel: {
			fontFamily: 'courier new',
			color: '#000000',
		},
		input: {
			base: {
				borderStyle: 'none none solid none',
				borderColor: '#000000',
				boxShadow: '0px',
				background: '#ffffff',
				fontFamily: 'courier new',
				borderRadius: '0px',
				paddingHorizontal: '0px',
				lineHeight: '',
				color: '#000000',
				placeholder: {
					color: '#e1deda',
				},
				error: {
					borderStyle: 'solid',
					borderColor: '#d0021b',
				},
			},
		},
	},
}

// Error Message Interface
interface ErrorMessageStyle extends BlockStyle, TextStyle {
	color?: string
}

// Example
const options = {
	/* Other options ... */
	style: {
		errorMessage: ErrorMessageStyle,
	},
}

// Form Spacings Interface
interface FormSpacings {
	betweenLabelAndInput?: string
	betweenInputs?: string
}

// Example
const options = {
	style: {
		formSpacings: {
			betweenLabelAndInput: '0px',
			betweenInputs: '10px',
		},
	},
}

const options = {
	/* Other options ... */
	style: {
		submitButton: {
			base: {
				hover: TextStyle & BlockStyle,
				focus: TextStyle & BlockStyle,
			},

			disabled: {
				hover: TextStyle & BlockStyle,
				focus: TextStyle & BlockStyle,
			},

			loading: {
				hover: TextStyle & BlockStyle,
				focus: TextStyle & BlockStyle,
			},
		},
	},
}

const options = {
	/* Other options ... */
	style: {
		submitButton: {
			base: {
				color: '#ffffff',
				background: '#000000',
				borderRadius: '3px',
				fontFamily: 'courier new',
				fontWeight: 'bold',
				boxShadow: 'none',
			},
			disabled: {
				color: '#9b9b9b',
				background: '#e1deda',
			},
		},
	},
}

const options = {
	/* Other options ... */
	style: {
		backButton: {
			color: string,
		},
	},
}

type SceneOptions = {
	// A callback for receiving the current scene that is entering
	onEntering?: (sceneId: string) => void

	// Specify options relating to scene transitions
	// Setting to false disables all scene transitions
	// Defaults to a 'SLIDE_UP' type transition with a duration of 700ms
	transition?: SceneTransitionOptions | false
}

type SceneTransitionOptions = {
	// The type of transition animation which will be used
	type: TransitionType
	// The duration of the transition animation
	duration: number
}

type TransitionType = 'SLIDE_UP' | 'SLIDE_DOWN' | 'SLIDE_HORIZONTAL'

const handleOnSceneEntering = (sceneId: string) => {
	// perform action based on current scene being entered
}

const options = {
	/* Other options ... */

	// Example 1 - scene with custom transitions enabled
	scene: {
		onEntering: handleOnSceneEntering,
		transition: {
			type: 'SLIDE_DOWN',
			duration: 650, // duration in milliseconds
		},
	},

	// Example 2 - scene with all transitions disabled
	scene: {
		onEntering: handleOnSceneEntering,
		transition: false,
	},
}

const options = {
	/* Other options ... */
	style: {
		loadingScreen: {
			// Color of the loading screen indicator
			color: string,
		},
	},
}

const options = {
	/* Other options ... */
	vault: {
		// Fetch the vaulted payment methods for the customerId
		//of the current session and display them
		// Default to true
		visible: boolean,

		// Disable the option to delete a saved payment method.
		// Default to false
		deletionDisabled: boolean,
	},
}

const options = {
	/* Other options ... */
	style: {
		showMorePaymentMethodsButton: {
			base: TextStyle,
			disabled: TextStyle,
		},
	},
}

// Pop-up menu to manage the vaulted payment methods
const options = {
	/* Other options ... */
	// Pop-up menu to manage the vaulted payment methods
	vaultMenu: {
		// Pencil icon
		editButton: {
			// Backround of the pencil icon
			background: string,
			// Color of the pencil icon
			color: string,
		},

		item: {
			label: textStyle,
			// Delete & Cancel button
			actionButton: TextStyle,
			confirmButton: TextStyle & BlockStyle,
		},
	},
}

const options = {
	/* Other options ... */
	errorMessage: {
		// Disable the appearance of the
		//default error message
		// Default to false
		disabled: boolean,

		// A callback for when the error message
		//should be displayed
		onErrorMessageShow(message: string) {
			// Choose to use provided message for own purposes
		},

		// A callback for when the error message
		//should be hidden
		onErrorMessageHide() {
			// Update own UI accordingly
		},
	},
}

type CardPreferredFlow = 'DEDICATED_SCENE' | 'EMBEDDED_IN_HOME'

// Example
Primer.showUniversalCheckout(clientToken, {
	// ...
	card: {
		preferredFlow: 'DEDICATED_SCENE', // Show the card form on a separate scene
	},
})

const options = {
	/* Other options ... */
	style: {
		paymentMethodButton: {
			background: string,
			borderRadius: number | string,
			boxShadow: string,
			borderColor: string,
			height: number,
			primaryText: TextStyle,
			logoColor: logoColor,
			marginTop: string,
		},
	},
}

const checkout = await primer.showUniversalCheckout(clientToken, {
	submitButton: {
		useBuiltInButton: false, // Hide the built-in submit button
	},
})

const checkout = await primer.showUniversalCheckout(clientToken, options)
const handleMySubmitButtonClick = e => {
	checkout.submit()
}

const checkout = await primer.showUniversalCheckout(clientToken, {
	/* Other options ... */
	submitButton: {
		useBuiltInButton: false, // Hide the built-in submit button
		// The Universal Checkout expects the button to be showed or hidden
		onVisible: (isVisible: boolean) => {
			// Show / Hide the submit button
		},
		// The Universal Checkout expects the button to be enabled or disabled
		onDisable: (isDisabled: boolean) => {
			// Enable / Disable the submit button
		},
		// The Universal Checkout expects the button to have a loading indicator
		// to indicate that it is processing/loading something
		// "isLoading: true" also means that the button is disabled
		onLoading: (isLoading: boolean) => {
			// Set the submit button to loading or not
		},
		// Set the content of your submit button
		onContentChange: (content: string) => {
			// Set the text content of the submit button
		},
	},
})

const getSubmitButtonFromSceneId = (sceneId: string) => {
	if (sceneId === 'UniversalCheckout/Home') {
		return 'SideButton'
	} else if (sceneId === '...') {
		return 'TopButton'
	}
	return 'BottomButton'
}
const onVisible = (isVisible, context) => {
	const { prevousSceneId, currentSceneId } = context
	if (!isVisible) {
		hideAllSubmitButtons()
	} else {
		hideSubmitButton(getSubmitButtonFromSceneId(previousSceneId))
		showSubmitButton(getSubmitButtonFromSceneId(currentSceneId))
	}
}
const onContentChange = (content, context) => {
	const { currentSceneId } = context
	setSubmitButtonContent(getSubmitButtonFromSceneId(currentSceneId), content)
}

await primer.showUniversalCheckout(clientToken, {
	/* Other options ... */
	successScreen: {
		type: 'CHECK',
		title: 'My custom title',
	},
})

await primer.showUniversalCheckout(clientToken, {
	/* Other options ... */
	successScreen: false,
})