12345

const options = {    /* Other checkout options ... */
    locale: 'fr-FR', // Renders Universal Checkout in French}

12345

const options = {    /* Other checkout options ... */
    locale: 'ar-AR', // Renders Universal Checkout in Arabic with right-to-left layout}

1234567

const options = {    /* Other checkout options ... */
    style: {        /* Style options */    },}

12345678910

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

12345678

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

1234567891011121314151617181920212223242526

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',            },        },    },}

12345678910111213141516171819

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}

12345678910111213141516

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    }}

12345678910111213141516171819202122232425

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',                },            },        },    },}

123456

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

123

interface TextAlignmentStyle {    textAlign?: string}

123456789101112131415161718

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,    },}

12345678910111213141516171819202122232425262728293031323334

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',                },            },        },    },}

123456789101112

// Error Message Interfaceinterface ErrorMessageStyle extends BlockStyle, TextStyle {    color?: string}
// Exampleconst options = {    /* Other options ... */    style: {        errorMessage: ErrorMessageStyle,    },}

123456789101112131415

// Form Spacings Interfaceinterface FormSpacings {    betweenLabelAndInput?: string    betweenInputs?: string}
// Exampleconst options = {    style: {        formSpacings: {            betweenLabelAndInput: '0px',            betweenInputs: '10px',        },    },}

123456789101112131415161718192021

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,            },        },    },}

12345678910111213141516171819

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',            },        },    },}

12345678

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

123456789101112131415161718

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'

12345678910111213141516171819202122

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,    },}

123456789

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

12345678910111213

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,    },}

123456789

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

123456789101112131415161718192021

// Pop-up menu to manage the vaulted payment methodsconst 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,        },    },}

123456789101112131415161718192021

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        },    },}

123456789

type CardPreferredFlow = 'DEDICATED_SCENE' | 'EMBEDDED_IN_HOME'
// ExamplePrimer.showUniversalCheckout(clientToken, {    // ...    card: {        preferredFlow: 'DEDICATED_SCENE', // Show the card form on a separate scene    },})

123456789101112131415

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

12345

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

1234

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

123456789101112131415161718192021222324

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        },    },})

123456789101112131415161718192021

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)}

1234567

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

1234

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