\n \n `\n}\n","import injectionCode from '../../../preview/advanced-checkout'\n\nconst type = 'advanced'\nconst path = '/advance/angular-node/angular/src/'\nconst name = 'index.html'\n\nexport { path, name, type, injectionCode }\n","const type = 'advanced'\nconst path = '/advance/angular-node/angular/src/app/'\nconst name = 'app.component.html'\n\nexport { type, path, name }\n","const type = 'advanced'\nconst path = '/advance/angular-node/angular/src/app/'\nconst name = 'app.component.ts'\n\nexport { type, path, name }\n","const type = 'advanced'\nconst path = '/advance/angular-node/angular/src/app/'\nconst name = 'app.module.ts'\n\nexport { type, path, name }\n","import injectionCode from '../../../preview/advanced-checkout'\n\nconst type = 'advanced'\nconst path = 'server/nodejs/html/views'\nconst name = 'checkout.ejs'\nconst fullPath = `${path}/${name}`\n\nconst conditions = [\n {\n option: 'backend',\n type: 'different',\n value: 'java',\n },\n {\n parameter: 'buttons',\n type: 'not_includes',\n value: 'payment-buttons_3ds',\n },\n]\n\nexport { type, path, name, fullPath, conditions, injectionCode }\n","const type = 'advanced'\nconst path = 'client/html'\nconst name = 'app.js'\nconst fullPath = `${path}/${name}`\n\nconst conditions = [\n {\n option: 'backend',\n type: 'different',\n value: 'java',\n },\n {\n parameter: 'buttons',\n type: 'not_includes',\n value: 'payment-buttons_3ds',\n },\n]\n\nexport { type, path, name, fullPath, conditions }\n","const type = 'advanced'\nconst path = '/advance/html-node/public/'\nconst name = 'acdc_app.js'\n\nconst conditions = [\n {\n option: 'backend',\n value: 'java',\n },\n {\n parameter: 'buttons',\n type: 'not_includes',\n value: 'payment-buttons_3ds',\n },\n]\nexport { path, name, conditions }\n","import injectionCode from '../../../../preview/advanced-checkout'\n\nconst type = 'advanced'\nconst path = 'server/html/views'\nconst name = 'checkout.ejs'\nconst fullPath = `${path}/${name}`\n\nconst conditions = [\n {\n parameter: 'buttons',\n type: 'includes',\n value: 'payment-buttons_3ds',\n },\n]\n\nexport { type, path, name, fullPath, conditions, injectionCode }\n","const type = 'advanced'\nconst path = 'client/html'\nconst name = 'app.js'\nconst fullPath = `${path}/${name}`\n\nconst conditions = [\n {\n parameter: 'buttons',\n type: 'includes',\n value: 'payment-buttons_3ds',\n },\n]\n\nexport { type, path, name, fullPath, conditions }\n","import injectionCode from '../../../preview/advanced-checkout'\n\nconst type = 'advanced'\nconst path = 'client/react'\nconst name = 'index.html'\nconst fullPath = `${path}/${name}`\n\nexport { type, path, name, fullPath, injectionCode }\n","const type = 'advanced'\nconst path = 'client/react'\nconst name = 'App.jsx'\nconst fullPath = `${path}/${name}`\n\nexport { type, path, name, fullPath }\n","const type = 'advanced'\nconst path = 'client/react'\nconst name = 'main.jsx'\nconst fullPath = `${path}/${name}`\n\nexport { type, path, name, fullPath }\n","const type = 'advanced'\nconst path = 'client/react'\nconst name = 'PaymentForm.jsx'\nconst fullPath = `${path}/${name}`\n\nexport { type, path, name, fullPath }\n","const type = 'advanced'\nconst path = 'client/react'\nconst name = 'PaymentForm.module.css'\nconst fullPath = `${path}/${name}`\n\nexport { type, path, name, fullPath }\n","const type = 'advanced'\nconst path = 'server/nodejs/html'\nconst name = 'server.js'\nconst fullPath = `${path}/${name}`\n\nconst conditions = [\n {\n option: 'frontend',\n value: 'html',\n },\n {\n parameter: 'buttons',\n type: 'not_includes',\n value: 'payment-buttons_3ds',\n },\n]\n\nexport { type, path, name, fullPath, conditions }\n","const type = 'advanced'\nconst path = 'server/nodejs/react'\nconst name = 'server.js'\nconst fullPath = `${path}/${name}`\n\nconst conditions = [\n {\n option: 'frontend',\n value: 'react',\n },\n]\n\nexport { type, path, name, fullPath, conditions }\n","const type = 'advanced'\nconst path = 'server/html'\nconst name = 'server.js'\nconst fullPath = `${path}/${name}`\n\nconst conditions = [\n {\n option: 'frontend',\n type: 'equals',\n value: 'html',\n },\n {\n parameter: 'buttons',\n type: 'includes',\n value: 'payment-buttons_3ds',\n },\n]\n\nexport { type, path, name, fullPath, conditions }\n","const type = 'advanced'\nconst path = '/advance/html-python/'\nconst name = 'index.py'\n\nconst conditions = [\n {\n option: 'frontend',\n type: 'different',\n value: 'angular',\n },\n]\n\nexport { type, path, name, conditions }\n","const type = 'advanced'\nconst path = '/advance/angular-python/'\nconst name = 'server.py'\n\nconst conditions = [\n {\n option: 'frontend',\n value: 'angular',\n },\n]\n\nexport { type, path, name, conditions }\n","const type = 'advanced'\nconst path = '/advance/html-php/'\nconst name = 'index.php'\n\nexport { type, path, name }\n","import standard_frontend_html from './standard/frontend/html'\nimport standard_frontend_react from './standard/frontend/react'\nimport standard_frontend_angular from './standard/frontend/angular'\nimport standard_backend_node from './standard/backend/nodejs'\nimport standard_backend_python from './standard/backend/python'\nimport standard_backend_php from './standard/backend/php'\n\nimport advanced_frontend_angular from './advanced/frontend/angular'\nimport advanced_frontend_html from './advanced/frontend/html'\nimport advanced_frontend_react from './advanced/frontend/react'\n\nimport advanced_backend_java from './advanced/backend/java'\nimport advanced_backend_nodejs from './advanced/backend/nodejs'\nimport advanced_backend_python from './advanced/backend/python'\nimport advanced_backend_php from './advanced/backend/php'\n\nimport { SnippetSchema } from '../interfaces/SnippetSchema'\n\nexport const checkoutSimulatorSnippets: SnippetSchema[] = [\n {\n name: 'standard',\n environments: [\n {\n name: 'frontend',\n samples: [\n {\n language: 'html',\n files: standard_frontend_html,\n },\n {\n language: 'react',\n files: standard_frontend_react,\n },\n {\n language: 'angular',\n files: standard_frontend_angular,\n },\n ],\n },\n {\n name: 'backend',\n samples: [\n {\n language: 'nodejs',\n files: standard_backend_node,\n },\n {\n language: 'python',\n files: standard_backend_python,\n },\n {\n language: 'php',\n files: standard_backend_php,\n },\n ],\n },\n ],\n },\n {\n name: 'advanced',\n environments: [\n {\n name: 'frontend',\n samples: [\n {\n language: 'html',\n files: advanced_frontend_html,\n },\n {\n language: 'react',\n files: advanced_frontend_react,\n },\n {\n language: 'angular',\n files: advanced_frontend_angular,\n },\n ],\n },\n {\n name: 'backend',\n samples: [\n // {\n // language: 'java',\n // files: advanced_backend_java,\n // },\n {\n language: 'nodejs',\n files: advanced_backend_nodejs,\n },\n {\n language: 'python',\n files: advanced_backend_python,\n },\n {\n language: 'php',\n files: advanced_backend_php,\n },\n ],\n },\n ],\n },\n].map((snippet) => ({\n ...snippet,\n environments: snippet.environments.map((environment) => ({\n ...environment,\n samples: environment.samples.map((sample) => ({\n ...sample,\n files: sample.files.map((file: any) => ({\n ...file,\n integration: snippet.name,\n environment: environment.name,\n language: sample.language,\n })),\n })),\n })),\n}))\n","import * as app_js from './app.js'\nimport * as checkout_html from './checkout.html'\n\nexport default [app_js, checkout_html]\n","import * as app_jsx from './app.jsx'\n\nexport default [app_jsx]\n","import * as app_component_ts from './app.component.ts'\n\nexport default [app_component_ts]\n","import * as server_js from './server.js'\n\nexport default [server_js]\n","import * as server_py from './server.py'\n\nexport default [server_py]\n","import * as server_php from './server.php'\n\nexport default [server_php]\n","import * as checkout_ejs from './checkout_ejs'\nimport * as app_js from './app.js'\nimport * as acdc_app_js from './acdc_app.js'\nimport * as ds_checkout_js from './3ds/checkout_ejs'\nimport * as ds_app_js from './3ds/app.js'\n\nexport default [checkout_ejs, app_js, acdc_app_js, ds_checkout_js, ds_app_js]\n","import * as index_html from './index.html'\nimport * as app_js from './app.js'\nimport * as main_js from './main.js'\nimport * as paymentForm_js from './paymentForm.js'\nimport * as paymentForm_module_css from './paymentForm.module.css'\n\nexport default [\n index_html,\n app_js,\n main_js,\n paymentForm_js,\n paymentForm_module_css,\n]\n","import * as main_ts from './main.ts'\nimport * as index_html from './index.html'\nimport * as app_component_html from './app.component.html'\nimport * as app_component_ts from './app.component.ts'\nimport * as app_module_ts from './app.module.ts'\n\nexport default [\n index_html,\n main_ts,\n app_component_html,\n app_component_ts,\n app_module_ts,\n]\n","import * as server_js from './server.js'\nimport * as server_react_js from './server_react.js'\nimport * as ds_server_js from './3ds/server.js'\n\nexport default [server_js, server_react_js, ds_server_js]\n","import * as index_py from './index.py'\nimport * as server_py from './server.py'\n\nexport default [index_py, server_py]\n","import * as index_php from './index.php'\n\nexport default [index_php]\n","import { SnippetSchemaEnvironmentSampleFile } from '../code-selector/code-snippets/interfaces'\nimport { CodeSelectorOption } from '../code-selector/interfaces'\nimport {\n CheckoutSimulatorParametersProps,\n CheckoutSimulatorState,\n} from './interfaces'\n\ntype CheckoutSimulatorAction =\n | {\n type: '[Checkout_Simulator] Set option value'\n payload: {\n name: string\n value: string\n }\n }\n | {\n type: '[Checkout_Simulator] Set buttons options'\n payload: CodeSelectorOption[]\n }\n | {\n type: '[Checkout_Simulator] Set integration type'\n payload: {\n integrationType: string\n }\n }\n | {\n type: '[Checkout_Simulator] Set snippets'\n payload: { [environment: string]: SnippetSchemaEnvironmentSampleFile[] }\n }\n | {\n type: '[Checkout_Simulator] Set parameters'\n payload: CheckoutSimulatorParametersProps\n }\n | {\n type: '[Checkout_Simulator] Set parameter'\n payload: {\n name: string\n value: any\n }\n }\n\nexport const checkoutSimulatorReducer = (\n state: CheckoutSimulatorState,\n action: CheckoutSimulatorAction,\n): CheckoutSimulatorState => {\n switch (action.type) {\n case '[Checkout_Simulator] Set option value':\n return {\n ...state,\n options: [\n ...state.options.map((option) =>\n option.name === action.payload.name\n ? {\n ...option,\n value: action.payload.value,\n }\n : option,\n ),\n ],\n }\n case '[Checkout_Simulator] Set integration type':\n return {\n ...state,\n integrationType: action.payload.integrationType,\n }\n case '[Checkout_Simulator] Set buttons options':\n return {\n ...state,\n options: action.payload,\n }\n case '[Checkout_Simulator] Set snippets':\n return {\n ...state,\n snippets: action.payload,\n }\n case '[Checkout_Simulator] Set parameters':\n return {\n ...state,\n parameters: action.payload,\n }\n case '[Checkout_Simulator] Set parameter':\n return {\n ...state,\n parameters: {\n ...state.parameters,\n [action.payload.name]: action.payload.value,\n },\n }\n default:\n return state\n }\n}\n","import React, { FC, useReducer, useState } from 'react'\nimport { codeSelectorDefaultOptions } from '../code-selector/assets'\nimport { checkoutSimulatorSnippets } from '../code-selector/code-snippets/checkout'\nimport { CodeSelectorOption } from '../code-selector/interfaces'\nimport { CheckoutSimulatorContext } from './CheckoutSimulatorContext'\nimport { checkoutSimulatorReducer } from './checkoutSimulatorReducer'\nimport {\n CheckoutSimulatorParametersProps,\n CheckoutSimulatorState,\n} from './interfaces'\n\nconst initialState: CheckoutSimulatorState = {\n snippetSchema: checkoutSimulatorSnippets,\n options: codeSelectorDefaultOptions,\n integrationType: 'standard',\n snippets: {},\n parameters: {\n clientId: 'test',\n appSecret: '
',\n buttons: [\n 'payment-buttons_paypal',\n 'payment-buttons_paylater',\n 'payment-buttons_venmo',\n 'payment-buttons_3ds',\n 'payment-buttons_card',\n ],\n paymentModel: 'onetime-payment',\n buttonStyle: 'rect',\n buttonLayout: 'vertical',\n },\n}\n\nexport const CheckoutSimulatorProvider: FC = ({ children }) => {\n const [state, dispatch] = useReducer(checkoutSimulatorReducer, initialState)\n\n const setOptions = (options: CodeSelectorOption[]) => {\n dispatch({\n type: '[Checkout_Simulator] Set buttons options',\n payload: options,\n })\n }\n\n const setOptionValue = (name: string, value: string) => {\n dispatch({\n type: '[Checkout_Simulator] Set option value',\n payload: {\n name,\n value,\n },\n })\n }\n\n const setIntegrationType = (integrationType: string) => {\n dispatch({\n type: '[Checkout_Simulator] Set integration type',\n payload: {\n integrationType,\n },\n })\n }\n\n const setParameters = (parameters: CheckoutSimulatorParametersProps) => {\n dispatch({\n type: '[Checkout_Simulator] Set parameters',\n payload: parameters,\n })\n }\n\n const setParameter = (name: string, value: any) => {\n dispatch({\n type: '[Checkout_Simulator] Set parameter',\n payload: {\n name,\n value,\n },\n })\n }\n\n const updateSnippets = () => {\n const integrationType = state.options.find(\n (option) => option.name === 'integration',\n )?.value\n\n const schema = state.snippetSchema.find(\n (schema) => schema.name === integrationType,\n )\n\n const environmentLanguages = schema?.environments.map((environment) => ({\n environment: environment.name,\n language: state.options.find((option) => option.name === environment.name)\n ?.value,\n }))\n\n const environmentLanguageFiles = environmentLanguages?.map(\n (environmentLanguage) => ({\n environment: environmentLanguage.environment,\n files: schema?.environments\n .find(\n (environment) =>\n environment.name === environmentLanguage.environment,\n )\n ?.samples.find(\n (sample) => sample.language === environmentLanguage.language,\n )\n ?.files.filter(\n (file) =>\n file &&\n (!file.conditions ||\n file.conditions.filter((condition) => {\n if (condition.option) {\n let conditionOption = state.options.find(\n (conditionOption) =>\n conditionOption.name === condition.option,\n )\n if (condition.type === 'different')\n return conditionOption?.value !== condition.value\n return conditionOption?.value === condition.value\n } else if (condition.parameter) {\n let conditionParameter =\n state.parameters[condition.parameter]\n switch (condition.type) {\n case 'includes':\n if (!Array.isArray(conditionParameter)) return false\n return conditionParameter.includes(condition.value)\n case 'not_includes':\n if (!Array.isArray(conditionParameter)) return false\n return !conditionParameter.includes(condition.value)\n case 'different':\n return conditionParameter !== condition.value\n default:\n return conditionParameter === condition.value\n }\n }\n }).length === file.conditions.length),\n ),\n }),\n )\n\n const snippets = environmentLanguageFiles?.reduce(\n (files: any, environmentFile: any) => {\n return {\n ...files,\n [environmentFile.environment]: environmentFile.files,\n }\n },\n {},\n )\n\n dispatch({\n type: '[Checkout_Simulator] Set snippets',\n payload: snippets,\n })\n }\n\n return (\n \n {children}\n \n )\n}\n","import {\n Alert,\n BodyText,\n Button,\n Card,\n HeadingText,\n TextArea,\n} from '@paypalcorp/pp-react'\nimport React, { FunctionComponent, useState } from 'react'\nimport './article-feedback.css'\nimport withAnalytics from '../../utils/withAnalytics'\n\nconst ArticleFeedback: FunctionComponent = ({}) => {\n const [isFbCaptured, setIsFbCaptured] = useState(false)\n const [isFbRating, setIsFbRating] = useState(false)\n const [isFbReason, setIsFbReason] = useState(false)\n const [selectedReason, setSelectedReason] = useState('')\n const [selectedRating, setSelectedRating] = useState(0)\n const [reasonDescription, setReasonDescription] = useState('')\n\n const fptiData = typeof window !== `undefined` && window.fpti\n\n enum FeedbackAnswers {\n YES = 'Y',\n NO = 'N',\n }\n\n const reasonMap: { [x: string]: string } = {\n toomuchinfo: 'Too much information',\n notenoughinfo: 'Not enough information to answer my question',\n lookingfor: 'This isn´t what i was looking for',\n incorrect: 'I tried this and it didn´t solve the problem',\n dontlike: 'I don´t like this feature or policy',\n other: 'Other',\n }\n\n const reasons: string[] = Object.keys(reasonMap)\n\n const HCAR_MAPPINGS: { [x: string]: string } = {\n toomuchinfo: 'N1',\n notenoughinfo: 'N2',\n lookingfor: 'N3',\n incorrect: 'N4',\n dontlike: 'N5',\n other: 'N99',\n }\n\n const dataMasking = (data: string) => {\n const maskRegEx =\n /(\\d\\d+|(([^<>()\\[\\]\\.,;:\\s@\\\"]+(\\.[^<>()\\[\\]\\.,;:\\s@\\\"]+)*)|(\\\".+\\\"))@(([^<>()[\\]\\.,;:\\s@\\\"]+\\.)+[^<>()[\\]\\.,;:\\s@\\\"]{2,}))/g // eslint-disable-line\n const maskPattern = '#########'\n\n if (data) {\n return data.replace(maskRegEx, maskPattern)\n }\n\n return data\n }\n\n const recordAnalytics = (answer: FeedbackAnswers) => {\n if (fptiData && window.PAYPAL?.analytics?.instance) {\n let category = 'feedback'\n let hcar =\n answer === FeedbackAnswers.YES\n ? answer.toString()\n : HCAR_MAPPINGS[selectedReason]\n let hcaf = `${category}|${hcar}${\n selectedReason\n ? `|${selectedRating}|${dataMasking(reasonDescription)}`\n : ''\n }`\n\n window.PAYPAL.analytics.instance.record({\n data: {\n ...fptiData,\n page: 'main:developer:integration-builder',\n pgrp: 'main:developer:integration-builder',\n e: 'cl',\n hcar,\n hcaf,\n component: 'devdiscoverynodeweb',\n },\n })\n }\n }\n\n const fbAnswerHandler = (answer: FeedbackAnswers) => {\n if (answer === FeedbackAnswers.YES) {\n recordAnalytics(answer)\n setIsFbCaptured(true)\n } else {\n setIsFbRating(true)\n }\n }\n\n const fbRatingHandler = (rating: number) => {\n setSelectedRating(rating)\n setIsFbReason(true)\n }\n\n const fbFeedbackHandler = () => {\n recordAnalytics(FeedbackAnswers.NO)\n\n setIsFbRating(false)\n setIsFbReason(false)\n setIsFbCaptured(true)\n }\n\n const fbReasonHandler = (reason: string) => {\n setSelectedReason(reason)\n }\n\n const renderFbReason = () => {\n return isFbReason ? (\n \n
\n \n Why wasn't this information helpful?\n \n \n {reasons.map((reason: string) => (\n \n fbReasonHandler(reason)}\n >\n {reasonMap[reason]}\n \n {reason === selectedReason ? (\n <>\n \n ))}\n \n \n
\n ) : null\n }\n\n const renderFbSection = () => {\n return !isFbCaptured && !isFbRating ? (\n \n
\n Was the integration builder helpful?\n \n
\n fbAnswerHandler(FeedbackAnswers.YES)}\n >\n Yes\n \n fbAnswerHandler(FeedbackAnswers.NO)}>\n No\n \n
\n
\n ) : null\n }\n\n const renderFbReceived = () => {\n return isFbCaptured ? (\n \n ) : null\n }\n\n const renderFbRating = () => {\n return isFbRating ? (\n \n
\n Please rate your experience with this tool based on how useful it is\n \n\n
\n fbRatingHandler(1)}\n >\n 1\n \n fbRatingHandler(2)}\n >\n 2\n \n fbRatingHandler(3)}\n >\n 3\n \n fbRatingHandler(4)}\n >\n 4\n \n fbRatingHandler(5)}\n >\n 5\n \n
\n\n {renderFbReason()}\n
\n ) : null\n }\n\n return (\n \n {renderFbSection()}\n {renderFbReceived()}\n {renderFbRating()}\n
\n )\n}\n\nexport default withAnalytics(ArticleFeedback)\n","import { ArrowLeftIcon, Badge, Banner } from '@paypalcorp/pp-react'\nimport { navigate } from '@reach/router'\nimport { isEmpty } from 'lodash'\nimport React, { FunctionComponent, useEffect } from 'react'\nimport { CodeSelector } from '../../components/integration-builder'\nimport { CheckoutSimulatorProvider } from '../../components/integration-builder/context/CheckoutSimulatorProvider'\nimport { useApplicationContext } from '../../provider'\nimport withAnalytics from '../../utils/withAnalytics'\nimport Layout from '../layout'\nimport styles from './integration-builder.module.css'\nimport Build from './sections/Build'\nimport Configure from './sections/Configure'\nimport Demo from './sections/Demo'\nimport Preview from './sections/Preview'\nimport TakeLive from './sections/TakeLive'\nimport Code from './sections/Code'\nimport HelpModal from './sections/HelpModal'\nimport KnowBeforeYouCode from './sections/KnowBeforeYouCode'\nimport ArticleFeedback from '../../components/article-feedback'\n\nconst CheckoutSimulatorNew: FunctionComponent = ({}) => {\n const { user } = useApplicationContext()\n const userLoggedOut = !user?.loggedIn\n const fptiData = typeof window !== `undefined` && window.fpti\n\n let options: Intl.DateTimeFormatOptions = {\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n hour12: true,\n }\n\n const lastUpdated =\n typeof document !== 'undefined'\n ? new Intl.DateTimeFormat('en-US', options)\n .format(new Date(document.lastModified))\n .replace(',', '')\n .replace(' at ', ', @ ')\n .replace('AM', 'am')\n .replace('PM', 'pm')\n : ''\n\n // ANALYTICS WHEN PAGE LOADED\n useEffect(() => {\n if (fptiData && window.PAYPAL?.analytics?.instance) {\n window.PAYPAL.analytics.instance.record({\n data: {\n page: 'main:developer:integration-builder',\n pgrp: 'main:developer:integration-builder',\n e: 'page-load',\n ...fptiData,\n },\n })\n }\n })\n\n const handleGoBack = () => {\n if (window.history.length > 2) {\n navigate(-1)\n } else {\n navigate('/home/')\n }\n }\n\n return (\n <>\n \n \n \n \n
\n
\n
Integration Builder \n \n \n
\n
JS SDK \n
\n Last updated: {lastUpdated}\n
\n
\n
\n \n \n \n \n \n \n >\n )\n}\n\nexport default withAnalytics(CheckoutSimulatorNew)\n","import React, { FunctionComponent } from 'react'\nimport { Accordion, ContentCard } from '../../../components/integration-builder'\nimport { AcceptCards, AcceptPayments } from '../../../components/icons'\n\nimport { Tooltip, Row, Col } from '@paypalcorp/pp-react'\nimport styles from '../integration-builder.module.css'\nimport { useApplicationContext } from '../../../provider'\n\nconst TITLES = {\n testA: {\n standardName: 'PayPal Payments',\n standardAllows: 'allows you to offer a variety of payment options:',\n advanceName: 'Card processing and preferred ways to pay',\n advanceAllows:\n 'allows you to offer the same PayPal Payments options as well as:',\n },\n testB: {\n standardName: 'Standard Checkout',\n standardAllows: 'allows you to offer a variety of payment options:',\n advanceName: 'Advanced Checkout',\n advanceAllows:\n 'allows you to accept all of the Standard Checkout payment types as well as:',\n },\n}\n\nconst StandardTooltip = (\n \n)\nconst AdvanceTooltip = (\n \n)\n\nconst KBYC: FunctionComponent = () => {\n const { experiments } = useApplicationContext()\n\n const treatment = experiments.integrationBuilderKBYC?.startsWith('Trmt_')\n ? 'testA'\n : 'testB'\n const cardStandardName = TITLES[treatment].standardName\n const cardStandardAllows = TITLES[treatment].standardAllows\n const cardAdvanceName = TITLES[treatment].advanceName\n const cardAdvanceAllows = TITLES[treatment].advanceAllows\n\n return (\n \n
\n Know before you code\n \n }\n content={\n \n
\n \n }\n badgeType=\"feature\"\n badgeText=\"Standard\"\n content={\n <>\n \n {cardStandardName}\n \n \n {StandardTooltip}\n \n \n {cardStandardAllows}\n \n \n PayPal \n Pay Later \n Venmo \n \n Debit and Credit through a PayPal-managed guest\n checkout\n \n \n >\n }\n />\n \n \n }\n badgeType=\"feature\"\n badgeText=\"Advanced\"\n content={\n <>\n \n {cardAdvanceName}\n \n \n {AdvanceTooltip}\n \n \n {cardAdvanceAllows}\n \n \n Direct Debit and Credit card processing \n Customizable Payment Protection \n \n Unbranded checkout, with customizable buttons and form\n fields\n \n Region-specific alternative payments methods \n \n >\n }\n />\n \n
\n
\n }\n />\n \n )\n}\n\nexport default KBYC\n","import React, { FunctionComponent, useContext } from 'react'\nimport { Accordion } from '../../../components/integration-builder/accordion'\nimport styles from '../integration-builder.module.css'\nimport cardDetails from './cardDetails.json'\nimport { Tooltip, Link } from '@paypalcorp/pp-react'\nimport { CheckoutSimulatorContext } from '../../../components/integration-builder/context/CheckoutSimulatorContext'\nimport CardGeneratorLayout from './CardGenerator'\nimport { ExternalLink } from '../../../components/icons'\n\nconst Demo: FunctionComponent = () => {\n const { integrationType } = useContext(CheckoutSimulatorContext)\n\n return (\n \n
\n \n Demo checkout as a payer and merchant\n
\n \n \n In the Checkout Preview, select a payment button to demo\n checkout.\n \n \n Log in to the payer's sandbox account using pre-populated\n credentials.\n \n Select a payment method to start the transaction. \n \n Confirm that payment was successful by logging in to the\n merchant's sandbox account using the pre-populated credentials.\n \n \n On a successful transaction, the payment is shown in the\n merchant sandbox account.\n \n \n {integrationType === 'advanced' ? (\n \n Simulate a successful credit card capture or 3D Secure test\n cards to test different 3DS scenarios and generate a 3DS\n response in the order details.\n
\n ) : (\n Simulate successful and unsuccessful credit card capture.
\n )}\n \n
\n Successful test transaction\n
\n
\n
\n \n Use the following card information\n {integrationType === 'advanced'\n ? ` only when 3DS is unchecked. `\n : '. '}\n \n \n See more test cases here\n \n \n \n .\n
\n \n \n
\n Negative test transaction\n
\n
\n
\n \n Use the following card information\n {integrationType === 'advanced'\n ? `only when 3DS is unchecked. `\n : '. '}\n \n \n See more test cases here\n \n \n \n .\n
\n \n {integrationType === 'advanced' ? (\n <>\n \n
\n 3D Secure Test Transaction\n
\n
\n
\n \n Use the following card information{' '}\n {integrationType === 'advanced'\n ? `only when 3DS is checked. `\n : '. '}\n \n \n See more test cases here\n \n \n \n .\n
\n \n >\n ) : null}\n >\n }\n />\n \n )\n}\n\nexport default Demo\n","import { SingleSelectionGroup } from '@paypalcorp/pp-react'\nimport React, { ChangeEvent, useContext, useEffect } from 'react'\nimport './code-selector.css'\nimport { CheckoutSimulatorContext } from '../context/CheckoutSimulatorContext'\nimport withAnalytics from '../../../utils/withAnalytics'\n\nconst CodeSelectorButtons: React.FC = () => {\n const fptiData = typeof window !== `undefined` && window.fpti\n const {\n options,\n parameters,\n setOptionValue,\n setIntegrationType,\n updateSnippets,\n setParameter,\n } = useContext(CheckoutSimulatorContext)\n\n const recordAnalytics = (buttonSelected: string) => {\n if (fptiData && window.PAYPAL?.analytics?.instance) {\n const event = `button_${buttonSelected}`\n window.PAYPAL.analytics.instance.record({\n data: {\n page: 'main:developer:integration-builder',\n pgrp: 'main:developer:integration-builder',\n e: 'cl',\n link: event,\n event_action: event,\n ...fptiData,\n },\n })\n }\n }\n\n useEffect(() => {\n updateSnippets()\n }, [options])\n\n return (\n <>\n {options.map((option) => {\n return (\n \n !button.conditions ||\n button.conditions.filter((condition) => {\n let conditionOption = options.find(\n (conditionOption) =>\n conditionOption.name === condition.option,\n )\n return conditionOption?.value === condition.value\n }).length === button.conditions.length,\n )}\n onChange={(event: ChangeEvent) => {\n recordAnalytics(event.target.value)\n\n setOptionValue(option.name, event.target.value)\n\n if (option.name === 'integration') {\n // Without this the integration type doesn't change and it flickers\n setIntegrationType(event.target.value)\n if (\n event.target.value === 'standard' &&\n options.find((option) => option.name === 'backend')?.value ===\n 'java'\n )\n setOptionValue('backend', 'nodejs')\n }\n }}\n value={\n typeof option.value === 'function' ? option.value() : option.value\n }\n />\n )\n })}\n >\n )\n}\n\nexport default withAnalytics(CodeSelectorButtons)\n","import React from 'react'\nimport './code-selector.css'\nimport CodeSelectorButtons from './CodeSelectorButtons'\n\nexport const CodeSelector: React.FC = () => {\n return (\n \n )\n}\n","import React, { ReactNode } from 'react'\nimport './content-card.css'\nimport { Badge } from '@paypalcorp/pp-react'\n\ninterface ContentCardProps {\n badgeType?:\n | 'feature'\n | 'success'\n | 'warning'\n | 'critical'\n | 'neutral'\n | undefined\n badgeText?: string\n icon?: ReactNode\n onClick?: () => void\n content: ReactNode | ReactNode[]\n}\n\nexport const ContentCard: React.FC = ({\n badgeType = 'feature',\n badgeText = '',\n icon,\n onClick,\n content,\n}) => {\n return (\n \n
\n {icon}\n {badgeText} \n
\n
{content}
\n
\n )\n}\n","import React from 'react'\n\ninterface IPayCompleteProps {\n width?: string\n height?: string\n}\n\nconst defaultProps: IPayCompleteProps = {\n width: '72',\n height: '72',\n}\n\nexport const PayComplete: React.FC = ({ width, height }) => {\n return (\n \n \n \n \n \n \n )\n}\n\nPayComplete.defaultProps = defaultProps\n"],"sourceRoot":""}