{"version":3,"sources":["client/index.ts","client/queries.ts","store/configuration.ts","store/customer.ts","store/request.ts","notification.tsx","store/paymentSource.tsx","store/transaction.tsx","store/payLink.ts","store/cardSource.ts","store/index.ts","components/NavMenu.tsx","components/ReferenceLink.tsx","components/Footer.tsx","components/Layout.tsx","pages/Home.tsx","components/TableOfContents.tsx","components/SideBySideLayout.tsx","components/LeftSide.tsx","components/RightSide.tsx","components/CodeSnippet.tsx","components/Loader.tsx","pages/UseCases.tsx","components/sdk/AddPaymentSourceButton.tsx","components/sdk/UpdatePaymentSourceButton.tsx","components/sdk/AddChargeButton.tsx","components/sdk/AddTipButton.tsx","components/AggregatorCredentialsAlert.tsx","pages/SDK.tsx","components/PayLinkButton.tsx","pages/PayLink.tsx","pages/PayLinkCallback.tsx","pages/PayLinkTryIt.tsx","components/sdk/AddCardChargeButton.tsx","components/Configuration.tsx","App.tsx","registerServiceWorker.ts","index.tsx","store/configureStore.ts"],"names":["Client","_client","this","GraphQLClient","a","request","configurationQuery","data","configuration","id","variables","getCustomerTokenQuery","customer","aggregator","resetPaymentSourceMutation","customerId","createSandboxPaymentSourceMutation","createSandboxPaymentSource","paymentSourceId","createChargeMutation","createCharge","amount","token","expirationDate","cvv2","cardType","cardHolderName","zipCode","createCardChargeMutation","console","log","generateTsepManifest","createPayLinkMutation","createPayLink","gql","actionCreators","fetchConfiguration","dispatch","getState","client","getConfiguration","type","payload","search","querystring","url","parse","document","location","href","query","unloadedState","config","apiHost","tsepScriptPath","showCardProcessing","showTsepLogging","aggregators","setCustomerTokenAction","setRequestingAction","requestName","requesting","notify","element","toast","className","setPaymentSourceAction","paymentSource","setChargeAction","charge","setPayLinkConfiguration","tipBeneficiaryName","tipDetailsDisplayMessage","treez","withCallbacks","setCardSourceConfiguration","tsepToken","maskedCardNumber","reducers","state","action","configFound","find","el","name","transaction","payLink","cardSource","replace","trim","addPaymentSource","publishableKey","getCustomerToken","Stronghold","Pay","host","environment","ENVIRONMENT","sandbox","onSuccess","label","onReady","updatePaymentSource","aggregatorName","resetPaymentSource","addCharge","chargeAmount","tipAmount","undefined","tip","beneficiaryName","addCardCharge","createCardCharge","maskedCardNum","addTip","chargeId","tryPayLink","window","history","push","merged","open","NavMenu","isOpen","toggle","setState","Navbar","light","Container","NavbarBrand","tag","Link","to","src","alt","style","height","NavbarToggler","onClick","Collapse","navbar","NavItem","NavLink","target","rel","React","PureComponent","ReferenceLink","props","children","route","connect","Date","getFullYear","Layout","componentDidMount","manifest","obj","JSON","stringify","tsepManifest","Helmet","bindActionCreators","role","TableOfContents","elements","map","key","classes","size","join","anchor","snakeCase","text","Anchor","SideBySideLayout","LeftSide","RightSide","Snippet","Code","Prism","highlightAll","language","code","Loader","Spinner","color","TabName","AddPaymentSourceButton","Button","disabled","data-sh","ownProps","UpdatePaymentSourceButton","AddChargeButton","dataSh","AddTipButton","username","password","Alert","SDK","hidden","paymentSourceLabel","PayLinkButton","withRouter","pay_link_callback","pay_link_id","pay_link_type","payment_source_id","charge_id","tip_id","custom_key","PayLinkTryIt","AddCardChargeButton","isReady","componentDidUpdate","prevProps","onSubmit","UseCases","setPaidTrue","paid","activeTab","PAY_BY_ACH","cardAuth","tsepHandler","eventType","event","responseCode","result","prev","width","Nav","tabs","classnames","active","PAY_BY_CARD","TabContent","TabPane","tabId","value","checked","htmlFor","readOnly","method","data-validate-name","data-auto-formatting","data-validate-cc","data-detect-card-type","data-validate-expiry-date","data-validate-cvv2","data-validate-zipcode","Configuration","position","hideProgressBar","path","component","PayLinkCallback","PayLink","exact","Home","isLocalhost","Boolean","hostname","match","registerValidSW","swUrl","navigator","serviceWorker","register","then","registration","onupdatefound","installingWorker","installing","onstatechange","controller","catch","error","baseUrl","getElementsByTagName","getAttribute","createBrowserHistory","basename","store","initialState","middleware","thunk","routerMiddleware","rootReducer","combineReducers","router","connectRouter","enhancers","windowIfDefined","__REDUX_DEVTOOLS_EXTENSION__","createStore","compose","applyMiddleware","configureStore","ReactDOM","render","App","getElementById","URL","process","toString","origin","addEventListener","fetch","response","contentType","headers","get","status","indexOf","ready","unregister","reload","checkValidServiceWorker","registerServiceWorker"],"mappings":"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","file":"static/js/main.95e0ae28.chunk.js","sourcesContent":["import { GraphQLClient } from 'graphql-request';\nimport { Charge, PaymentSource } from 'stronghold-pay-js';\nimport { PayLinkConfiguration } from '../store/payLink';\nimport {\n    configurationQuery,\n    getCustomerTokenQuery,\n    resetPaymentSourceMutation,\n    createSandboxPaymentSourceMutation,\n    createChargeMutation,\n    createPayLinkMutation,\n    createCardChargeMutation,\n    generateTsepManifest,\n} from './queries';\nimport { AggregatorName, Configuration, GetCustomerTokenResponse } from './types';\n\nclass Client {\n    private _client: GraphQLClient;\n\n    constructor() {\n        this._client = new GraphQLClient('/graphql');\n    }\n\n    async getConfiguration(): Promise<Configuration> {\n        const data = await this._client.request<{ configuration: Configuration }>(configurationQuery);\n        return data.configuration;\n    }\n\n    async getCustomerToken(id?: string): Promise<GetCustomerTokenResponse> {\n        const variables = { id };\n\n        const data = await this._client.request<{\n            customer: GetCustomerTokenResponse;\n        }>(getCustomerTokenQuery, variables);\n        return data.customer;\n    }\n\n    async resetPaymentSource(id: string, aggregator: AggregatorName) {\n        const variables = { id, aggregator };\n        const data = await this._client.request<{ resetPaymentSource: string }>(resetPaymentSourceMutation, variables);\n        return data;\n    }\n\n    async createSandboxPaymentSource(customerId: string) {\n        const variables = { customerId };\n        const data = await this._client.request<{ createSandboxPaymentSource: PaymentSource }>(\n            createSandboxPaymentSourceMutation,\n            variables,\n        );\n        return data.createSandboxPaymentSource;\n    }\n\n    async createCharge(customerId: string, paymentSourceId: string) {\n        const variables = { customerId, paymentSourceId };\n        const data = await this._client.request<{ createCharge: Charge }>(createChargeMutation, variables);\n        return data.createCharge;\n    }\n\n    async createCardCharge(\n        amount: number,\n        token: string,\n        expirationDate: string,\n        cvv2: string,\n        cardType: string,\n        cardHolderName: string,\n        zipCode: string,\n    ) {\n        try {\n            const variables = { amount, token, expirationDate, cvv2, cardType, cardHolderName, zipCode };\n            const data = await this._client.request(createCardChargeMutation, variables);\n            return data;\n        } catch (e) {\n            console.log(e);\n        }\n    }\n\n    async generateTsepManifest() {\n        try {\n            const data = await this._client.request(generateTsepManifest);\n            return data;\n        } catch (e) {\n            console.log(e);\n        }\n    }\n\n    async createPayLink(configuration: PayLinkConfiguration) {\n        const variables = configuration;\n        const data = await this._client.request<{ createPayLink: { id: string; url: string } }>(\n            createPayLinkMutation,\n            variables,\n        );\n        return data.createPayLink;\n    }\n}\n\nexport * from './types';\nexport default new Client();\n","import { gql } from 'graphql-request';\n\nexport const configurationQuery = gql`\n    {\n        configuration {\n            apiHost\n            tsepScriptPath\n            showCardProcessing\n            showTsepLogging\n            aggregators {\n                name\n                publishableKey\n            }\n        }\n    }\n`;\n\nexport const getCustomerTokenQuery = gql`\n    query($id: String) {\n        customer(id: $id) {\n            id\n            token\n        }\n    }\n`;\n\nexport const resetPaymentSourceMutation = gql`\n    mutation($id: String!, $aggregator: Aggregator!) {\n        resetPaymentSource(id: $id, aggregator: $aggregator)\n    }\n`;\n\nexport const createSandboxPaymentSourceMutation = gql`\n    mutation($customerId: String!) {\n        createSandboxPaymentSource(customerId: $customerId) {\n            id\n            label\n        }\n    }\n`;\n\nexport const createChargeMutation = gql`\n    mutation($customerId: String!, $paymentSourceId: String!) {\n        createCharge(customerId: $customerId, paymentSourceId: $paymentSourceId) {\n            id\n            amount\n        }\n    }\n`;\n\nexport const createCardChargeMutation = gql`\n    mutation(\n        $amount: Int!\n        $token: String!\n        $expirationDate: String!\n        $cvv2: String!\n        $cardType: String!\n        $cardHolderName: String!\n        $zipCode: String!\n    ) {\n        createCardCharge(\n            amount: $amount\n            token: $token\n            expirationDate: $expirationDate\n            cvv2: $cvv2\n            cardType: $cardType\n            cardHolderName: $cardHolderName\n            zipCode: $zipCode\n        )\n    }\n`;\n\nexport const generateTsepManifest = gql`\n    mutation {\n        generateTsepManifest\n    }\n`;\n\nexport const createPayLinkMutation = gql`\n    mutation(\n        $type: PayLinkType!\n        $tipBeneficiaryName: String\n        $tipDetailsDisplayMessage: String\n        $withCallbacks: Boolean\n        $treez: Boolean\n    ) {\n        createPayLink(\n            type: $type\n            withCallbacks: $withCallbacks\n            treez: $treez\n            tipBeneficiaryName: $tipBeneficiaryName\n            tipDetailsDisplayMessage: $tipDetailsDisplayMessage\n        ) {\n            id\n            url\n        }\n    }\n`;\n","// -----------------\n// STATE - This defines the type of data maintained in the Redux store.\n\nimport { Reducer } from 'redux';\nimport { AppThunkAction } from './index';\nimport client, { AggregatorConfiguration, AggregatorName, Configuration } from '../client';\nimport url from 'url';\nimport * as querystring from 'querystring';\n\nexport interface ConfigurationState {\n    config: Configuration;\n    aggregator: AggregatorConfiguration | null;\n}\n\n// -----------------\n// ACTIONS - These are serializable (hence replayable) descriptions of state transitions.\n// They do not themselves have any side-effects; they just describe something that is going to happen.\n// Use @typeName and isActionType for type detection that works even after serialization/deserialization.\n\nexport interface SetConfigurationAction {\n    type: 'SET_CONFIGURATION';\n    payload: Configuration;\n}\nexport const setConfiguration = (config: Configuration): SetConfigurationAction => ({\n    type: 'SET_CONFIGURATION',\n    payload: config,\n});\n\nexport interface SetAggregatorConfigAction {\n    type: 'SET_AGGREGATOR_CONFIGURATION';\n    payload: AggregatorName;\n}\nexport const setAggregatorConfiguration = (aggregatorName: AggregatorName): SetAggregatorConfigAction => ({\n    type: 'SET_AGGREGATOR_CONFIGURATION',\n    payload: aggregatorName,\n});\n\n// Declare a 'discriminated union' type. This guarantees that all references to 'type' properties contain one of the\n// declared type strings (and not any other arbitrary string).\nexport type KnownAction = SetConfigurationAction | SetAggregatorConfigAction;\n\n// ----------------\n// ACTION CREATORS - These are functions exposed to UI components that will trigger a state transition.\n// They don't directly mutate state, but they can have external side-effects (such as loading data).\n\nexport const actionCreators = {\n    fetchConfiguration: (): AppThunkAction<KnownAction> => async (dispatch, getState) => {\n        const configuration = await client.getConfiguration();\n        dispatch(setConfiguration(configuration));\n\n        const search = querystring.parse(url.parse(document.location.href).query || '');\n        const aggregator = search.aggregator as AggregatorName;\n        dispatch(setAggregatorConfiguration(aggregator));\n    },\n};\n\n// ----------------\n// REDUCER - For a given state and action, returns the new state. To support time travel, this must not mutate the old state.\n\nconst unloadedState: ConfigurationState = {\n    config: { apiHost: '', tsepScriptPath: '', showCardProcessing: '', showTsepLogging: '', aggregators: [] },\n    aggregator: null,\n};\n\nexport const reducer: Reducer<ConfigurationState, KnownAction> = (\n    state: ConfigurationState = unloadedState,\n    action: KnownAction,\n): ConfigurationState => {\n    switch (action.type) {\n        case 'SET_CONFIGURATION':\n            return {\n                ...state,\n                config: action.payload,\n                aggregator: action.payload.aggregators[0] || null,\n            };\n        case 'SET_AGGREGATOR_CONFIGURATION':\n            const configFound = state.config.aggregators.find((el) => el.name === action.payload) || state.aggregator;\n            return { ...state, aggregator: configFound };\n        default:\n            return state;\n    }\n};\n","// -----------------\n// STATE - This defines the type of data maintained in the Redux store.\n\nimport { Reducer } from 'redux';\n\nexport interface CustomerState {\n    id: string | null;\n    token: string | null;\n}\n\n// -----------------\n// ACTIONS - These are serializable (hence replayable) descriptions of state transitions.\n// They do not themselves have any side-effects; they just describe something that is going to happen.\n// Use @typeName and isActionType for type detection that works even after serialization/deserialization.\n\nexport interface SetCustomerIdAction {\n    type: 'SET_CUSTOMER_ID';\n    payload: string;\n}\nexport interface SetCustomerTokenAction {\n    type: 'SET_CUSTOMER_TOKEN';\n    payload: string;\n}\nexport const setCustomerTokenAction = (token: string): SetCustomerTokenAction => ({\n    type: 'SET_CUSTOMER_TOKEN',\n    payload: token,\n});\n\nexport type KnownAction = SetCustomerIdAction | SetCustomerTokenAction;\n\n// ----------------\n// ACTION CREATORS - These are functions exposed to UI components that will trigger a state transition.\n// They don't directly mutate state, but they can have external side-effects (such as loading data).\n\nexport const actionCreators = {};\n\n// ----------------\n// REDUCER - For a given state and action, returns the new state. To support time travel, this must not mutate the old state.\n\nconst unloadedState: CustomerState = {\n    id: null,\n    token: null,\n};\n\nexport const reducer: Reducer<CustomerState, KnownAction> = (\n    state: CustomerState = unloadedState,\n    action: KnownAction,\n): CustomerState => {\n    switch (action.type) {\n        case 'SET_CUSTOMER_ID':\n            return {\n                ...state,\n                id: action.payload,\n            };\n        case 'SET_CUSTOMER_TOKEN':\n            return {\n                ...state,\n                token: action.payload,\n            };\n        default:\n            return state;\n    }\n};\n","// -----------------\n// STATE - This defines the type of data maintained in the Redux store.\n\nimport { Reducer } from 'redux';\n\ntype RequestName =\n    | 'add_payment_source'\n    | 'update_payment_source'\n    | 'add_charge'\n    | 'add_tip'\n    | 'create_pay_link'\n    | 'add_card_source';\n\nexport interface RequestState {\n    requesting: RequestName | null;\n}\n\n// -----------------\n// ACTIONS - These are serializable (hence replayable) descriptions of state transitions.\n// They do not themselves have any side-effects; they just describe something that is going to happen.\n// Use @typeName and isActionType for type detection that works even after serialization/deserialization.\n\nexport interface SetRequestingAction {\n    type: 'SET_REQUESTING';\n    payload: RequestName | null;\n}\nexport const setRequestingAction = (requestName?: RequestName): SetRequestingAction => ({\n    type: 'SET_REQUESTING',\n    payload: requestName || null,\n});\n\n// Declare a 'discriminated union' type. This guarantees that all references to 'type' properties contain one of the\n// declared type strings (and not any other arbitrary string).\nexport type KnownAction = SetRequestingAction;\n\n// ----------------\n// ACTION CREATORS - These are functions exposed to UI components that will trigger a state transition.\n// They don't directly mutate state, but they can have external side-effects (such as loading data).\n\nexport const actionCreators = {};\n\n// ----------------\n// REDUCER - For a given state and action, returns the new state. To support time travel, this must not mutate the old state.\n\nconst unloadedState: RequestState = {\n    requesting: null,\n};\n\nexport const reducer: Reducer<RequestState, KnownAction> = (\n    state: RequestState = unloadedState,\n    action: KnownAction,\n): RequestState => {\n    switch (action.type) {\n        case 'SET_REQUESTING':\n            return {\n                ...state,\n                requesting: action.payload,\n            };\n        default:\n            return state;\n    }\n};\n","import React from 'react';\nimport { toast } from 'react-toastify';\n\nexport function notify(element: React.ReactNode) {\n    toast(() => <div className=\"text-dark\">{element}</div>);\n}\n","// -----------------\n// STATE - This defines the type of data maintained in the Redux store.\n\nimport React from 'react';\nimport { notify } from '../notification';\nimport { Reducer } from 'redux';\nimport { PaymentSource } from 'stronghold-pay-js';\nimport client from '../client';\nimport { setCustomerTokenAction } from './customer';\nimport { ApplicationAction, AppThunkAction } from './index';\nimport { setRequestingAction } from './request';\n\nexport interface PaymentSourceState {\n    paymentSource: PaymentSource | null;\n}\n\n// -----------------\n// ACTIONS - These are serializable (hence replayable) descriptions of state transitions.\n// They do not themselves have any side-effects; they just describe something that is going to happen.\n// Use @typeName and isActionType for type detection that works even after serialization/deserialization.\n\nexport interface SetPaymentSourceAction {\n    type: 'SET_PAYMENT_SOURCE';\n    payload: PaymentSource;\n}\nexport const setPaymentSourceAction = (paymentSource: PaymentSource): SetPaymentSourceAction => ({\n    type: 'SET_PAYMENT_SOURCE',\n    payload: paymentSource,\n});\n\nexport type KnownAction = SetPaymentSourceAction;\n\n// ----------------\n// ACTION CREATORS - These are functions exposed to UI components that will trigger a state transition.\n// They don't directly mutate state, but they can have external side-effects (such as loading data).\n\nexport const actionCreators = {\n    addPaymentSource: (): AppThunkAction<ApplicationAction> => async (dispatch, getState) => {\n        const apiHost = getState().configuration.config.apiHost;\n        const publishableKey = getState().configuration.aggregator?.publishableKey || '';\n\n        dispatch(setRequestingAction('add_payment_source'));\n        try {\n            const customer = await client.getCustomerToken();\n            dispatch({ type: 'SET_CUSTOMER_ID', payload: customer.id });\n            dispatch(setCustomerTokenAction(customer.token));\n\n            const strongholdPay = Stronghold.Pay({\n                host: apiHost,\n                environment: Stronghold.ENVIRONMENT.sandbox,\n                publishableKey: publishableKey,\n            });\n            strongholdPay.addPaymentSource(customer.token, {\n                onSuccess: (paymentSource) => {\n                    notify(\n                        <span>\n                            Payment source <strong>{paymentSource.label}</strong> added.\n                        </span>,\n                    );\n                    dispatch({ type: 'SET_PAYMENT_SOURCE', payload: paymentSource });\n                },\n                onReady: () => dispatch(setRequestingAction()),\n            });\n        } finally {\n            dispatch(setRequestingAction());\n        }\n    },\n\n    updatePaymentSource: (): AppThunkAction<ApplicationAction> => async (dispatch, getState) => {\n        const apiHost = getState().configuration.config.apiHost;\n        const publishableKey = getState().configuration.aggregator?.publishableKey || '';\n        const paymentSource = getState().paymentSource.paymentSource || null;\n        const paymentSourceId = paymentSource?.id || '';\n        const customerId = getState().customer.id || '';\n        const aggregatorName = getState().configuration.aggregator?.name || 'plaid';\n\n        dispatch(setRequestingAction('update_payment_source'));\n        try {\n            await client.resetPaymentSource(paymentSourceId, aggregatorName);\n            const customer = await client.getCustomerToken(customerId);\n            dispatch({ type: 'SET_CUSTOMER_ID', payload: customer.id });\n            dispatch(setCustomerTokenAction(customer.token));\n\n            dispatch(setRequestingAction());\n            const strongholdPay = Stronghold.Pay({\n                host: apiHost,\n                environment: Stronghold.ENVIRONMENT.sandbox,\n                publishableKey: publishableKey,\n            });\n            strongholdPay.updatePaymentSource(customer.token, {\n                paymentSourceId,\n                onSuccess: () => {\n                    notify(\n                        <span>\n                            Credentials of the payment source <strong>{paymentSource?.label}</strong> updated.\n                        </span>,\n                    );\n                },\n                onReady: () => dispatch(setRequestingAction()),\n            });\n        } finally {\n            dispatch(setRequestingAction());\n        }\n    },\n};\n\n// ----------------\n// REDUCER - For a given state and action, returns the new state. To support time travel, this must not mutate the old state.\n\nconst unloadedState: PaymentSourceState = {\n    paymentSource: null,\n};\n\nexport const reducer: Reducer<PaymentSourceState, KnownAction> = (\n    state: PaymentSourceState = unloadedState,\n    action: KnownAction,\n): PaymentSourceState => {\n    switch (action.type) {\n        case 'SET_PAYMENT_SOURCE':\n            return {\n                ...state,\n                paymentSource: action.payload,\n            };\n        default:\n            return state;\n    }\n};\n","// -----------------\n// STATE - This defines the type of data maintained in the Redux store.\n\nimport React from 'react';\nimport { notify } from '../notification';\nimport { Reducer } from 'redux';\nimport client from '../client';\nimport { setCustomerTokenAction } from './customer';\nimport { ApplicationAction, AppThunkAction } from './index';\nimport { setRequestingAction } from './request';\nimport { Charge } from 'stronghold-pay-js';\nimport { setPaymentSourceAction } from './paymentSource';\n\nexport interface TransactionState {\n    charge: Charge | null;\n}\n\n// -----------------\n// ACTIONS - These are serializable (hence replayable) descriptions of state transitions.\n// They do not themselves have any side-effects; they just describe something that is going to happen.\n// Use @typeName and isActionType for type detection that works even after serialization/deserialization.\n\nexport interface SetChargeAction {\n    type: 'SET_CHARGE';\n    payload: Charge;\n}\nexport const setChargeAction = (payload: Charge): SetChargeAction => ({ type: 'SET_CHARGE', payload });\n\nexport type KnownAction = SetChargeAction;\n\n// ----------------\n// ACTION CREATORS - These are functions exposed to UI components that will trigger a state transition.\n// They don't directly mutate state, but they can have external side-effects (such as loading data).\n\nexport const actionCreators = {\n    addCharge: ({\n        chargeAmount = 8950,\n        tipAmount,\n        paymentSourceId,\n    }: {\n        chargeAmount?: number;\n        tipAmount?: number;\n        paymentSourceId?: string;\n    } = {}): AppThunkAction<ApplicationAction> => async (dispatch, getState) => {\n        const apiHost = getState().configuration.config.apiHost;\n        const publishableKey = getState().configuration.aggregator?.publishableKey || '';\n        const customerId = getState().customer.id || undefined;\n\n        dispatch(setRequestingAction('add_charge'));\n        try {\n            const customer = await client.getCustomerToken(customerId);\n            dispatch({ type: 'SET_CUSTOMER_ID', payload: customer.id });\n            dispatch(setCustomerTokenAction(customer.token));\n            if (!paymentSourceId) {\n                const paymentSource = await client.createSandboxPaymentSource(customer.id);\n                dispatch(setPaymentSourceAction(paymentSource));\n                paymentSourceId = paymentSource.id;\n            }\n\n            const strongholdPay = Stronghold.Pay({\n                host: apiHost,\n                environment: Stronghold.ENVIRONMENT.sandbox,\n                publishableKey: publishableKey,\n            });\n            strongholdPay.charge(customer.token, {\n                charge: {\n                    amount: chargeAmount,\n                    paymentSourceId: paymentSourceId,\n                },\n                tip: tipAmount\n                    ? {\n                          amount: tipAmount,\n                          beneficiaryName: 'John',\n                      }\n                    : undefined,\n                onSuccess: (charge) => {\n                    notify(\n                        <span>\n                            Charge with id <strong>${charge.id}</strong> created.\n                        </span>,\n                    );\n                    dispatch(setChargeAction(charge));\n                },\n                onReady: () => dispatch(setRequestingAction()),\n            });\n        } catch {\n            dispatch(setRequestingAction());\n        }\n    },\n\n    addCardCharge: (data: {\n        amount: number;\n        token: string;\n        expirationDate: string;\n        cvv2: string;\n        cardType: string;\n        maskedCardNum: string;\n        cardHolderName: string;\n        zipCode: string;\n    }): AppThunkAction<ApplicationAction> => async (dispatch, getState) => {\n        dispatch(setRequestingAction('add_charge'));\n        try {\n            await client.createCardCharge(\n                data.amount,\n                data.token,\n                data.expirationDate,\n                data.cvv2,\n                data.cardType,\n                data.cardHolderName,\n                data.zipCode,\n            );\n            notify(\n                <span>\n                    Successfully charged <strong>card ending in {data.maskedCardNum}</strong> for{' '}\n                    <strong>${data.amount / 100}</strong>.\n                </span>,\n            );\n        } catch (e) {\n            dispatch(setRequestingAction());\n            console.log(e);\n        } finally {\n            dispatch(setRequestingAction());\n        }\n    },\n\n    generateTsepManifest: (): AppThunkAction<ApplicationAction> => async (dispatch, getState) => {\n        try {\n            const data = await client.generateTsepManifest();\n            return data;\n        } catch (e) {\n            console.log(e);\n        }\n    },\n\n    addTip: ({ tipAmount = 300 }: { tipAmount?: number } = {}): AppThunkAction<ApplicationAction> => async (\n        dispatch,\n        getState,\n    ) => {\n        const apiHost = getState().configuration.config.apiHost;\n        const publishableKey = getState().configuration.aggregator?.publishableKey || '';\n        const customerId = getState().customer.id || undefined;\n\n        dispatch(setRequestingAction('add_tip'));\n        try {\n            const customer = await client.getCustomerToken(customerId);\n            dispatch({ type: 'SET_CUSTOMER_ID', payload: customer.id });\n            dispatch(setCustomerTokenAction(customer.token));\n            const paymentSource = await client.createSandboxPaymentSource(customer.id);\n            dispatch(setPaymentSourceAction(paymentSource));\n            const charge = await client.createCharge(customer.id, paymentSource.id);\n            dispatch(setChargeAction(charge));\n\n            const strongholdPay = Stronghold.Pay({\n                host: apiHost,\n                environment: Stronghold.ENVIRONMENT.sandbox,\n                publishableKey: publishableKey,\n            });\n            strongholdPay.tip(customer.token, {\n                tip: {\n                    amount: tipAmount,\n                    paymentSourceId: paymentSource.id,\n                    chargeId: charge.id,\n                    beneficiaryName: 'John',\n                },\n                onSuccess: (tip) => {\n                    notify(\n                        <span>\n                            <p>\n                                Tip with id <strong>${tip.id}</strong> created.\n                            </p>\n                            <div>\n                                For the original charge <strong>${charge.id}</strong>{' '}\n                            </div>\n                        </span>,\n                    );\n                },\n                onReady: () => dispatch(setRequestingAction()),\n            });\n        } catch {\n            dispatch(setRequestingAction());\n        }\n    },\n};\n\n// ----------------\n// REDUCER - For a given state and action, returns the new state. To support time travel, this must not mutate the old state.\n\nconst unloadedState: TransactionState = {\n    charge: null,\n};\n\nexport const reducer: Reducer<TransactionState, KnownAction> = (\n    state: TransactionState = unloadedState,\n    action: KnownAction,\n): TransactionState => {\n    switch (action.type) {\n        case 'SET_CHARGE':\n            return {\n                ...state,\n                charge: action.payload,\n            };\n        default:\n            return state;\n    }\n};\n","// -----------------\n// STATE - This defines the type of data maintained in the Redux store.\n\nimport { Reducer } from 'redux';\nimport { ApplicationAction, AppThunkAction } from './index';\nimport { setRequestingAction } from './request';\nimport client from '../client';\nimport { history } from '../index';\nimport url from 'url';\nimport * as querystring from 'querystring';\n\ntype PayLinkType = 'checkout' | 'bank_link' | 'tipping';\n\nexport interface PayLinkConfiguration {\n    type: PayLinkType;\n    withCallbacks: boolean | null;\n    treez: boolean | null;\n    tipBeneficiaryName: string | null;\n    tipDetailsDisplayMessage: string | null;\n}\n\nexport interface PayLinkState {\n    configuration: PayLinkConfiguration;\n}\n\n// -----------------\n// ACTIONS - These are serializable (hence replayable) descriptions of state transitions.\n// They do not themselves have any side-effects; they just describe something that is going to happen.\n// Use @typeName and isActionType for type detection that works even after serialization/deserialization.\n\nexport interface SetPayLinkConfigurationAction {\n    type: 'SET_PAY_LINK_CONFIGURATION';\n    payload: PayLinkConfiguration;\n}\nexport const setPayLinkConfiguration = (payload: querystring.ParsedUrlQuery = {}): SetPayLinkConfigurationAction => {\n    return {\n        type: 'SET_PAY_LINK_CONFIGURATION',\n        payload: {\n            tipBeneficiaryName:\n                typeof payload.tipBeneficiaryName === 'string' ? payload.tipBeneficiaryName || null : null,\n            tipDetailsDisplayMessage:\n                typeof payload.tipDetailsDisplayMessage === 'string' ? payload.tipDetailsDisplayMessage || null : null,\n            treez: payload.treez === 'true',\n            type: (payload.type as PayLinkType) || 'checkout',\n            withCallbacks: payload.withCallbacks === 'false' ? false : true,\n        },\n    };\n};\n\n// Declare a 'discriminated union' type. This guarantees that all references to 'type' properties contain one of the\n// declared type strings (and not any other arbitrary string).\nexport type KnownAction = SetPayLinkConfigurationAction;\n\n// ----------------\n// ACTION CREATORS - These are functions exposed to UI components that will trigger a state transition.\n// They don't directly mutate state, but they can have external side-effects (such as loading data).\n\nexport const actionCreators = {\n    tryPayLink: (): AppThunkAction<KnownAction> => async (dispatch, getState) => {\n        const search = querystring.parse(url.parse(document.location.href).query || '');\n        dispatch(setPayLinkConfiguration(search));\n\n        try {\n            const payLink = await client.createPayLink(getState().payLink.configuration);\n            window.location.href = payLink.url;\n        } catch (e) {\n            history.push('/paylink');\n            throw e;\n        }\n    },\n\n    createPayLink: (configuration: Partial<PayLinkConfiguration> = {}): AppThunkAction<ApplicationAction> => async (\n        dispatch,\n        getState,\n    ) => {\n        const merged = {\n            ...getState().payLink.configuration,\n            ...configuration,\n        };\n        dispatch(setRequestingAction('create_pay_link'));\n        try {\n            const payLink = await client.createPayLink(merged);\n            window.open(payLink.url, '_blank');\n        } finally {\n            dispatch(setRequestingAction());\n        }\n    },\n};\n\n// ----------------\n// REDUCER - For a given state and action, returns the new state. To support time travel, this must not mutate the old state.\n\nconst unloadedState: PayLinkState = {\n    configuration: {\n        type: 'checkout',\n        tipBeneficiaryName: null,\n        withCallbacks: null,\n        treez: null,\n        tipDetailsDisplayMessage: null,\n    },\n};\n\nexport const reducer: Reducer<PayLinkState, KnownAction> = (\n    state: PayLinkState = unloadedState,\n    action: KnownAction,\n): PayLinkState => {\n    switch (action.type) {\n        case 'SET_PAY_LINK_CONFIGURATION':\n            console.log(action.payload);\n            return {\n                ...state,\n                configuration: action.payload,\n            };\n        default:\n            return state;\n    }\n};\n","// -----------------\n// STATE - This defines the type of data maintained in the Redux store.\n\nimport { Reducer } from 'redux';\nimport { ApplicationAction, AppThunkAction } from './index';\nimport { setRequestingAction } from './request';\n\nexport interface CardSourceConfiguration {\n    cardHolderName: string | null;\n    tsepToken: string | null;\n    expirationDate: string | null;\n    cvv2: string | null;\n    cardType: string | null;\n    maskedCardNumber: string | null;\n    zipCode: string | null;\n}\n\nexport interface CardSourceState {\n    configuration: CardSourceConfiguration;\n}\n\n// -----------------\n// ACTIONS - These are serializable (hence replayable) descriptions of state transitions.\n// They do not themselves have any side-effects; they just describe something that is going to happen.\n// Use @typeName and isActionType for type detection that works even after serialization/deserialization.\n\nexport interface SetCardSourceConfigurationAction {\n    type: 'SET_CARD_SOURCE_CONFIGURATION';\n    payload: CardSourceConfiguration;\n}\nexport const setCardSourceConfiguration = (data: CardSourceConfiguration): SetCardSourceConfigurationAction => {\n    return {\n        type: 'SET_CARD_SOURCE_CONFIGURATION',\n        payload: data,\n    };\n};\n\n// Declare a 'discriminated union' type. This guarantees that all references to 'type' properties contain one of the\n// declared type strings (and not any other arbitrary string).\nexport type KnownAction = SetCardSourceConfigurationAction;\n\n// ----------------\n// ACTION CREATORS - These are functions exposed to UI components that will trigger a state transition.\n// They don't directly mutate state, but they can have external side-effects (such as loading data).\n\nexport const actionCreators = {\n    setCardSourceConfiguration: (data: CardSourceConfiguration): AppThunkAction<ApplicationAction> => async (\n        dispatch,\n        getState,\n    ) => {\n        dispatch(setRequestingAction('add_card_source'));\n        dispatch(setCardSourceConfiguration(data));\n    },\n};\n\n// ----------------\n// REDUCER - For a given state and action, returns the new state. To support time travel, this must not mutate the old state.\n\nconst unloadedState: CardSourceState = {\n    configuration: {\n        cardHolderName: '',\n        tsepToken: '',\n        expirationDate: '',\n        cvv2: '',\n        cardType: '',\n        maskedCardNumber: '',\n        zipCode: '',\n    },\n};\n\nexport const reducer: Reducer<CardSourceState, KnownAction> = (\n    state: CardSourceState = unloadedState,\n    action: KnownAction,\n): CardSourceState => {\n    switch (action.type) {\n        case 'SET_CARD_SOURCE_CONFIGURATION':\n            const expirationDate = action.payload.expirationDate!.replace('/', '');\n            const cvv2 = action.payload.cvv2!.trim();\n            return {\n                ...state,\n                configuration: { ...action.payload, expirationDate, cvv2 },\n            };\n        default:\n            return state;\n    }\n};\n","import * as configuration from './configuration';\nimport * as customer from './customer';\nimport * as request from './request';\nimport * as paymentSource from './paymentSource';\nimport * as transaction from './transaction';\nimport * as payLink from './payLink';\nimport * as cardSource from './cardSource';\n\n// The top-level state object\nexport interface ApplicationState {\n    configuration: configuration.ConfigurationState;\n    customer: customer.CustomerState;\n    request: request.RequestState;\n    paymentSource: paymentSource.PaymentSourceState;\n    transaction: transaction.TransactionState;\n    payLink: payLink.PayLinkState;\n    cardSource: cardSource.CardSourceState;\n}\n\n// Whenever an action is dispatched, Redux will update each top-level application state property using\n// the reducer with the matching name. It's important that the names match exactly, and that the reducer\n// acts on the corresponding ApplicationState property type.\nexport const reducers = {\n    configuration: configuration.reducer,\n    customer: customer.reducer,\n    request: request.reducer,\n    paymentSource: paymentSource.reducer,\n    transaction: transaction.reducer,\n    payLink: payLink.reducer,\n    cardSource: cardSource.reducer,\n};\n\n// This type can be used as a hint on action creators so that its 'dispatch' and 'getState' params are\n// correctly typed to match your store.\nexport interface AppThunkAction<TAction> {\n    (dispatch: (action: TAction) => void, getState: () => ApplicationState): void;\n}\n\nexport const actionCreators = {\n    configuration: configuration.actionCreators,\n    customer: customer.actionCreators,\n    request: request.actionCreators,\n    paymentSource: paymentSource.actionCreators,\n    transaction: transaction.actionCreators,\n    payLink: payLink.actionCreators,\n    cardSource: cardSource.actionCreators,\n};\n\nexport type ApplicationAction =\n    | configuration.KnownAction\n    | customer.KnownAction\n    | request.KnownAction\n    | paymentSource.KnownAction\n    | transaction.KnownAction\n    | payLink.KnownAction\n    | cardSource.KnownAction;\n","import 'react';\nimport React from 'react';\nimport { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';\nimport { Link } from 'react-router-dom';\n\nexport default class NavMenu extends React.PureComponent<{}, { isOpen: boolean }> {\n    state = {\n        isOpen: false,\n    };\n\n    render() {\n        return (\n            <header>\n                <Navbar className=\"navbar-expand-sm navbar-toggleable-sm bg-white\" light>\n                    <Container>\n                        <NavbarBrand tag={Link} to=\"/\" className=\"pl-0\">\n                            <img\n                                src=\"/images/Stronghold_Support_Logo.png\"\n                                className=\"my-2\"\n                                alt=\"Stronghold Logo\"\n                                style={{ height: 40 }}\n                            />\n                        </NavbarBrand>\n                        <NavbarToggler onClick={this.toggle} className=\"mr-2\" />\n                        <Collapse className=\"d-sm-inline-flex\" isOpen={this.state.isOpen} navbar>\n                            <ul className=\"navbar-nav mr-auto\"></ul>\n                            <ul className=\"navbar-nav\">\n                                <NavItem>\n                                    <NavLink tag={Link} className=\"text-dark\" to=\"/sdk\">\n                                        SDK\n                                    </NavLink>\n                                </NavItem>\n                                <NavItem>\n                                    <NavLink tag={Link} className=\"text-dark\" to=\"/paylink\">\n                                        PayLink\n                                    </NavLink>\n                                </NavItem>\n                                <NavItem>\n                                    <NavLink tag={Link} className=\"text-dark\" to=\"/use-cases\">\n                                        Use Case\n                                    </NavLink>\n                                </NavItem>\n                                <NavItem>\n                                    <a\n                                        className=\"nav-link text-dark\"\n                                        href=\"https://docs.strongholdpay.com/\"\n                                        target=\"_blank\"\n                                        rel=\"noopener noreferrer\"\n                                    >\n                                        API Docs\n                                    </a>\n                                </NavItem>\n                            </ul>\n                        </Collapse>\n                    </Container>\n                </Navbar>\n            </header>\n        );\n    }\n\n    private toggle = () => {\n        this.setState({\n            isOpen: !this.state.isOpen,\n        });\n    };\n}\n","import React from 'react';\n\nexport default function ReferenceLink(\n    props: React.PropsWithChildren<{\n        className?: string;\n        to: 'api_docs' | 'marketing' | 'dashboard';\n        route?: string;\n    }>,\n) {\n    let href = 'https://docs.strongholdpay.com';\n    let children: React.ReactNode | string = 'API Docs';\n\n    switch (props.to) {\n        case 'dashboard':\n            href = 'https://dashboard.strongholdpay.com';\n            children = 'Dashboard';\n            break;\n        case 'marketing':\n            href = 'https://stronghold.co';\n            children = 'Stronghold';\n            break;\n    }\n\n    children = props.children || children;\n    if (props.route) {\n        href = `${href}/${props.route}`;\n    }\n\n    return (\n        <a className={props.className} href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n            {children}\n        </a>\n    );\n}\n","import { connect } from 'react-redux';\nimport ReferenceLink from './ReferenceLink';\nimport React from 'react';\n\nconst Footer = () => (\n    <footer className=\"bg-dark text-white py-5\">\n        <div className=\"container\">\n            <div className=\"row mb-5\">\n                <div className=\"col\">\n                    <img\n                        src=\"/images/stronghold-logo-type-white.svg\"\n                        className=\"img-responsive\"\n                        alt=\"Stronghold Pay\"\n                        style={{ height: 40 }}\n                    />\n                </div>\n                <div className=\"col text-right d-flex flex-column align-items-end justify-content-center\">\n                    <ReferenceLink className=\"my-1 text-white\" to={'marketing'} />\n                    <ReferenceLink className=\"my-1 text-white\" to={'api_docs'} />\n                </div>\n            </div>\n            <div className=\"text-left py-3\">© Stronghold 2017 - {new Date().getFullYear()}. All rights reserved.</div>\n        </div>\n    </footer>\n);\n\nexport default connect()(Footer);\n","import NavMenu from './NavMenu';\nimport React from 'react';\nimport Footer from './Footer';\nimport { Helmet } from 'react-helmet';\nimport { connect, MapStateToPropsParam } from 'react-redux';\nimport { actionCreators, ApplicationState } from '../store';\nimport { bindActionCreators, Dispatch } from 'redux';\n\ninterface StateProps {\n    tsepScriptPath: string;\n}\n\ninterface DispatchProps {\n    generateTsepManifest: typeof actionCreators.transaction.generateTsepManifest;\n}\n\ntype Props = StateProps & DispatchProps;\n\ninterface State {\n    tsepManifest: string;\n}\n\nclass Layout extends React.PureComponent<Props, State, { children?: React.ReactNode }> {\n    constructor(props: Props) {\n        super(props);\n        this.state = {\n            tsepManifest: '',\n        };\n    }\n\n    componentDidMount = async () => {\n        try {\n            const manifest = await this.props.generateTsepManifest();\n            const obj = JSON.parse(JSON.stringify(manifest));\n            this.setState({ tsepManifest: obj.generateTsepManifest });\n        } catch (e) {\n            console.log(e);\n        }\n    };\n\n    render() {\n        const { tsepScriptPath } = this.props;\n        return (\n            <div className=\"d-flex flex-column h-100\">\n                <Helmet>\n                    <script src={`${tsepScriptPath}${this.state.tsepManifest}`}></script>\n                    <script>function tsepHandler(eventType, event){}</script>\n                </Helmet>\n                <NavMenu />\n                <div className=\"flex-fill\">{this.props.children}</div>\n                <Footer />\n            </div>\n        );\n    }\n}\nconst mapStateToProps: MapStateToPropsParam<StateProps, {}, ApplicationState> = (state) => ({\n    tsepScriptPath: state.configuration.config.tsepScriptPath,\n});\n\nconst mapDispatchToProps = (dispatch: Dispatch) =>\n    bindActionCreators(\n        {\n            ...actionCreators.transaction,\n        },\n        dispatch,\n    );\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Layout);\n","import { connect } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport React from 'react';\n\nconst Home = () => (\n    <div>\n        <div className=\"jumbotron jumbotron-fluid bg-light\">\n            <div className=\"container\">\n                <div>\n                    <span className=\"display-2 text-primary mr-3\">Tutorials</span>\n                    <small className=\"display-4\">for Stronghold Pay</small>\n                </div>\n                <div className=\"lead my-4\">\n                    Quickly get a project started using our tutorials. Human friendly and straightforward.\n                </div>\n                <div>\n                    Here you can find demonstrations to help users quickly get into Stronghold Pay features. The JS\n                    library, Pay Links and demos are implemented to give you an idea on how to integrate our solution\n                    with your product.\n                </div>\n            </div>\n        </div>\n        <div className=\"container my-5 bg-white\">\n            <div className=\"row\">\n                <div className=\"col-md-4 text-center\">\n                    <div className=\"h-100 d-flex flex-column justify-content-between p-3 px-lg-4\">\n                        <div>\n                            <h4>Web SDK demos</h4>\n                            <p className=\"lead\">Integrating our Javascript library</p>\n                            <p>\n                                Providing functionality that allows you to add payment processing to your web\n                                Application.\n                            </p>\n                        </div>\n                        <div>\n                            <Link className=\"btn btn-primary\" href=\"\" role=\"button\" to=\"/sdk\">\n                                Learn more\n                            </Link>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"col-md-4 text-center\">\n                    <div className=\"h-100 d-flex flex-column justify-content-between p-3 px-lg-4\">\n                        <div>\n                            <h4>Pay Links</h4>\n                            <p className=\"lead\">Delegate user interactions to us</p>\n                            <p>Ideal when you don't want to spend time on the payment process.</p>\n                        </div>\n                        <div>\n                            <Link className=\"btn btn-primary\" role=\"button\" to=\"/paylink\">\n                                Learn more\n                            </Link>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"col-md-4 text-center\">\n                    <div className=\"h-100 d-flex flex-column justify-content-between p-3 px-lg-4\">\n                        <div>\n                            <h4>Use Cases</h4>\n                            <p className=\"lead\">A cart summary demonstration</p>\n                            <p>A simple checkout flow showing how to integrate our JS library.</p>\n                        </div>\n                        <div>\n                            <Link className=\"btn btn-primary\" role=\"button\" to=\"/use-cases\">\n                                Learn more\n                            </Link>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n);\n\nexport default connect()(Home);\n","import { snakeCase } from 'snake-case';\nimport { HashLink } from 'react-router-hash-link';\nimport React from 'react';\n\nexport interface TableOfContentsElement {\n    text: string;\n    anchor?: string;\n    size?: '1' | '2' | '3';\n}\n\nexport interface TableOfContentsProps {\n    elements: Array<TableOfContentsElement>;\n}\n\nexport const TableOfContents = (props: TableOfContentsProps) => (\n    <ul className=\"nav flex-column\">\n        {props.elements.map((el, key) => {\n            const classes = ['nav-link', 'text-dark'];\n\n            if (el.size === '2') {\n                classes.push('py-1');\n            } else if (el.size === '3') {\n                classes.push('py-1');\n            } else {\n                classes.push('h5 mb-0');\n            }\n\n            return (\n                <li key={key} className=\"nav-item\">\n                    <HashLink className={classes.join(' ')} to={`#${el.anchor || snakeCase(el.text)}`}>\n                        {el.text}\n                    </HashLink>\n                </li>\n            );\n        })}\n    </ul>\n);\n\nexport interface AnchorProps extends TableOfContentsElement {}\n\nexport const Anchor = (props: AnchorProps) => {\n    const className = ['mt-5 mb-4'].join(' ');\n    const id = props.anchor || snakeCase(props.text);\n\n    if (props.size === '2') {\n        return (\n            <h3 id={id} className={className}>\n                {props.text}\n            </h3>\n        );\n    } else if (props.size === '3') {\n        return (\n            <h4 id={id} className={className}>\n                {props.text}\n            </h4>\n        );\n    } else {\n        return (\n            <h2 id={id} className={className}>\n                {props.text}\n            </h2>\n        );\n    }\n};\n","import React from 'react';\n\nexport default function SideBySideLayout(props: React.PropsWithChildren<{}>) {\n    return (\n        <div className=\"container mt-3 mb-5\">\n            <div className=\"row\" style={{ height: '100%' }}>\n                {props.children}\n            </div>\n        </div>\n    );\n}\n","import React from 'react';\n\nexport default function LeftSide(props: React.PropsWithChildren<{}>) {\n    return (\n        <div className=\"col-md-4\">\n            <div className=\"sticky-top\">{props.children}</div>\n        </div>\n    );\n}\n","import React from 'react';\n\nexport default function RightSide(props: React.PropsWithChildren<{}>) {\n    return <div className=\"col-md-8\">{props.children}</div>;\n}\n","import React from 'react';\n\nexport class Snippet extends React.PureComponent<{ children: React.ReactNode }> {\n    render() {\n        return <pre className=\"my-5\">{this.props.children}</pre>;\n    }\n}\n\nexport class Code extends React.PureComponent<{\n    language?: 'language-js' | 'language-http' | 'language-json';\n    code: string;\n}> {\n    componentDidMount() {\n        (window as any).Prism.highlightAll();\n    }\n\n    render() {\n        return <code className={this.props.language || 'language-js'}>{this.props.code}</code>;\n    }\n}\n","import React from 'react';\nimport { Spinner } from 'reactstrap';\n\nexport default function Loader(props: { size?: string; color?: string; className?: string }) {\n    return <Spinner type=\"grow\" size={props.size || 'sm'} color={props.color || 'white'} className={props.className} />;\n}\n","import { connect, MapStateToPropsParam } from 'react-redux';\nimport React from 'react';\nimport { Link } from 'react-router-dom';\nimport AddPaymentSourceButton from '../components/sdk/AddPaymentSourceButton';\nimport AddChargeButton from '../components/sdk/AddChargeButton';\nimport { actionCreators, ApplicationState } from '../store';\nimport { bindActionCreators, Dispatch } from 'redux';\nimport AggregatorCredentialsAlert from '../components/AggregatorCredentialsAlert';\nimport { CardSourceConfiguration, setCardSourceConfiguration } from '../store/cardSource';\nimport { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';\nimport classnames from 'classnames';\nimport AddCardChargeButton from '../components/sdk/AddCardChargeButton';\n\ninterface StateProps {\n    paymentSourceId: string | null;\n    paymentSourceLabel: string | null;\n    chargeId: string | null;\n    showCardProcessing: string | null;\n    showTsepLogging: string | null;\n    cardHolderName: string | null;\n    tsepToken: string | null;\n    maskedCardNumber: string | null;\n    expirationDate: string | null;\n    cvv2: string | null;\n    cardType: string | null;\n    zipCode: string | null;\n}\n\ninterface DispatchProps {\n    setCardSourceConfiguration: typeof setCardSourceConfiguration;\n    addCardCharge: typeof actionCreators.transaction.addCardCharge;\n}\n\ntype Props = StateProps & DispatchProps;\n\ninterface State {\n    paid: boolean;\n    activeTab: number;\n    cardAuth: boolean;\n}\n\nenum TabName {\n    'PAY_BY_ACH' = 1,\n    'PAY_BY_CARD' = 2,\n}\n\nclass UseCases extends React.PureComponent<Props, State> {\n    constructor(props: Props) {\n        super(props);\n        this.state = {\n            paid: false,\n            activeTab: TabName.PAY_BY_ACH,\n            cardAuth: false,\n        };\n    }\n\n    componentDidMount() {\n        (window as any).tsepHandler = (eventType: any, event: any) => {\n            if (this.props.showTsepLogging === 'Y') {\n                console.log('Event Type: ' + eventType);\n                console.log('Event:');\n                console.log(event);\n            }\n            if (eventType === 'TokenEvent' && event.responseCode === 'A0000') {\n                const result = {\n                    cardHolderName: event.cardHolderName,\n                    tsepToken: event.tsepToken,\n                    expirationDate: event.expirationDate,\n                    cvv2: event.cvv2,\n                    cardType: event.cardType,\n                    maskedCardNumber: event.maskedCardNumber,\n                    zipCode: event.zipCode,\n                } as CardSourceConfiguration;\n                this.props.setCardSourceConfiguration(result);\n            }\n        };\n    }\n\n    componentDidUpdate(prev: Props) {\n        if (this.props.chargeId && this.props.chargeId !== prev.chargeId) {\n            this.setState({ paid: true });\n        }\n    }\n\n    setPaidTrue = () => {\n        this.setState({ paid: true });\n    };\n\n    render() {\n        const props = this.props;\n        return (\n            <div>\n                <div>\n                    <div className=\"jumbotron jumbotron-fluid mb-3 bg-light\">\n                        <div className=\"container\">\n                            <div className=\"display-3 mb-3\">Cart Summary</div>\n                            <div className=\"lead mb-3\">This is an example of a checkout page.</div>\n                            <div className=\"lead\">\n                                Here the customer reviews their order and the steps required to complete the payment.\n                            </div>\n                            <p>\n                                It showcases the different <strong>Stronghold Pay</strong> dropin features.\n                            </p>\n                            <Link className=\"btn btn-primary\" to=\"/\">\n                                Learn more\n                            </Link>\n                        </div>\n                    </div>\n                    <div className=\"container my-5\">\n                        <section id=\"checkout\" className=\"row\">\n                            <div className=\"col-md-8\">\n                                <div className=\"card\">\n                                    <div className=\"card-header\">Items</div>\n                                    <div className=\"card-body\">\n                                        <div className=\"media\">\n                                            <img\n                                                src=\"/images/leaf1.png\"\n                                                className=\"mr-3\"\n                                                alt=\"Item 1\"\n                                                width=\"72\"\n                                                height=\"72\"\n                                            />\n                                            <div className=\"media-body\">\n                                                <h5 className=\"mb-1\">Monstera Split Leaf</h5>\n                                                <div className=\"mb-1\">\"22\" stem to fit planters and vases.</div>\n                                                <div className=\"d-flex justify-content-between\">\n                                                    <small className=\"text-muted\">x 2</small>\n                                                    <strong className=\"\">$34.50</strong>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div className=\"media\">\n                                            <img\n                                                src=\"/images/leaf2.png\"\n                                                className=\"mr-3\"\n                                                alt=\"Item 1\"\n                                                width=\"72\"\n                                                height=\"72\"\n                                            />\n                                            <div className=\"media-body\">\n                                                <h5 className=\"mb-1\">Palm Leaf</h5>\n                                                <div className=\"mb-1\">\n                                                    \"36\" stem perfect for creating unique bouquets.\n                                                </div>\n                                                <div className=\"d-flex justify-content-between\">\n                                                    <small className=\"text-muted\">x 1</small>\n                                                    <strong className=\"\">$10.75</strong>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div className=\"card\">\n                                    <div className=\"card-header\">Payment Method</div>\n                                    <div className=\"card-body\">\n                                        {this.props.showCardProcessing === 'Y' ? (\n                                            <Nav tabs>\n                                                <NavItem>\n                                                    <NavLink\n                                                        className={classnames({\n                                                            active: this.state.activeTab === TabName.PAY_BY_ACH,\n                                                        })}\n                                                        onClick={() => {\n                                                            if (this.state.activeTab !== TabName.PAY_BY_ACH)\n                                                                this.setState({ activeTab: TabName.PAY_BY_ACH });\n                                                        }}\n                                                    >\n                                                        Pay by ACH\n                                                    </NavLink>\n                                                </NavItem>\n                                                <NavItem>\n                                                    <NavLink\n                                                        className={classnames({\n                                                            active: this.state.activeTab === TabName.PAY_BY_CARD,\n                                                        })}\n                                                        onClick={() => {\n                                                            if (this.state.activeTab !== TabName.PAY_BY_CARD)\n                                                                this.setState({ activeTab: TabName.PAY_BY_CARD });\n                                                        }}\n                                                    >\n                                                        Pay by Card\n                                                    </NavLink>\n                                                </NavItem>\n                                            </Nav>\n                                        ) : (\n                                            <></>\n                                        )}\n                                        {this.props.showCardProcessing === 'Y' ? (\n                                            <TabContent activeTab={this.state.activeTab}>\n                                                <TabPane tabId={TabName.PAY_BY_ACH}>\n                                                    <div className=\"card-body\">\n                                                        <div id=\"payment-source\">\n                                                            {props.paymentSourceLabel ? (\n                                                                <ul\n                                                                    id=\"payment-source-list\"\n                                                                    className=\"list-group mb-3\"\n                                                                >\n                                                                    <li className=\"list-group-item\">\n                                                                        <div className=\"form-check-inline\">\n                                                                            <input\n                                                                                id=\"payment_source_.34HYlangXkSgNHFJIhXHBth_option\"\n                                                                                className=\"form-check-input\"\n                                                                                type=\"radio\"\n                                                                                name=\"payment_source\"\n                                                                                value=\"1\"\n                                                                                checked\n                                                                            />\n                                                                            <label\n                                                                                className=\"form-check-label\"\n                                                                                htmlFor={props.paymentSourceLabel}\n                                                                            >\n                                                                                {props.paymentSourceLabel}\n                                                                            </label>\n                                                                        </div>\n                                                                    </li>\n                                                                </ul>\n                                                            ) : (\n                                                                <div id=\"payment-source-none\" className=\"mb-3\">\n                                                                    In order to complete a payment, you must securely\n                                                                    link a bank account.\n                                                                </div>\n                                                            )}\n                                                            <AggregatorCredentialsAlert />\n                                                            <div className=\"float-right\">\n                                                                <AddPaymentSourceButton\n                                                                    id=\"add-payment-source-button\"\n                                                                    data-sh=\"add-payment-source-button\"\n                                                                    disabled={this.state.paid}\n                                                                >\n                                                                    Link a Bank Account\n                                                                </AddPaymentSourceButton>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </TabPane>\n                                                <TabPane tabId={TabName.PAY_BY_CARD}>\n                                                    <div className=\"card-body\">\n                                                        <div id=\"payment-source\">\n                                                            {props.tsepToken && this.state.cardAuth ? (\n                                                                <ul\n                                                                    id=\"payment-source-list\"\n                                                                    className=\"list-group mb-3\"\n                                                                >\n                                                                    <li className=\"list-group-item\">\n                                                                        <div className=\"form-check-inline\">\n                                                                            <input\n                                                                                id=\"payment_source_.34HYlangXkSgNHFJIhXHBth_option\"\n                                                                                className=\"form-check-input\"\n                                                                                type=\"radio\"\n                                                                                name=\"payment_source\"\n                                                                                value=\"1\"\n                                                                                checked\n                                                                                readOnly\n                                                                            />\n                                                                            <label\n                                                                                className=\"form-check-label\"\n                                                                                htmlFor={props.tsepToken}\n                                                                            >\n                                                                                {`Card ending in ${props.maskedCardNumber}`}\n                                                                            </label>\n                                                                        </div>\n                                                                    </li>\n                                                                </ul>\n                                                            ) : (\n                                                                <div id=\"payment-source-none\" className=\"mb-3\">\n                                                                    In order to complete a payment by card, you must\n                                                                    input valid card details.\n                                                                </div>\n                                                            )}\n                                                            <p>Card Information</p>\n                                                            <div className=\"cardDetails\">\n                                                                <form method=\"POST\" id=\"payment-form\">\n                                                                    <div\n                                                                        className=\"tsep-cardHolderName\"\n                                                                        id=\"tsep-cardHolderNameDiv\"\n                                                                        data-validate-name=\"Y\"\n                                                                    ></div>\n                                                                    <div\n                                                                        className=\"tsep-cardNum\"\n                                                                        id=\"tsep-cardNumDiv\"\n                                                                        data-auto-formatting=\"Y\"\n                                                                        data-validate-cc=\"Y\"\n                                                                        data-detect-card-type=\"Y\"\n                                                                    ></div>\n                                                                    <div\n                                                                        className=\"tsep-datePicker\"\n                                                                        id=\"tsep-datepickerDiv\"\n                                                                        data-validate-expiry-date=\"Y\"\n                                                                    ></div>\n                                                                    <div\n                                                                        className=\"tsep-cvv2\"\n                                                                        id=\"tsep-cvv2Div\"\n                                                                        data-validate-cvv2=\"Y\"\n                                                                    ></div>\n                                                                    <div\n                                                                        className=\"tsep-zip\"\n                                                                        id=\"tsep-zipCodeDiv\"\n                                                                        data-validate-zipcode=\"Y\"\n                                                                    ></div>\n                                                                </form>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </TabPane>\n                                            </TabContent>\n                                        ) : (\n                                            <div id=\"payment-source\">\n                                                {props.paymentSourceLabel ? (\n                                                    <ul id=\"payment-source-list\" className=\"list-group mb-3\">\n                                                        <li className=\"list-group-item\">\n                                                            <div className=\"form-check-inline\">\n                                                                <input\n                                                                    id=\"payment_source_.34HYlangXkSgNHFJIhXHBth_option\"\n                                                                    className=\"form-check-input\"\n                                                                    type=\"radio\"\n                                                                    name=\"payment_source\"\n                                                                    value=\"1\"\n                                                                    checked\n                                                                />\n                                                                <label\n                                                                    className=\"form-check-label\"\n                                                                    htmlFor={props.paymentSourceLabel}\n                                                                >\n                                                                    {props.paymentSourceLabel}\n                                                                </label>\n                                                            </div>\n                                                        </li>\n                                                    </ul>\n                                                ) : (\n                                                    <div id=\"payment-source-none\" className=\"mb-3\">\n                                                        In order to complete a payment, you must securely link a bank\n                                                        account.\n                                                    </div>\n                                                )}\n                                                <AggregatorCredentialsAlert />\n                                                <div className=\"float-right\">\n                                                    <AddPaymentSourceButton\n                                                        id=\"add-payment-source-button\"\n                                                        data-sh=\"add-payment-source-button\"\n                                                        disabled={this.state.paid}\n                                                    >\n                                                        Link a Bank Account\n                                                    </AddPaymentSourceButton>\n                                                </div>\n                                            </div>\n                                        )}\n                                    </div>\n                                </div>\n                            </div>\n                            <div className=\"col-md-4\">\n                                <div className=\"card\">\n                                    <div className=\"card-body text-center\">\n                                        <img\n                                            className=\"d-block mx-auto mb-4\"\n                                            src=\"https://cdnpub.strongholdpay.com/merchant-brands/bestrong/logo.png\"\n                                            alt=\"\"\n                                            width=\"72\"\n                                            height=\"72\"\n                                        />\n                                        <div>845 Market Street</div>\n                                        <div>San Francisco, California 94105</div>\n                                        <div>United States</div>\n                                    </div>\n                                </div>\n\n                                <div className=\"card\">\n                                    <div className=\"card-body\">\n                                        <small className=\"d-flex justify-content-between text-muted\">\n                                            <div>Subtotal</div>\n                                            <div>$45.25</div>\n                                        </small>\n                                        <small className=\"d-flex justify-content-between text-muted\">\n                                            <div>Tax</div>\n                                            <div>$4.52</div>\n                                        </small>\n                                        <small className=\"d-flex justify-content-between text-muted\">\n                                            <div>Convenience Fee</div>\n                                            <div>$3.00</div>\n                                        </small>\n                                        <div className=\"d-flex justify-content-between align-items-center\">\n                                            <div className=\"h5 text-primary mb-0\">Total</div>\n                                            <div className=\"h3 text-primary font-weight-bolder mb-0\">$52.77</div>\n                                        </div>\n                                        <hr />\n                                        {this.props.showCardProcessing === 'Y' &&\n                                        this.state.activeTab === TabName.PAY_BY_CARD ? (\n                                            <AddCardChargeButton\n                                                id=\"demo-checkout-pay-button\"\n                                                dataSh=\"charge-button\"\n                                                className=\"btn-block btn-lg justify-content-center\"\n                                                disabled={this.state.paid}\n                                                amount={5277}\n                                                cardHolderName={this.props.cardHolderName!}\n                                                token={this.props.tsepToken!}\n                                                expirationDate={this.props.expirationDate!}\n                                                cvv2={this.props.cvv2!}\n                                                cardType={this.props.cardType!}\n                                                maskedCardNum={this.props.maskedCardNumber!}\n                                                zipCode={this.props.zipCode!}\n                                                onSubmit={() => this.setPaidTrue()}\n                                            >\n                                                {this.state.paid ? 'PAID' : 'Pay $52.77'}\n                                            </AddCardChargeButton>\n                                        ) : (\n                                            <AddChargeButton\n                                                id=\"demo-checkout-pay-button\"\n                                                dataSh=\"charge-button\"\n                                                className=\"btn-block btn-lg justify-content-center\"\n                                                paymentSourceId={props.paymentSourceId || undefined}\n                                                disabled={\n                                                    (!props.paymentSourceLabel &&\n                                                        (!this.props.tsepToken || !this.state.cardAuth)) ||\n                                                    this.state.paid\n                                                }\n                                                chargeAmount={5277}\n                                            >\n                                                {this.state.paid ? 'PAID' : 'Pay $52.77'}\n                                            </AddChargeButton>\n                                        )}\n                                        {this.props.showCardProcessing === 'Y' &&\n                                        this.state.activeTab === TabName.PAY_BY_CARD ? (\n                                            <div className=\"text-center mt-1\">\n                                                By clicking Pay above, you authorize <strong>be strong.</strong> to\n                                                electronically charge your card for <strong>$52.77</strong>.\n                                            </div>\n                                        ) : (\n                                            <div className=\"text-center mt-1\">\n                                                By clicking Pay above, you authorize <strong>be strong.</strong> to\n                                                electronically debit your{' '}\n                                                <strong data-sh=\"payment-source-label\">\n                                                    {props.paymentSourceLabel || 'Bank Account'}\n                                                </strong>{' '}\n                                                for <strong>$52.77</strong>.\n                                            </div>\n                                        )}\n                                    </div>\n                                </div>\n                            </div>\n                        </section>\n                    </div>\n                </div>\n            </div>\n        );\n    }\n}\nconst mapStateToProps: MapStateToPropsParam<StateProps, {}, ApplicationState> = (state) => ({\n    paymentSourceId: state.paymentSource.paymentSource?.id || null,\n    paymentSourceLabel: state.paymentSource.paymentSource?.label || null,\n    chargeId: state.transaction.charge?.id || null,\n    showCardProcessing: state.configuration.config.showCardProcessing,\n    showTsepLogging: state.configuration.config.showTsepLogging,\n    cardHolderName: state.cardSource.configuration.cardHolderName,\n    tsepToken: state.cardSource.configuration.tsepToken,\n    maskedCardNumber: state.cardSource.configuration.maskedCardNumber,\n    expirationDate: state.cardSource.configuration.expirationDate,\n    cvv2: state.cardSource.configuration.cvv2,\n    cardType: state.cardSource.configuration.cardType,\n    zipCode: state.cardSource.configuration.zipCode,\n});\n\nconst mapDispatchToProps = (dispatch: Dispatch) =>\n    bindActionCreators(\n        {\n            ...actionCreators.transaction,\n            setCardSourceConfiguration,\n        },\n        dispatch,\n    );\n\nexport default connect(mapStateToProps, mapDispatchToProps)(UseCases);\n","import React from 'react';\nimport { connect, MapStateToPropsParam } from 'react-redux';\nimport { Button } from 'reactstrap';\nimport { bindActionCreators, Dispatch } from 'redux';\nimport { ApplicationState, actionCreators } from '../../store';\nimport Loader from '../Loader';\n\ninterface StateProps {\n    requesting: boolean;\n    disabled: boolean;\n}\n\ninterface OwnProps {\n    id?: string;\n    className?: string;\n    children?: React.ReactNode;\n    disabled?: boolean;\n}\n\ninterface DispatchProps {\n    addPaymentSource: typeof actionCreators.paymentSource.addPaymentSource;\n}\n\ntype Props = StateProps & OwnProps & DispatchProps;\n\nclass AddPaymentSourceButton extends React.PureComponent<Props> {\n    onClick = async () => {\n        this.props.addPaymentSource();\n    };\n    render() {\n        return (\n            <Button\n                id={this.props.id}\n                color=\"primary\"\n                disabled={this.props.disabled}\n                data-sh=\"add-payment-source-button\"\n                className={['d-flex align-items-center', this.props.className || ''].join(' ')}\n                onClick={this.onClick}\n            >\n                <span>{this.props.children || 'Add Payment Source'}</span>\n                {this.props.requesting ? <Loader className=\"ml-2\" /> : null}\n            </Button>\n        );\n    }\n}\n\nconst mapStateToProps: MapStateToPropsParam<StateProps, OwnProps, ApplicationState> = (\n    state: ApplicationState,\n    ownProps: OwnProps,\n) => {\n    const apiHost = state.configuration.config.apiHost;\n    const publishableKey = state.configuration.aggregator?.publishableKey || null;\n    const requesting = state.request.requesting === 'add_payment_source';\n\n    return {\n        disabled: !apiHost || !publishableKey || requesting || ownProps.disabled === true,\n        requesting,\n    };\n};\n\nconst mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators(actionCreators.paymentSource, dispatch);\n\nexport default connect(mapStateToProps, mapDispatchToProps)(AddPaymentSourceButton);\n","import React from 'react';\nimport { connect, MapStateToPropsParam } from 'react-redux';\nimport { Button } from 'reactstrap';\nimport { bindActionCreators, Dispatch } from 'redux';\nimport { ApplicationState, actionCreators } from '../../store';\nimport Loader from '../Loader';\n\ninterface StateProps {\n    requesting: boolean;\n    disabled: boolean;\n}\n\ninterface OwnProps {\n    id?: string;\n    className?: string;\n    children?: React.ReactNode;\n}\n\ninterface DispatchProps {\n    updatePaymentSource: typeof actionCreators.paymentSource.updatePaymentSource;\n}\n\ntype Props = StateProps & OwnProps & DispatchProps;\n\nclass UpdatePaymentSourceButton extends React.PureComponent<Props> {\n    onClick = async () => {\n        this.props.updatePaymentSource();\n    };\n    render() {\n        return (\n            <Button\n                id={this.props.id}\n                color=\"primary\"\n                disabled={this.props.disabled}\n                data-sh=\"update-payment-source-button\"\n                className={['d-flex align-items-center', this.props.className || ''].join(' ')}\n                onClick={this.onClick}\n            >\n                <span>{this.props.children || 'Update Payment Source'}</span>\n                {this.props.requesting ? <Loader className=\"ml-2\" /> : null}\n            </Button>\n        );\n    }\n}\n\nconst mapStateToProps: MapStateToPropsParam<StateProps, OwnProps, ApplicationState> = (state: ApplicationState) => {\n    const apiHost = state.configuration.config.apiHost;\n    const publishableKey = state.configuration.aggregator?.publishableKey || null;\n    const paymentSource = state.paymentSource.paymentSource || null;\n    const requesting = state.request.requesting === 'update_payment_source';\n\n    return {\n        disabled: !apiHost || !publishableKey || !paymentSource || requesting,\n        requesting,\n    };\n};\n\nconst mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators(actionCreators.paymentSource, dispatch);\n\nexport default connect(mapStateToProps, mapDispatchToProps)(UpdatePaymentSourceButton);\n","import React from 'react';\nimport { connect, MapStateToPropsParam } from 'react-redux';\nimport { Button } from 'reactstrap';\nimport { bindActionCreators, Dispatch } from 'redux';\nimport { ApplicationState, actionCreators } from '../../store';\nimport Loader from '../Loader';\n\ninterface StateProps {\n    requesting: boolean;\n    disabled: boolean;\n}\n\ninterface OwnProps {\n    id?: string;\n    className?: string;\n    children?: React.ReactNode;\n    paymentSourceId?: string;\n    chargeAmount?: number;\n    tipAmount?: number;\n    disabled?: boolean;\n    dataSh?: string;\n}\n\ninterface DispatchProps {\n    addCharge: typeof actionCreators.transaction.addCharge;\n}\n\ntype Props = StateProps & OwnProps & DispatchProps;\n\nclass AddChargeButton extends React.PureComponent<Props> {\n    onClick = async () => {\n        this.props.addCharge({\n            chargeAmount: this.props.chargeAmount,\n            tipAmount: this.props.tipAmount,\n            paymentSourceId: this.props.paymentSourceId,\n        });\n    };\n    render() {\n        return (\n            <Button\n                id={this.props.id}\n                color=\"primary\"\n                disabled={this.props.disabled}\n                data-sh={this.props.dataSh || this.props.id || 'charge-button'}\n                className={['d-flex align-items-center', this.props.className || ''].join(' ')}\n                onClick={this.onClick}\n            >\n                <span>{this.props.children || 'Create a Charge'}</span>\n                {this.props.requesting ? <Loader className=\"ml-2\" /> : null}\n            </Button>\n        );\n    }\n}\n\nconst mapStateToProps: MapStateToPropsParam<StateProps, OwnProps, ApplicationState> = (\n    state: ApplicationState,\n    ownProps: OwnProps,\n) => {\n    const apiHost = state.configuration.config.apiHost;\n    const publishableKey = state.configuration.aggregator?.publishableKey || null;\n    const requesting = state.request.requesting === 'add_charge';\n\n    return {\n        disabled: !apiHost || !publishableKey || requesting || ownProps.disabled === true,\n        requesting,\n    };\n};\n\nconst mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators(actionCreators.transaction, dispatch);\n\nexport default connect(mapStateToProps, mapDispatchToProps)(AddChargeButton);\n","import React from 'react';\nimport { connect, MapStateToPropsParam } from 'react-redux';\nimport { Button } from 'reactstrap';\nimport { bindActionCreators, Dispatch } from 'redux';\nimport { ApplicationState, actionCreators } from '../../store';\nimport Loader from '../Loader';\n\ninterface StateProps {\n    requesting: boolean;\n    disabled: boolean;\n}\n\ninterface OwnProps {\n    id?: string;\n    className?: string;\n    children?: React.ReactNode;\n    tipAmount?: number;\n}\n\ninterface DispatchProps {\n    addTip: typeof actionCreators.transaction.addTip;\n}\n\ntype Props = StateProps & OwnProps & DispatchProps;\n\nclass AddTipButton extends React.PureComponent<Props> {\n    onClick = async () => {\n        this.props.addTip();\n    };\n    render() {\n        return (\n            <Button\n                id={this.props.id}\n                color=\"primary\"\n                disabled={this.props.disabled}\n                data-sh={this.props.id || 'charge-button'}\n                className={['d-flex align-items-center', this.props.className || ''].join(' ')}\n                onClick={this.onClick}\n            >\n                <span>{this.props.children || 'Create a Charge'}</span>\n                {this.props.requesting ? <Loader className=\"ml-2\" /> : null}\n            </Button>\n        );\n    }\n}\n\nconst mapStateToProps: MapStateToPropsParam<StateProps, OwnProps, ApplicationState> = (state: ApplicationState) => {\n    const apiHost = state.configuration.config.apiHost;\n    const publishableKey = state.configuration.aggregator?.publishableKey || null;\n    const requesting = state.request.requesting === 'add_tip';\n\n    return {\n        disabled: !apiHost || !publishableKey || requesting,\n        requesting,\n    };\n};\n\nconst mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators(actionCreators.transaction, dispatch);\n\nexport default connect(mapStateToProps, mapDispatchToProps)(AddTipButton);\n","import { connect, MapStateToPropsParam } from 'react-redux';\nimport React from 'react';\nimport { AggregatorName } from '../client';\nimport { ApplicationState } from '../store';\nimport { Alert } from 'reactstrap';\n\ninterface StateProps {\n    aggregator: AggregatorName;\n}\n\ntype Props = StateProps;\n\nconst AggregatorCredentialsAlert = (props: Props) => {\n    let username = 'user_good';\n    let password = 'pass_good';\n\n    if (props.aggregator === 'yodlee') {\n        username = 'YodTest.site16441.2';\n        password = 'site16441.2';\n    }\n\n    return (\n        <Alert color=\"info\">\n            <p>\n                You can test a successful <code>payment_source</code> link in the{' '}\n                <span className=\"font-weight-bold\">Sandbox</span> environment by logging into any banking institution\n                with these test credentials:\n            </p>\n            <div>\n                Username: <code>{username}</code>\n            </div>\n            <div>\n                Password: &nbsp;<code>{password}</code>\n            </div>\n        </Alert>\n    );\n};\n\nconst mapStateToProps: MapStateToPropsParam<StateProps, {}, ApplicationState> = (state: ApplicationState) => ({\n    aggregator: state.configuration.aggregator?.name || 'plaid',\n});\n\nexport default connect(mapStateToProps)(AggregatorCredentialsAlert);\n","import { connect, MapStateToPropsParam } from 'react-redux';\nimport { Anchor, TableOfContents, TableOfContentsElement } from '../components/TableOfContents';\nimport SideBySideLayout from '../components/SideBySideLayout';\nimport LeftSide from '../components/LeftSide';\nimport RightSide from '../components/RightSide';\nimport ReferenceLink from '../components/ReferenceLink';\nimport { Code, Snippet } from '../components/CodeSnippet';\nimport React from 'react';\nimport AddPaymentSourceButton from '../components/sdk/AddPaymentSourceButton';\nimport UpdatePaymentSourceButton from '../components/sdk/UpdatePaymentSourceButton';\nimport AddChargeButton from '../components/sdk/AddChargeButton';\nimport AddTipButton from '../components/sdk/AddTipButton';\nimport { ApplicationState } from '../store';\nimport AggregatorCredentialsAlert from '../components/AggregatorCredentialsAlert';\n\nconst elements: TableOfContentsElement[] = [\n    {\n        text: 'Introduction',\n    },\n    {\n        text: 'How it works?',\n    },\n    {\n        text: 'Customer Token Generation',\n        size: '2',\n    },\n    {\n        text: 'Methods',\n    },\n    {\n        text: 'Add Payment Source',\n        size: '2',\n    },\n    {\n        text: 'Update Payment Source',\n        size: '2',\n    },\n    {\n        text: 'Charge',\n        size: '2',\n    },\n    {\n        text: 'Tip',\n        size: '2',\n    },\n];\n\ninterface StateProps {\n    paymentSourceLabel: string | null;\n}\n\ninterface OwnProps {}\n\ninterface DispatchProps {}\n\ntype Props = StateProps & OwnProps & DispatchProps;\n\nclass SDK extends React.PureComponent<Props> {\n    render() {\n        let anchor = 0;\n        return (\n            <SideBySideLayout>\n                <LeftSide>\n                    <TableOfContents elements={elements} />\n                </LeftSide>\n                <RightSide>\n                    <div>\n                        <h1>\n                            SDK <small className=\"text-primary\">Examples</small>\n                        </h1>\n                        <p className=\"lead my-4\">Integration of our Javascript SDK</p>\n                        <p>\n                            Providing functionality that allows you to add payment processing to your web Application.\n                        </p>\n\n                        <Anchor {...elements[anchor++]} />\n                        <p>\n                            Every method call will result by opening a popup for a specifically targeted customer. Which\n                            allows us to be aware of the customer information when interacting with our service.\n                        </p>\n\n                        <Anchor {...elements[anchor++]} />\n                        <p>\n                            Our JS Library allows you instantiate a client using a <strong>publishable key</strong>.\n                            You'll be able to find your publishable key formatted as <code>pk_sandbox_...</code> on the{' '}\n                            <strong>Developers</strong> page of the <ReferenceLink to={'dashboard'} />.\n                        </p>\n                        <Snippet>\n                            <Code\n                                code={\n                                    'const client = Stronghold.Pay({\\n' +\n                                    \"   publishableKey: 'pk_sandbox_...',\\n\" +\n                                    \"   environment: 'sandbox' // Or live\\n\" +\n                                    '});'\n                                }\n                            />\n                        </Snippet>\n                        <p>\n                            Methods can then be called using a <strong>customer token</strong>. This token identifies\n                            the customer using our SDKs.\n                        </p>\n                        <p>\n                            You can find more information about setting up and using the JS SDK in our{' '}\n                            <ReferenceLink to={'api_docs'} route=\"stronghold-pay-js\" />.\n                        </p>\n\n                        <Anchor {...elements[anchor++]} />\n                        <p>\n                            A customer token is required in order to make requests to our JS library. This token has a\n                            30 minute life span and is customer specific.\n                        </p>\n                        <p>\n                            Please follow the{' '}\n                            <ReferenceLink to={'api_docs'} route=\"api-reference-v2/customers/createcustomertoken\" /> to\n                            discover how a customer token generated.\n                        </p>\n\n                        <Anchor {...elements[anchor++]} />\n                        <p>\n                            You can try all the methods available below. The data used behind the scenes for the\n                            examples is randomly generated and kept private.\n                        </p>\n\n                        <Anchor {...elements[anchor++]} />\n                        <p>\n                            The <code>addPaymentSource</code> method will take the customer through the addition of a\n                            new payment source.\n                        </p>\n                        <p>A payment source is needed later on in order to perform any kind of payment.</p>\n                        <Snippet>\n                            <Code\n                                code={\n                                    \"strongholdPay.addPaymentSource('eyJhbGciOiJIUzI1NiIsInR5cCI6I...', {\\n\" +\n                                    '   onSuccess: function (paymentSource) {\\n' +\n                                    '       // Newly created payment source\\n' +\n                                    '   },\\n' +\n                                    '});'\n                                }\n                            />\n                        </Snippet>\n                        <AggregatorCredentialsAlert />\n                        <AddPaymentSourceButton id=\"add-payment-source-button\">Try it</AddPaymentSourceButton>\n\n                        <Anchor {...elements[anchor++]} />\n                        <p>\n                            The <code>updatePaymentSource</code> method lets the customer update their credentials for\n                            an existing payment source.\n                        </p>\n                        <p>\n                            Payment sources need to be synchronized regularly as up-to-date data is required for\n                            creating a successful payment. It is possible that a customer needs to re-enter their\n                            credentials in order to reactivate the synchronization.\n                        </p>\n                        <Snippet>\n                            <Code\n                                code={\n                                    \"strongholdPay.updatePaymentSource('eyJhbGciOiJIUzI1NiIsInR5cCI6I...', {\\n\" +\n                                    \"   paymentSourceId: 'payment_source_...', // Existing payment source which needs to be updated\\n\" +\n                                    '   onSuccess: function () {\\n' +\n                                    '       // Payment has been updated\\n' +\n                                    '   },\\n' +\n                                    '});'\n                                }\n                            />\n                        </Snippet>\n\n                        <AggregatorCredentialsAlert />\n                        <div\n                            className=\"alert alert-warning\"\n                            data-sh=\"payment-source-required\"\n                            hidden={!!this.props.paymentSourceLabel}\n                        >\n                            In order to update a payment source's credentials, you need to add one first.\n                            <div className=\"mt-3\">\n                                <AddPaymentSourceButton id=\"add-payment-source-button-for-update\" />\n                            </div>\n                        </div>\n                        <div\n                            className=\"alert alert-primary\"\n                            data-sh=\"payment-source-configured\"\n                            hidden={!this.props.paymentSourceLabel}\n                        >\n                            Payment Source{' '}\n                            <strong data-sh=\"payment-source-label\">{this.props.paymentSourceLabel}</strong> will be\n                            used.\n                        </div>\n\n                        <UpdatePaymentSourceButton id=\"update-payment-source-button\">Try it</UpdatePaymentSourceButton>\n\n                        <Anchor {...elements[anchor++]} />\n                        <p>\n                            The method <code>charge</code> take a customer through payment authorization. A summary of\n                            the charge that will be created is shown to the customer.\n                        </p>\n                        <p>\n                            This action will create a charge for the customer using one of thier payment sources.\n                            Optionaly, it is possible to associate a tip to the charge.\n                        </p>\n                        <Snippet>\n                            <Code\n                                code={\n                                    \"strongholdPay.charge('eyJhbGciOiJIUzI1NiIsInR5cCI6I...', {\\n\" +\n                                    '    charge: {\\n' +\n                                    '       amount: 8950, // $89.50, total amount which includes the convenience fees\\n' +\n                                    \"       paymentSourceId: 'payment_source_...',\\n\" +\n                                    '    },\\n' +\n                                    '    authorizeOnly: false, // Set to true to not capture the charge immediately and create it as `authorized`.\\n' +\n                                    '    tip: { // Optional\\n' +\n                                    '       amount: 300 // $300,\\n' +\n                                    \"       beneficiaryName: 'John', // The budtender getting the tip\\n\" +\n                                    '    },\\n' +\n                                    '    onSuccess: function (charge) {\\n' +\n                                    '       // Newly created charge\\n' +\n                                    '    },\\n' +\n                                    '});'\n                                }\n                            />\n                        </Snippet>\n\n                        <div className=\"d-flex\">\n                            <AddChargeButton id=\"charge-button\" className=\"mr-3\">\n                                Try it\n                            </AddChargeButton>\n                            <AddChargeButton id=\"charge-button-with-tip\" tipAmount={300}>\n                                Try it with a tip!\n                            </AddChargeButton>\n                        </div>\n\n                        <Anchor {...elements[anchor++]} />\n                        <p>\n                            The <code>tip</code> method creates a tip using a specific call. It is very similar to the{' '}\n                            <code>charge</code> method.\n                        </p>\n                        <p>\n                            <strong>Tip creation requires a charge to be created first.</strong> This is because a tip\n                            must be assosicatied with a previous payment.\n                        </p>\n\n                        <Snippet>\n                            <Code\n                                code={\n                                    \"strongholdPay.tip('eyJhbGciOiJIUzI1NiIsInR5cCI6I...', {\\n\" +\n                                    '    tip: {\\n' +\n                                    '       amount: 300 // $300,\\n' +\n                                    \"       paymentSourceId: 'payment_source_...',\\n\" +\n                                    \"       chargeId: 'charge_...', // The original charge the tip is made for\\n\" +\n                                    \"       beneficiaryName: 'John', // The budtender getting the tip\\n\" +\n                                    '    },\\n' +\n                                    '    authorizeOnly: false, // Set to true to not capture the charge immediately and create it as `authorized`.\\n' +\n                                    '    onSuccess: function (charge) {\\n' +\n                                    '       // Newly created charge\\n' +\n                                    '    },\\n' +\n                                    '});'\n                                }\n                            />\n                        </Snippet>\n\n                        <AddTipButton id=\"tip-button\">Try it</AddTipButton>\n                    </div>\n                </RightSide>\n            </SideBySideLayout>\n        );\n    }\n}\n\nconst mapStateToProps: MapStateToPropsParam<StateProps, OwnProps, ApplicationState> = (state: ApplicationState) => {\n    return {\n        paymentSourceLabel: state.paymentSource.paymentSource?.label || null,\n    };\n};\n\nexport default connect(mapStateToProps)(SDK);\n","import React from 'react';\nimport { connect, MapStateToPropsParam } from 'react-redux';\nimport { Button, Spinner } from 'reactstrap';\nimport { bindActionCreators, Dispatch } from 'redux';\nimport { ApplicationState, actionCreators } from '../store';\nimport { PayLinkConfiguration } from '../store/payLink';\n\ninterface StateProps {\n    requesting: boolean;\n    disabled: boolean;\n}\n\ninterface OwnProps {\n    id?: string;\n    className?: string;\n    children?: React.ReactNode;\n    configuration?: Partial<PayLinkConfiguration>;\n}\n\ninterface DispatchProps {\n    createPayLink: typeof actionCreators.payLink.createPayLink;\n}\n\ntype Props = StateProps & OwnProps & DispatchProps;\n\nclass PayLinkButton extends React.PureComponent<Props> {\n    onClick = async () => {\n        this.props.createPayLink(this.props.configuration);\n    };\n\n    render() {\n        return (\n            <Button\n                id={this.props.id}\n                color=\"primary\"\n                disabled={this.props.disabled}\n                data-sh=\"add-payment-source-button\"\n                className={['d-flex align-items-center', this.props.className || ''].join(' ')}\n                onClick={this.onClick}\n            >\n                <span>{this.props.children || 'Try Pay Link'}</span>\n                {this.props.requesting ? <Spinner color=\"white\" className=\"ml-2\" size=\"sm\" /> : null}\n            </Button>\n        );\n    }\n}\n\nconst mapStateToProps: MapStateToPropsParam<StateProps, OwnProps, ApplicationState> = (state: ApplicationState) => ({\n    disabled: !!state.request.requesting,\n    requesting: state.request.requesting === 'create_pay_link',\n});\n\nconst mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators(actionCreators.payLink, dispatch);\n\nexport default connect(mapStateToProps, mapDispatchToProps)(PayLinkButton);\n","import { connect } from 'react-redux';\nimport React from 'react';\nimport SideBySideLayout from '../components/SideBySideLayout';\nimport LeftSide from '../components/LeftSide';\nimport { Anchor, TableOfContents, TableOfContentsElement } from '../components/TableOfContents';\nimport RightSide from '../components/RightSide';\nimport { Code, Snippet } from '../components/CodeSnippet';\nimport ReferenceLink from '../components/ReferenceLink';\nimport PayLinkButton from '../components/PayLinkButton';\nimport AggregatorCredentialsAlert from '../components/AggregatorCredentialsAlert';\n\nconst elements: TableOfContentsElement[] = [\n    {\n        text: 'Introduction',\n    },\n    {\n        text: 'How it works?',\n    },\n    {\n        text: 'Pay Links',\n    },\n    {\n        text: 'Checkout',\n        size: '2',\n    },\n    {\n        text: 'Bank Link',\n        size: '2',\n    },\n    {\n        text: 'Tipping',\n        size: '2',\n    },\n];\n\nconst PayLink = () => {\n    let anchor = 0;\n    return (\n        <SideBySideLayout>\n            <LeftSide>\n                <TableOfContents elements={elements} />\n            </LeftSide>\n            <RightSide>\n                <h1>\n                    Pay\n                    <span className=\"text-primary\">Link</span>\n                </h1>\n                <p className=\"lead my-4\">Delegate user interactions to us</p>\n                <p>Ideal when you don't want to spend time on the payment process.</p>\n\n                <Anchor {...elements[anchor++]} />\n                <p>\n                    A Pay Link is a link that will take the customer to a proper page in order to execute a specific\n                    action. Those actions can be the addition of a new payment method or a payment for example.\n                </p>\n                <p>\n                    When using a Pay Link, UI integration is not required. Your customers can initiate payments without\n                    needing to make changes to your original application.\n                </p>\n                <p>\n                    You can find in the <ReferenceLink to=\"api_docs\" route=\"api-reference-v2/paylinks/createpaylink\" />{' '}\n                    explanations how to call the Pay Link endpoints.\n                </p>\n\n                <Anchor {...elements[anchor++]} />\n                <p>\n                    We've built a specific web application to handle Pay Links. This application retrieves information\n                    about the Pay Link and guides the customer through the payment steps.\n                </p>\n                <p>\n                    A Pay Link is always generated for a specific customer. The response will provide a URL to redirect\n                    the customer to. When implementing within your applicaiton, you will only need to pull the\n                    information resulting from that redirection.\n                </p>\n                <AggregatorCredentialsAlert />\n\n                <Anchor {...elements[anchor++]} />\n                <p>\n                    All the different Pay Links can be created using the same endpoint. Each type requires different\n                    information for their creation.\n                </p>\n\n                <Anchor {...elements[anchor++]} />\n                <p>\n                    The <code>checkout</code> link will take the customer through a checkout flow. Details about the\n                    cart can be provided in order to personalize this page.\n                </p>\n                <Snippet>\n                    <Code\n                        language=\"language-js\"\n                        code={`// ===================================\n// Request`}\n                    />\n                    <Code\n                        language=\"language-http\"\n                        code={`\nPOST /v2/links HTTP/1.1\nHost: https://api.strongholdpay.com\nSH-SECRET-KEY: sk_sandbox_sEGTb5Q9B8Pz-I5ZZ9dTKOko\nContent-Type: application/json`}\n                    />\n                    <Code\n                        language=\"language-json\"\n                        code={`\n{\n    \"type\": \"checkout\",\n    \"customer_id\": \"customer_-dr2n7sN5hGAuLlA2dtuNhR8\",\n    \"order\": {\n        \"total_amount\": 5900,\n        \"tax_amount\": 400,\n        \"items\": [\n        {\n            \"name\": \"Item 1\",\n            \"description\": \"Description 1\",\n            \"quantity\": 2,\n            \"total_amount\": 4000,\n            \"image_url\": \"https://cdnpub.strongholdpay.com/merchant-brands/bestrong/logo.png\"\n        },\n        {\n            \"name\": \"Item 2\",\n            \"description\": \"Description 2\",\n            \"quantity\": 3,\n            \"total_amount\": 1500,\n            \"image_url\": \"https://cdnpub.strongholdpay.com/merchant-brands/bestrong/logo.png\"\n        }\n        ]\n    },\n    \"tip\": {\n        \"beneficiary_name\": \"Joe\"\n    },\n    \"callbacks\": {\n        \"success_url\": \"https://tutorials.strongholdpay.com/PayLink/success/\",\n        \"exit_url\": \"https://tutorials.strongholdpay.com/PayLink/exit/\"\n    }\n}\n`}\n                    />\n                    <Code\n                        language=\"language-json\"\n                        code={`\n// ===================================\n// Response\n{\n    \"response_id\": \"resp_r7bpBll7QZ1a7IxkmcfONhXv\",\n    \"time\": \"2020-09-29T13:13:25.832592Z\",\n    \"status_code\": 201,\n    \"result\": {\n        \"id\": \"O5DzVkud\",\n        \"type\": \"checkout\",\n        \"expires_at\": \"2020-09-30T13:13:25.016132Z\",\n        \"has_expired\": false,\n        \"created_at\": \"2020-09-29T13:13:25.016129Z\",\n        \"status\": \"created\",\n        \"url\": \"https://development-sandbox.strongholdpay.com/l/O5DzVkud\",\n        \"environment\": \"sandbox\",\n        \"customer\": {\n            \"id\": \"customer_-dr2n7sN5hGAuLlA2dtuNhR8\",\n            ...\n        },\n        \"order\": {\n            \"total_amount\": 5900,\n            \"tax_amount\": 400,\n            \"sub_amount\": 5500,\n            \"convenience_fee\": 0,\n            \"items\": [\n                {\n                    \"name\": \"Item 1\",\n                    \"quantity\": 2,\n                    \"total_amount\": 4000,\n                    \"price\": 2000,\n                    \"description\": \"Description 1\",\n                    \"image_url\": \"https://cdnpub.strongholdpay.com/merchant-brands/bestrong/logo.png\"\n                },\n                {\n                    \"name\": \"Item 2\",\n                    \"quantity\": 3,\n                    \"total_amount\": 1500,\n                    \"price\": 500,\n                    \"description\": \"Description 2\",\n                    \"image_url\": \"https://cdnpub.strongholdpay.com/merchant-brands/bestrong/logo.png\"\n                }\n            ],\n        },\n        \"tip\": {\n            \"beneficiary_name\": \"Joe\"\n        },\n        \"callbacks\": {\n            \"success_url\": \"https://tutorials.strongholdpay.com/PayLink/success/\",\n            \"exit_url\": \"https://tutorials.strongholdpay.com/PayLink/exit/\"\n        }\n    }\n}             \n`}\n                    />\n                </Snippet>\n\n                <PayLinkButton\n                    id=\"pay-link-try-checkout-button\"\n                    configuration={{\n                        type: 'checkout',\n                        tipBeneficiaryName: 'John',\n                    }}\n                >\n                    Try it\n                </PayLinkButton>\n\n                <Anchor {...elements[anchor++]} />\n                <p>\n                    The <code>bank_link</code> link allows a customer to add a new payment source. This can be used when\n                    creating a charge or a tip.\n                </p>\n                <Snippet>\n                    <Code\n                        language=\"language-js\"\n                        code={`// ===================================\n// Request`}\n                    />\n                    <Code\n                        language=\"language-http\"\n                        code={`\nPOST /v2/links HTTP/1.1\nHost: https://api.strongholdpay.com\nSH-SECRET-KEY: sk_sandbox_sEGTb5Q9B8Pz-I5ZZ9dTKOko\nContent-Type: application/json`}\n                    />\n                    <Code\n                        language=\"language-json\"\n                        code={`\n{\n    \"type\": \"bank_link\",\n    \"customer_id\": \"customer_h.KlK0X8xtXQ1xbmfyJyyahQ\",\n    \"callbacks\": {\n        \"success_url\": \"https://tutorials.strongholdpay.com/PayLink/success/\",\n        \"exit_url\": \"https://tutorials.strongholdpay.com/PayLink/exit/\"\n    }\n}\n`}\n                    />\n                    <Code\n                        language=\"language-js\"\n                        code={`\n// ===================================\n// Response`}\n                    />\n                    <Code\n                        language=\"language-json\"\n                        code={`\n{\n    \"response_id\": \"resp_8fr-S59dF9bj9SdMS9WvY0DX\",\n    \"time\": \"2020-06-22T14:51:54.821257Z\",\n    \"status_code\": 201,\n    \"result\": {\n        \"id\": \"WGge7VDl\",\n        \"type\": \"bank_link\",\n        \"expires_at\": \"2020-06-23T16:44:47.192577+02:00\",\n        \"has_expired\": false,\n        \"created_at\": \"2020-06-22T16:44:47.174707+02:00\",\n        \"status\": \"created\",\n        \"url\": \"https://strongholdpay.com/l/WGge7VDl\",\n        \"environment\": \"sandbox\",\n        \"customer\": {\n            \"id\": \"customer_h.KlK0X8xtXQ1xbmfyJyyahQ\",\n            ...\n        },\n        \"callbacks\": {\n            \"success_url\": \"https://tutorials.strongholdpay.com/PayLink/success/\",\n            \"exit_url\": \"https://tutorials.strongholdpay.com/PayLink/exit/\"\n        }\n    }\n}\n`}\n                    />\n                </Snippet>\n\n                <PayLinkButton\n                    id=\"pay-link-try-bank-link-button\"\n                    configuration={{\n                        type: 'bank_link',\n                    }}\n                >\n                    Try it\n                </PayLinkButton>\n\n                <Anchor {...elements[anchor++]} />\n                <p>\n                    The <code>tipping</code> link allows a customer to add a <strong>tip</strong> on top of a charge\n                    previously authorized.\n                </p>\n\n                <Snippet>\n                    <Code\n                        language=\"language-js\"\n                        code={`// ===================================\n// Request`}\n                    />\n                    <Code\n                        language=\"language-http\"\n                        code={`\nPOST /v2/links HTTP/1.1\nHost: https://api.strongholdpay.com\nSH-SECRET-KEY: sk_sandbox_sEGTb5Q9B8Pz-I5ZZ9dTKOko\nContent-Type: application/json`}\n                    />\n                    <Code\n                        language=\"language-json\"\n                        code={`\n{\n    \"type\": \"tipping\",\n    \"customer_id\": \"customer_h.KlK0X8xtXQ1xbmfyJyyahQ\",\n    \"charge_id\": \"charge_JbN2.-uFKjLexI0UYeNY6mWX\",\n    \"tip\": {\n        \"beneficiary_name\": \"Joe\",\n    },\n    \"callbacks\": {\n        \"success_url\": \"https://tutorials.strongholdpay.com/PayLink/success/\",\n        \"exit_url\": \"https://tutorials.strongholdpay.com/PayLink/exit/\"\n    }\n}\n`}\n                    />\n                    <Code\n                        language=\"language-js\"\n                        code={`\n// ===================================\n// Response`}\n                    />\n                    <Code\n                        language=\"language-json\"\n                        code={`\n{\n    \"response_id\": \"resp_8fr-S59dF9bj9SdMS9WvY0DX\",\n    \"time\": \"2020-06-22T14:51:54.821257Z\",\n    \"status_code\": 201,\n    \"result\": {\n        \"id\": \"WGge7VDl\",\n        \"type\": \"tipping\",\n        \"expires_at\": \"2020-06-23T16:44:47.192577+02:00\",\n        \"has_expired\": false,\n        \"created_at\": \"2020-06-22T16:44:47.174707+02:00\",\n        \"status\": \"created\",\n        \"url\": \"https://strongholdpay.com/l/WGge7VDl\",\n        \"environment\": \"sandbox\",\n        \"customer\": {\n            \"id\": \"customer_h.KlK0X8xtXQ1xbmfyJyyahQ\",\n            ...\n        },\n        \"tip\": {\n            \"beneficiary_name\": \"Joe\"\n        },\n        \"charge\": {\n            \"id\": \"charge_JbN2.-uFKjLexI0UYeNY6mWX\",\n            ...\n        },\n        \"callbacks\": {\n            \"success_url\": \"https://tutorials.strongholdpay.com/PayLink/success/\",\n            \"exit_url\": \"https://tutorials.strongholdpay.com/PayLink/exit/\"\n        }\n    }\n}`}\n                    />\n                </Snippet>\n\n                <PayLinkButton\n                    id=\"pay-link-try-tipping-button\"\n                    configuration={{\n                        type: 'tipping',\n                    }}\n                >\n                    Try it\n                </PayLinkButton>\n            </RightSide>\n        </SideBySideLayout>\n    );\n};\n\nexport default connect()(PayLink);\n","import { Link, RouteComponentProps, withRouter } from 'react-router-dom';\nimport React from 'react';\nimport url from 'url';\nimport querystring from 'querystring';\n\nconst PayLinkCallback = (props: RouteComponentProps) => {\n    const search = querystring.parse(url.parse(document.location.href).query || '') as {\n        pay_link_callback: 'success' | 'exit';\n        pay_link_id: string;\n        pay_link_type: string;\n        payment_source_id?: string;\n        charge_id?: string;\n        tip_id?: string;\n        custom_key?: string;\n    };\n\n    return (\n        <div className=\"h-100 bg-light py-3\">\n            <div className=\"container\">\n                <div className=\"card mw-md mx-auto\">\n                    <div className=\"card-body p-md-5\">\n                        <div className=\"h1\" data-sh=\"title\">\n                            PayLink {search.pay_link_callback === 'success' ? 'Succeeded' : 'Exited'}\n                        </div>\n                        <p>\n                            The <code>{search.pay_link_callback}</code> callback url of the PayLink with the code{' '}\n                            <strong>{search.pay_link_id}</strong> has been called.\n                        </p>\n                        <p>Here is some complementary information about it.</p>\n                        <table className=\"table mb-3\">\n                            <tbody>\n                                <tr>\n                                    <td>Id</td>\n                                    <td data-sh=\"pay-link-id\" className=\"font-weight-bold text-right\">\n                                        {search.pay_link_id}\n                                    </td>\n                                </tr>\n                                <tr>\n                                    <td>Type</td>\n                                    <td data-sh=\"pay-link-type\" className=\"font-weight-bold text-right\">\n                                        {search.pay_link_type}\n                                    </td>\n                                </tr>\n                                <tr>\n                                    <td>Output</td>\n                                    <td data-sh=\"pay-link-callback\" className=\"font-weight-bold text-right\">\n                                        {search.pay_link_callback}\n                                    </td>\n                                </tr>\n                                {search.payment_source_id ? (\n                                    <tr>\n                                        <td>Payment Source</td>\n                                        <td data-sh=\"payment-source-id\" className=\"text-right\">\n                                            <code>{search.payment_source_id}</code>\n                                        </td>\n                                    </tr>\n                                ) : null}\n                                {search.charge_id ? (\n                                    <tr>\n                                        <td>Charge</td>\n                                        <td data-sh=\"charge-id\" className=\"text-right\">\n                                            <code>{search.charge_id}</code>\n                                        </td>\n                                    </tr>\n                                ) : null}\n                                {search.tip_id ? (\n                                    <tr>\n                                        <td>Tip</td>\n                                        <td data-sh=\"tip-id\" className=\"text-right\">\n                                            <code>{search.tip_id}</code>\n                                        </td>\n                                    </tr>\n                                ) : null}\n                                {search.custom_key ? (\n                                    <tr>\n                                        <td>\n                                            <div>Custom Key</div>\n                                            <small className=\"text-muted\">\n                                                You can add you own query parameters. They will be prefixed with{' '}\n                                                <code>custom_</code> in the callback query parameters.\n                                            </small>\n                                        </td>\n                                        <td data-sh=\"pay-link-custom\" className=\"font-weight-bold text-right\">\n                                            My Custom Value\n                                        </td>\n                                    </tr>\n                                ) : null}\n                            </tbody>\n                        </table>\n                        <div className=\"text-right\">\n                            <Link className=\"btn btn-primary\" to=\"/payLink\">\n                                Return to the PayLink Page\n                            </Link>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default withRouter(PayLinkCallback);\n","import { connect, MapStateToPropsParam } from 'react-redux';\nimport React from 'react';\nimport { ApplicationState, actionCreators } from '../store';\nimport { bindActionCreators, Dispatch } from 'redux';\nimport Loader from '../components/Loader';\n\ninterface StateProps {}\n\ninterface DispatchProps {\n    tryPayLink: typeof actionCreators.payLink.tryPayLink;\n}\n\ntype Props = StateProps & DispatchProps;\n\nclass PayLinkTryIt extends React.PureComponent<Props> {\n    componentDidMount() {\n        this.props.tryPayLink();\n    }\n\n    render() {\n        return (\n            <div className=\"text-center h-100 d-flex justify-content-center align-items-center\">\n                <Loader size=\"md\" color=\"primary\" />\n            </div>\n        );\n    }\n}\nconst mapStateToProps: MapStateToPropsParam<StateProps, {}, ApplicationState> = (state) => ({});\n\nconst mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators(actionCreators.payLink, dispatch);\n\nexport default connect(mapStateToProps, mapDispatchToProps)(PayLinkTryIt);\n","import React from 'react';\nimport { connect, MapStateToPropsParam } from 'react-redux';\nimport { Button } from 'reactstrap';\nimport { bindActionCreators, Dispatch } from 'redux';\nimport { ApplicationState, actionCreators } from '../../store';\nimport Loader from '../Loader';\n\ninterface StateProps {\n    requesting: boolean;\n    disabled: boolean;\n}\n\ninterface OwnProps {\n    id?: string;\n    className?: string;\n    children?: React.ReactNode;\n    disabled?: boolean;\n    dataSh?: string;\n    amount: number;\n    cardHolderName: string;\n    token: string;\n    expirationDate: string;\n    cvv2: string;\n    cardType: string;\n    maskedCardNum: string;\n    zipCode: string;\n    onSubmit: () => void;\n}\n\ninterface State {\n    isReady: boolean;\n}\n\ninterface DispatchProps {\n    addCardCharge: typeof actionCreators.transaction.addCardCharge;\n}\n\ntype Props = StateProps & OwnProps & DispatchProps;\n\nclass AddCardChargeButton extends React.PureComponent<Props, State> {\n    constructor(props: Props) {\n        super(props);\n        this.state = {\n            isReady: false,\n        };\n    }\n\n    onClick = async () => {\n        this.setState({ isReady: true });\n    };\n\n    componentDidUpdate = async (prevProps: Readonly<Props>) => {\n        if (this.state.isReady && prevProps.token !== this.props.token && this.props.token !== '') {\n            try {\n                await this.props.addCardCharge({\n                    amount: this.props.amount,\n                    token: this.props.token,\n                    expirationDate: this.props.expirationDate,\n                    cvv2: this.props.cvv2,\n                    cardType: this.props.cardType,\n                    maskedCardNum: this.props.maskedCardNum,\n                    cardHolderName: this.props.cardHolderName,\n                    zipCode: this.props.zipCode,\n                });\n                this.props.onSubmit();\n            } catch {\n                // handles in toast\n            }\n            this.setState({ isReady: false });\n        }\n    };\n\n    render() {\n        return (\n            <Button\n                id={this.props.id}\n                color=\"primary\"\n                disabled={this.props.disabled || this.state.isReady}\n                data-sh={this.props.dataSh || this.props.id || 'charge-button'}\n                className={['d-flex align-items-center', this.props.className || ''].join(' ')}\n                onClick={this.onClick}\n            >\n                <span>{this.props.children || 'Create a Charge'}</span>\n                {this.props.requesting || this.state.isReady ? <Loader className=\"ml-2\" /> : null}\n            </Button>\n        );\n    }\n}\n\nconst mapStateToProps: MapStateToPropsParam<StateProps, OwnProps, ApplicationState> = (\n    state: ApplicationState,\n    ownProps: OwnProps,\n) => {\n    const requesting = state.request.requesting === 'add_charge';\n\n    return {\n        disabled: requesting || ownProps.disabled === true,\n        requesting,\n    };\n};\n\nconst mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators(actionCreators.transaction, dispatch);\n\nexport default connect(mapStateToProps, mapDispatchToProps)(AddCardChargeButton);\n","import React from 'react';\nimport { connect, MapStateToPropsParam } from 'react-redux';\nimport { bindActionCreators, Dispatch } from 'redux';\nimport { ApplicationState } from '../store';\nimport { actionCreators } from '../store';\nimport { Helmet } from 'react-helmet';\n\ninterface StateProps {\n    apiHost: string | null;\n}\n\ninterface DispatchProps {\n    fetchConfiguration: typeof actionCreators.configuration.fetchConfiguration;\n}\n\ntype Props = StateProps & DispatchProps;\n\nclass Configuration extends React.PureComponent<Props> {\n    async componentDidMount() {\n        this.props.fetchConfiguration();\n    }\n\n    render() {\n        if (this.props.apiHost) {\n            return (\n                <Helmet>\n                    <script src={`${this.props.apiHost}/v2/js`} type=\"text/javascript\" />\n                </Helmet>\n            );\n        }\n\n        return null;\n    }\n}\n\nconst mapStateToProps: MapStateToPropsParam<StateProps, {}, ApplicationState> = (state) => ({\n    apiHost: state.configuration.config.apiHost || null,\n});\n\nconst mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators(actionCreators.configuration, dispatch);\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Configuration);\n","import Layout from './components/Layout';\n\nimport React from 'react';\nimport { Redirect, Route, Switch } from 'react-router';\nimport Home from './pages/Home';\nimport SDK from './pages/SDK';\nimport PayLink from './pages/PayLink';\nimport PayLinkCallback from './pages/PayLinkCallback';\nimport PayLinkTryIt from './pages/PayLinkTryIt';\nimport UseCases from './pages/UseCases';\nimport Configuration from './components/Configuration';\nimport { ToastContainer } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\n\nexport default () => (\n    <Layout>\n        <Configuration />\n        <ToastContainer position=\"top-right\" hideProgressBar={true} style={{ width: 375 }} />\n        <Switch>\n            <Route path=\"/sdk\" component={SDK} />\n            <Route path=\"/paylink/callback\" component={PayLinkCallback} />\n            <Route path=\"/paylink/tryit\" component={PayLinkTryIt} />\n            <Route path=\"/paylink\" component={PayLink} />\n            <Route path=\"/use-cases\" component={UseCases} />\n            <Route exact path=\"/\" component={Home} />\n            <Redirect to={'/'} />\n        </Switch>\n    </Layout>\n);\n","// In production, we register a service worker to serve assets from local cache.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\n// cached resources are updated in the background.\n\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\n// This link also includes instructions on opting out of this behavior.\n\nconst isLocalhost = Boolean(\n    window.location.hostname === 'localhost' ||\n        // [::1] is the IPv6 localhost address.\n        window.location.hostname === '[::1]' ||\n        // 127.0.0.1/8 is considered localhost for IPv4.\n        window.location.hostname.match(/^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/),\n);\n\nexport default function register() {\n    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n        // The URL constructor is available in all browsers that support SW.\n        const url = process.env.PUBLIC_URL as string;\n        const publicUrl = new URL(url, window.location.toString());\n        if (publicUrl.origin !== window.location.origin) {\n            // Our service worker won't work if PUBLIC_URL is on a different origin\n            // from what our page is served on. This might happen if a CDN is used to\n            // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\n            return;\n        }\n\n        window.addEventListener('load', () => {\n            const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n            if (isLocalhost) {\n                // This is running on localhost. Lets check if a service worker still exists or not.\n                checkValidServiceWorker(swUrl);\n            } else {\n                // Is not local host. Just register service worker\n                registerValidSW(swUrl);\n            }\n        });\n    }\n}\n\nfunction registerValidSW(swUrl: string) {\n    navigator.serviceWorker\n        .register(swUrl)\n        .then((registration) => {\n            registration.onupdatefound = () => {\n                const installingWorker = registration.installing as ServiceWorker;\n                installingWorker.onstatechange = () => {\n                    if (installingWorker.state === 'installed') {\n                        if (navigator.serviceWorker.controller) {\n                            // At this point, the old content will have been purged and\n                            // the fresh content will have been added to the cache.\n                            // It's the perfect time to display a \"New content is\n                            // available; please refresh.\" message in your web app.\n                            console.log('New content is available; please refresh.');\n                        } else {\n                            // At this point, everything has been precached.\n                            // It's the perfect time to display a\n                            // \"Content is cached for offline use.\" message.\n                            console.log('Content is cached for offline use.');\n                        }\n                    }\n                };\n            };\n        })\n        .catch((error) => {\n            console.error('Error during service worker registration:', error);\n        });\n}\n\nfunction checkValidServiceWorker(swUrl: string) {\n    // Check if the service worker can be found. If it can't reload the page.\n    fetch(swUrl)\n        .then((response) => {\n            // Ensure service worker exists, and that we really are getting a JS file.\n            const contentType = response.headers.get('content-type');\n            if (response.status === 404 || (contentType && contentType.indexOf('javascript') === -1)) {\n                // No service worker found. Probably a different app. Reload the page.\n                navigator.serviceWorker.ready.then((registration) => {\n                    registration.unregister().then(() => {\n                        window.location.reload();\n                    });\n                });\n            } else {\n                // Service worker found. Proceed as normal.\n                registerValidSW(swUrl);\n            }\n        })\n        .catch(() => {\n            console.log('No internet connection found. App is running in offline mode.');\n        });\n}\n\nexport function unregister() {\n    if ('serviceWorker' in navigator) {\n        navigator.serviceWorker.ready.then((registration) => {\n            registration.unregister();\n        });\n    }\n}\n","import './styles/styles.scss';\n\nimport React from 'react';\nimport configureStore from './store/configureStore';\nimport App from './App';\nimport registerServiceWorker from './registerServiceWorker';\nimport ReactDOM from 'react-dom';\nimport { createBrowserHistory } from 'history';\nimport { Provider } from 'react-redux';\nimport { ConnectedRouter } from 'connected-react-router';\n\n// Create browser history to use in the Redux store\nconst baseUrl = document.getElementsByTagName('base')[0].getAttribute('href') as string;\nexport const history = createBrowserHistory({ basename: baseUrl });\n\n// Get the application-wide store instance, prepopulating with state from the server where available.\nconst store = configureStore(history);\n\nReactDOM.render(\n    <Provider store={store}>\n        <ConnectedRouter history={history}>\n            <App />\n        </ConnectedRouter>\n    </Provider>,\n    document.getElementById('root'),\n);\n\nregisterServiceWorker();\n","import { ApplicationState, reducers } from './';\nimport { History } from 'history';\nimport thunk from 'redux-thunk';\nimport { applyMiddleware, combineReducers, compose, createStore } from 'redux';\nimport { connectRouter, routerMiddleware } from 'connected-react-router';\n\nexport default function configureStore<T>(history: History<T>, initialState?: ApplicationState) {\n    const middleware = [thunk, routerMiddleware(history)];\n\n    const rootReducer = combineReducers({\n        ...reducers,\n        router: connectRouter(history),\n    });\n\n    const enhancers: any[] = [];\n    const windowIfDefined = typeof window === 'undefined' ? null : (window as any); // eslint-disable-line @typescript-eslint/no-explicit-any\n    if (windowIfDefined && windowIfDefined.__REDUX_DEVTOOLS_EXTENSION__) {\n        enhancers.push(windowIfDefined.__REDUX_DEVTOOLS_EXTENSION__());\n    }\n\n    return createStore(rootReducer, initialState, compose(applyMiddleware(...middleware), ...enhancers));\n}\n"],"sourceRoot":""}