\n
\n {list.map((item, index) => (\n
\n
\n
${item} ` }} />\n
\n ))}\n
\n
\n );\n};\n\nNumberedList.propTypes = {\n ecmContent: PropTypes.object.isRequired\n};\n\nexport default NumberedList;\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"NumberedList-module_container__Ht5ij\",\"steps\":\"NumberedList-module_steps___4UXQ\",\"steps_wrapper\":\"NumberedList-module_steps_wrapper__meuJR\",\"text\":\"NumberedList-module_text___d7l7\",\"custom_badge\":\"NumberedList-module_custom_badge__JRLdS\",\"custom_badge_text\":\"NumberedList-module_custom_badge_text__BgOUh\"};","import React from 'react';\nimport { Row, Col } from '@paypalcorp/pp-react';\nimport PropTypes from 'prop-types';\nimport styles from './PaymentMethods.module.less';\n\nconst PaymentMethods = ({ ecmContent }) => {\n const { jsonObject } = ecmContent.content;\n const { title, images, primaryImage } = jsonObject;\n return (\n
\n
{title}
\n\n
\n {primaryImage ?
: null}\n
\n
\n {images.map((image) => (\n \n {image.image_url ? 
: null}\n {image.sub_header}
\n {image.sub_text}
\n \n ))}\n
\n
\n );\n};\n\nPaymentMethods.propTypes = {\n ecmContent: PropTypes.object\n};\nPaymentMethods.defaultProps = {\n ecmContent: {\n content: { jsonObject: { title: '', images: [] } }\n }\n};\n\nexport default PaymentMethods;\n","// extracted by mini-css-extract-plugin\nexport default {\"dev_env_title\":\"EnvSetUp-module_dev_env_title__dVA_L\",\"dev_env_content_box\":\"EnvSetUp-module_dev_env_content_box__PTC4J\",\"dev_env_content\":\"EnvSetUp-module_dev_env_content__oM_mD\",\"dev_env_code_block\":\"EnvSetUp-module_dev_env_code_block__XiLnc\",\"dev_env_custom_badge\":\"EnvSetUp-module_dev_env_custom_badge___HrYH\",\"dev_env_custom_badge_text\":\"EnvSetUp-module_dev_env_custom_badge_text__eWVaX\",\"info_box\":\"EnvSetUp-module_info_box__Pgthm\",\"info_box_text\":\"EnvSetUp-module_info_box_text___QPbb\"};","import React from 'react';\nimport { InformationIcon, Row } from '@paypalcorp/pp-react';\n\nimport PropTypes from 'prop-types';\nimport styles from './EnvSetUp.module.less';\n\nfunction EnvSetUp({ devEnv, title }) {\n return (\n
\n
\n {title}
\n
\n {devEnv.map(({ content }) => (\n
\n {content.badgeNumber && content.content && (\n \n \n
{content.badgeNumber}
\n
\n )}\n {content.codeBlock && (\n \n \n
\n )}\n {content.additionalContent && (\n \n \n
\n )}\n {content.infoBox && (\n \n )}\n
\n ))}\n
\n );\n}\n\nEnvSetUp.propTypes = {\n devEnv: PropTypes.object.isRequired,\n title: PropTypes.object.isRequired\n};\n\nexport default EnvSetUp;\n","import React from 'react';\nimport { Card } from '@paypalcorp/pp-react';\nimport PropTypes from 'prop-types';\nimport { useNavigate } from 'react-router';\nimport styles from './KnowBefore.module.less';\nimport { trackButtonClick } from '../../../../lib/fpti';\nimport isAbsolutePath from '../../../../util/isAbsolutePath';\n\nfunction KnowBefore({ knowBeforeCards }) {\n const navigate = useNavigate();\n\n const handleClick = (key, url) => {\n trackButtonClick(key, url);\n if (isAbsolutePath(url)) {\n if (url.includes('/studio')) {\n window.open(url, '_self', 'popup=false');\n } else {\n window.open(url, '_blank');\n }\n } else {\n navigate(url);\n }\n };\n\n return (\n
\n
{knowBeforeCards.title}
\n {knowBeforeCards.cards.map((card) => (\n
\n
handleClick(card.content.key, card.content.url)}>\n \n
{card.content.key}
\n
{card.content.badge}
\n {card.content.text && (\n
\n )}\n
\n
\n ))}\n
\n );\n}\n\nKnowBefore.propTypes = {\n knowBeforeCards: PropTypes.object.isRequired\n};\n\nexport default KnowBefore;\n","import React from 'react';\nimport { Card } from '@paypalcorp/pp-react';\nimport PropTypes from 'prop-types';\nimport { useNavigate } from 'react-router';\nimport styles from './Resources.module.less';\nimport { trackButtonClick } from '../../../../lib/fpti';\nimport isAbsolutePath from '../../../../util/isAbsolutePath';\n\nfunction Resources({ resourceCards }) {\n const navigate = useNavigate();\n\n const handleClick = (key, url) => {\n trackButtonClick(key, url);\n if (isAbsolutePath(url)) {\n window.open(url, '_blank');\n } else {\n navigate(url);\n }\n };\n\n return (\n
\n
{resourceCards.title}
\n {resourceCards.cards.map((card) => (\n
\n
handleClick(card.content.key, card.content.url)}>\n \n
{card.content.key}
\n
{card.content.badge}
\n {card.content.text &&
}\n
\n
\n ))}\n
\n );\n}\n\nResources.propTypes = {\n resourceCards: PropTypes.object.isRequired\n};\n\nexport default Resources;\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { Row, Col } from '@paypalcorp/pp-react';\nimport { useLocation } from 'react-router';\nimport EnvSetUp from './EnvSetUp/EnvSetUp';\nimport KnowBefore from './KnowBefore/KnowBefore';\nimport Resources from './Resources/Resources';\nimport styles from './SetUpInfo.module.less';\n\nconst SetUpInfo = ({ ecmContent }) => {\n const { hash } = useLocation();\n\n useEffect(() => {\n if (hash) {\n window.location.href = hash;\n }\n }, [hash]);\n\n const { pageContent } = ecmContent.content;\n if (!pageContent) {\n return <>;\n }\n\n let devEnv;\n let knowBeforeCards;\n let resourceCards;\n pageContent.forEach((content) => {\n const key = content?.content?.key;\n if (key === 'devEnvSetup') {\n devEnv = content.content;\n } else if (key === 'knowBeforeSection') {\n knowBeforeCards = content.content;\n } else if (key === 'resourcesSection') {\n resourceCards = content.content;\n } else {\n return <>;\n }\n return null;\n });\n\n return (\n
\n \n \n \n \n \n \n \n \n
\n
\n );\n};\n\nSetUpInfo.propTypes = {\n ecmContent: PropTypes.object.isRequired\n};\n\nexport default SetUpInfo;\n","export const queryParamtoValueMap = {\n node: 'javascript'\n};\n\nexport const valueToQueryParamMap = {\n javascript: 'node'\n};\n","import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { Row, Col, Button } from '@paypalcorp/pp-react';\nimport IntegrationPageSectionContext from '../StateManagement/IntegrationPageSectionContext';\nimport styles from './CodeActions.module.less';\nimport { trackButtonClick } from '../../../lib/fpti';\n\nconst CodeActions = ({ content }) => {\n const {\n code: { downloadCodeUrl }\n } = useContext(IntegrationPageSectionContext);\n const { rows } = content;\n\n const handleAction = (text, url, action) => {\n if (action === 'download') {\n trackButtonClick(text, null, url);\n window.open(downloadCodeUrl);\n } else {\n trackButtonClick(text, url);\n window.open(url);\n }\n };\n return (\n
\n {rows.map(({ buttons }) => (\n
\n {buttons.map(({ text, url, icon, action }) => (\n \n {\n handleAction(text, url, action);\n }}\n secondary\n size=\"lg\"\n className={styles.code_action_button_container}\n >\n \n
\n {text}\n
\n ))}\n
\n );\n};\n\nCodeActions.propTypes = { content: PropTypes.object };\nCodeActions.defaultProps = { content: { rows: [] } };\n\nexport default CodeActions;\n","// extracted by mini-css-extract-plugin\nexport default {\"code_actions_container\":\"CodeActions-module_code_actions_container__GnUFX\",\"code_action_button_container\":\"CodeActions-module_code_action_button_container__wpPX6\",\"code_action_button_content\":\"CodeActions-module_code_action_button_content__DLNCA\",\"code_action_icon\":\"CodeActions-module_code_action_icon__bAlaD\"};","// extracted by mini-css-extract-plugin\nexport default {\"step_content_section\":\"HtmlPageSection-module_step_content_section__knDRz\",\"base\":\"HtmlPageSection-module_base__TNTWK\",\"highlighted_section\":\"HtmlPageSection-module_highlighted_section__mQAsJ\"};","// extracted by mini-css-extract-plugin\nexport default {\"configuration\":\"Configurator-module_configuration__Aa_vx\",\"configuration_item\":\"Configurator-module_configuration_item__hZPhV\",\"configuration_text\":\"Configurator-module_configuration_text__N1s47\",\"configuration_radio\":\"Configurator-module_configuration_radio__M30id\",\"selection_disabled\":\"Configurator-module_selection_disabled___qUL7\",\"configuration_dropdown\":\"Configurator-module_configuration_dropdown__pYZ8S\",\"configuration_field_wrapper\":\"Configurator-module_configuration_field_wrapper__HZo1U\",\"configuration_field_helpertext\":\"Configurator-module_configuration_field_helpertext___UuVx\",\"card_field_customization\":\"Configurator-module_card_field_customization__NQJtc\"};","import React, { useState, useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { Switch } from '@paypalcorp/pp-react';\nimport style from './SectionToggle.module.less';\nimport IntegrationPageSectionContext from '../StateManagement/IntegrationPageSectionContext';\nimport { trackButtonChange } from '../../../lib/fpti';\n\nexport default function SectionToggle({ contentKey, sectionKey, label, title, checked }) {\n const [isChecked, setIsChecked] = useState(checked);\n const {\n code: { updateActiveCodeBlock, updateCurrentSectionKey },\n OrderConfigurator: { update3dsSetting }\n } = useContext(IntegrationPageSectionContext);\n const handleOnChange = (event) => {\n // unset 3ds selection\n if (contentKey === '3dsConfiguration' && !event.target.checked) {\n update3dsSetting(null);\n }\n trackButtonChange(title, event.target.checked);\n setIsChecked(event.target.checked);\n if (contentKey) {\n const contentKeyArr = contentKey.split(',');\n contentKeyArr.forEach((contentKeyItem) => {\n updateActiveCodeBlock({ key: contentKeyItem, value: event.target.checked });\n });\n updateCurrentSectionKey(event.target.checked ? sectionKey : undefined);\n }\n };\n return (\n
handleOnChange(event)}\n checked={isChecked}\n />\n );\n}\n\nSectionToggle.propTypes = {\n contentKey: PropTypes.string.isRequired,\n sectionKey: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n checked: PropTypes.bool.isRequired\n};\n","// extracted by mini-css-extract-plugin\nexport default {\"section_toggle\":\"SectionToggle-module_section_toggle___pLEL\"};","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Button, CoachTip } from '@paypalcorp/pp-react';\nimport styles from './OrderActions.module.less';\n\nconst OrderActionButton = ({ content, id, onClick, data }) => {\n const { label, coachTipText } = content;\n const [isCoachOpen, setIsCoachOpen] = useState(false);\n\n const handleClick = () => {\n if (!data || !data.length) {\n setIsCoachOpen(true);\n } else {\n setIsCoachOpen(false);\n onClick();\n }\n };\n\n return (\n <>\n \n {isCoachOpen && (\n setIsCoachOpen(false)}\n />\n )}\n \n );\n};\n\nOrderActionButton.propTypes = {\n content: PropTypes.object,\n id: PropTypes.string.isRequired,\n onClick: PropTypes.func,\n coachTipText: PropTypes.string,\n data: PropTypes.any\n};\n\nOrderActionButton.defaultProps = {\n content: { label: '', coachTipText: '' },\n onClick: null,\n coachTipText: '',\n data: null\n};\n\nexport default OrderActionButton;\n","// extracted by mini-css-extract-plugin\nexport default {\"order_actions_container\":\"OrderActions-module_order_actions_container__Naz_v\",\"order_action_button\":\"OrderActions-module_order_action_button__PYN52\"};","import { LoadingSpinner } from '@paypalcorp/pp-react';\nimport React from 'react';\nimport styles from './LoadingOverlay.module.less';\n\nconst LoadingOverlay = () => {\n return (\n \n \n
\n );\n};\n\nexport default LoadingOverlay;\n","// extracted by mini-css-extract-plugin\nexport default {\"loading_overlay\":\"LoadingOverlay-module_loading_overlay___wiqs\"};","import React, { useCallback, useContext, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { refundCapture } from '../../../util/sdkCallbacks';\nimport IntegrationPageSectionContext from '../StateManagement/IntegrationPageSectionContext';\nimport TestPanelContext from '../StateManagement/TestPanelContext';\nimport styles from './OrderActions.module.less';\nimport OrderActionButton from './OrderActionButton';\nimport LoadingOverlay from '../../../components/LoadingOverlay';\n\nconst OrderActions = ({ codeBlockKey, content }) => {\n const [loading, setLoading] = useState(false);\n\n const {\n lastCapture,\n code,\n SdkConfigurator: {\n sdkSettings: { clientId }\n }\n } = useContext(IntegrationPageSectionContext);\n\n const { updateLogs, toggleTestPanel } = useContext(TestPanelContext);\n\n const isSectionActive = code.status[codeBlockKey];\n\n const csrfToken = useSelector((state) => state?.app?.csrfToken);\n const isUserLoggedIn = useSelector((state) => state?.app?.prunedUser?.isUserLoggedIn);\n const captureIds = lastCapture.value;\n\n const handleRefund = useCallback(async () => {\n setLoading(true);\n await refundCapture({\n captureIds,\n csrfToken,\n updateLogs,\n toggleTestPanel,\n updateLastCapture: lastCapture.updateLastCapture,\n clientId: isUserLoggedIn ? clientId : null\n });\n setLoading(false);\n }, [refundCapture, isUserLoggedIn, clientId, captureIds, csrfToken, updateLogs]);\n\n if (!isSectionActive) return <>;\n\n return (\n <>\n {loading && }\n \n \n
\n \n );\n};\n\nOrderActions.propTypes = {\n content: PropTypes.object,\n codeBlockKey: PropTypes.string\n};\n\nOrderActions.defaultProps = {\n content: null,\n codeBlockKey: null\n};\n\nexport default OrderActions;\n","import React from 'react';\nimport { Card, Link } from '@paypalcorp/pp-react';\nimport PropTypes from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport styles from './CardConfigurator.module.less';\nimport getLoginUrl from '../../../util/getLoginUrl';\n\nconst CardConfigurator = ({ content }) => {\n const isUserLoggedIn = useSelector((state) => state?.app?.prunedUser?.isUserLoggedIn);\n const loginUrl = getLoginUrl();\n\n if (!isUserLoggedIn) {\n return (\n \n
\n {content.title}
\n {content.login_text}\n \n {content.link_text}\n
\n \n
\n el.id === type)}\n tabs={content}\n onClick={(_, index) => handleButtonClick(index)}\n >\n {content.map(({ id }) => (\n \n <>\n \n ))}\n \n
\n );\n};\n\nexport default TypeConfigurator;\n\nTypeConfigurator.propTypes = {\n content: PropTypes.array\n};\n\nTypeConfigurator.defaultProps = { content: [] };\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"TypeConfigurator-module_container__kstPE\"};","import React, { useContext, useEffect } from 'react';\n\nimport { CaptionText, DropdownMenu } from '@paypalcorp/pp-react';\nimport PropTypes from 'prop-types';\nimport IntegrationPageSectionContext from '../StateManagement/IntegrationPageSectionContext';\nimport styles from '../Configurator.module.less';\nimport { trackFieldClosed, trackFieldFocus } from '../../../lib/fpti';\n\nconst FTPI_3DS_CONFIGURATION = '3DS Configuration';\nconst options = [\n {\n value: 'SCA_ALWAYS',\n primaryText: 'SCA_ALWAYS'\n },\n {\n value: 'SCA_WHEN_REQUIRED',\n primaryText: 'SCA_WHEN_REQUIRED'\n }\n];\n\nconst defaultValue = options[0].value;\n\nconst ThreeDsConfigurator = ({ codeBlockKey }) => {\n const {\n code,\n OrderConfigurator: { update3dsSetting, threeDsSetting }\n } = useContext(IntegrationPageSectionContext);\n\n const isSectionActive = code.status[codeBlockKey];\n\n const handleChange = (e) => {\n update3dsSetting(e.target.value);\n };\n\n useEffect(() => {\n if (isSectionActive && !threeDsSetting) {\n // Setting the default value for 3DS on the first active render of the component\n update3dsSetting(defaultValue);\n }\n }, [code.status[codeBlockKey]]);\n\n if (!isSectionActive) return <>;\n\n return (\n \n
\n 3DS Configuration\n trackFieldFocus(FTPI_3DS_CONFIGURATION)}\n onChange={handleChange}\n onClose={() => trackFieldClosed(FTPI_3DS_CONFIGURATION)}\n />\n
\n
\n
\n {contentJson?.CodeBlockToggle && (\n
\n )}\n
\n {contentJson &&\n Object.keys(contentJson).map((componentKey) => {\n const Component = ComponentMap[componentKey];\n const componentContent = contentJson[componentKey];\n if (Component) {\n return (\n \n );\n }\n return <>;\n })}\n
\n \n
\n Button Shape\n {\n trackFieldChange('Button Shape', e.target.value);\n updateButtonSettings(e.target.value, 'shape');\n }}\n options={shapeOptions}\n />\n
\n
\n Button Color\n trackFieldFocus('Button Color')}\n onChange={(e) => {\n trackFieldChange('Button Color', e.target.value);\n updateButtonSettings(e.target.value, 'color');\n }}\n onClose={() => trackFieldClosed('Button Color')}\n />\n
\n
\n
Button Layout\n
\n {\n trackFieldChange('Button Layout', e.target.value);\n updateButtonSettings(e.target.value, 'layout');\n }}\n options={layoutOptions}\n />\n
\n
\n
\n Button Label Text\n trackFieldFocus('Button Label')}\n onChange={(e) => {\n trackFieldChange('Button Label', e.target.value);\n updateButtonSettings(e.target.value, 'label');\n }}\n onClose={() => trackFieldClosed('Button Label')}\n />\n
\n {buyerCountry === 'US' && (\n
\n Button Message\n {\n trackFieldChange('Button Message', e.target.value);\n updateActiveCodeBlock({\n value: e.target.value === 'true',\n key: 'configureButtonMessages'\n });\n }}\n />\n
\n )}\n
\n
\n Intent\n trackFieldFocus('Intent')}\n onChange={(e) => {\n const selectedIntent = e.target.value;\n onValueChange(e, 'intent', FTPI_INTENT);\n updateActiveCodeBlock({\n key: 'captureOrder',\n value: selectedIntent === 'capture'\n });\n updateActiveCodeBlock({\n key: 'authorizeOrder',\n value: selectedIntent === 'authorize'\n });\n }}\n />\n
\n {buyerCurrencyOptions && (\n
\n Currency Code\n trackFieldFocus('Currency:Orders')}\n onChange={(e) => onValueChange(e, 'currency', FTPI_CURRENCY)}\n onClose={() => trackFieldClosed('Currency:Orders')}\n />\n
\n )}\n
\n Amount\n trackFieldFocus('Amount')}\n onChange={(e) => {\n trackFieldChange('Amount', e.target.value);\n setOrderAmount(e.target.value);\n debouncedAmountUpdate(e.target.value, 'value');\n }}\n onClose={() => trackFieldClosed('Amount')}\n />\n
\n