{"version":3,"sources":["webpack://switch-website/./src/images/product/vault/shapes.png","webpack://switch-website/./src/images/product/vault/tokenization-desktop.png","webpack://switch-website/./src/images/product/vault/tokenization-mobile.png","webpack://switch-website/./src/pages/product/vault.js","webpack://switch-website/./src/images/product/vault/trapezoid.svg"],"names":["DataProtectionContainer","ContentContainer","Hero","H5","fontWeights","breakpoints","CustomerCheckoutContainer","H1","NetworkTokenizationContainer","colors","TokenizationMobileImage","TokenizationDesktopImage","h4BaseStyle","h6BaseStyle","useContext","ContrastContext","setContrast","t","useTranslation","section","hero","description","image","S","src","placeholder","loading","alt","mobileImage","SEO","title","ogTitle","ProductHero","sectionStr","videoUrl","ProductPageContainer","className","Trans","to","colored","ShapesBackground","target","AnimatedBackground","React","Trapezoid","props","createElement","defaultProps","module","exports","default"],"mappings":"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","file":"component---src-pages-product-vault-js-6379f9ab1535a0ab4032.js","sourcesContent":["export default __webpack_public_path__ + \"static/shapes-df47dd02a65949aa67fb0e9bbb26c819.png\";","export default __webpack_public_path__ + \"static/tokenization-desktop-87969ad837514a4aa9f736607e91ef1e.png\";","export default __webpack_public_path__ + \"static/tokenization-mobile-8ba2b2fb68065ac871694706b935eb44.png\";","/** @jsx jsx */\nimport React, {useContext} from 'react';\nimport {StaticImage} from 'gatsby-plugin-image';\n\nimport {jsx} from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {Trans, useTranslation} from 'gatsby-plugin-react-i18next';\n\nimport SEO from '../../components/common/SEO';\nimport ProductHero from '../../components/common/ProductHero';\nimport ProductPageContainer from '../../components/common/ProductPageContainer';\nimport {Hero, H1, H5, h4BaseStyle, h6BaseStyle} from '../../components/common/Typography';\nimport {breakpoints, colors, ContentContainer, fontWeights} from '../../styles/theme';\nimport AnimatedBackground from '../../components/common/AnimatedBackground';\nimport {CTA} from '../../components/common/Clickables';\nimport {ContrastContext} from '../../helpers/context';\nimport TrapezoidBackground from '../../images/product/vault/trapezoid.svg';\nimport ShapesBackground from '../../images/product/vault/shapes.png';\nimport TokenizationDesktopImage from '../../images/product/vault/tokenization-desktop.png';\nimport TokenizationMobileImage from '../../images/product/vault/tokenization-mobile.png';\n\n\n/*\n * Constants\n */\n/* eslint-disable-next-line i18next/no-literal-string */\nconst videoUrl = null;\n\n\n/*\n * Private Elements\n */\nconst DataProtectionContainer = styled.div`\n    position: relative;\n\n    .row {\n        margin-top: 30px;\n\n        &.shield-one {\n            margin-top: 50px;\n        }\n    }\n\n    ${ContentContainer} {\n        padding-left: 25px;\n        padding-right: 25px;\n\n        ${Hero} {\n            margin-bottom: 25px;\n        }\n\n        ${H5} {\n            font-weight: ${fontWeights.regular};\n            margin-bottom: 20px;\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        .row {\n            margin-top: 50px;\n\n            &.shield-one {\n                margin-top: 100px;\n            }\n        }\n\n        ${ContentContainer} {\n            padding-left: 0;\n            padding-right: 0;\n        }\n    }\n`;\n\nconst CustomerCheckoutContainer = styled.div`\n    position: relative;\n    padding-bottom: 60px;\n\n    ${ContentContainer} {\n        position: relative;\n        padding-top: 50px;\n        padding-left: 25px;\n        padding-right: 25px;\n\n        ${H1} {\n            margin-bottom: 25px;\n        }\n\n        ${H5} {\n            font-weight: ${fontWeights.regular};\n            margin-bottom: 50px;\n        }\n\n        .checkout-image {\n            margin-bottom: 50px;\n        }\n    }\n\n    .background {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        z-index: -1;\n\n        .trapezoid-wrapper {\n            position: absolute;\n            width: 100%;\n            height: 75%;\n            bottom: 0;\n            left: 0;\n\n            svg {\n                width: 100%;\n                height: 100%;\n            }\n        }\n\n        .shapes-wrapper {\n            .image-wrapper {\n                overflow: hidden;\n                position: absolute !important;\n                height: 55%;\n                width: 100vw;\n                top: 25%;\n                left: 0;\n\n                img {\n                    height: 100%;\n                }\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        padding-bottom: 130px;\n\n        ${ContentContainer} {\n            padding-top: 0;\n            padding-left: 0;\n            padding-right: 0;\n\n            .row {\n                &:not(.lean) {\n                    margin-top: 50px;\n                }\n            }\n\n            .checkout-image {\n                margin-top: -4%;\n            }\n        }\n\n        .background {\n            bottom: 0;\n\n            .trapezoid-wrapper {\n                height: 115%;\n            }\n\n            .shapes-wrapper {\n                .image-wrapper {\n                    height: 100%;\n                    max-width: 100%;\n                    top: 0;\n                }\n            }\n        }\n    }\n`;\n\nconst NetworkTokenizationContainer = styled.div`\n    position: relative;\n    color: ${colors.white};\n\n    ${ContentContainer} {\n        padding-left: 25px;\n        padding-right: 25px;\n\n        .content-wrapper {\n            ${H1} {\n                margin-top: 90px;\n            }\n\n            ${H5} {\n                font-weight: ${fontWeights.regular};\n                margin-top: 25px;\n            }\n        }\n    }\n\n    .background {\n        height: 100vw;\n        background: url(${TokenizationMobileImage}) no-repeat center/cover;\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        ${ContentContainer} {\n            padding: clamp(25px, 10vw, 200px) 0;\n            height: 100%;\n\n            .content-wrapper {\n                height: 100%;\n                align-items: center;\n\n                ${H1} {\n                    margin-top: 0;\n                    margin-bottom: 25px;\n                }\n            }\n        }\n\n        .background {\n            position: absolute;\n            width: 70%;\n            top: 0;\n            right: 0;\n            height: 100%;\n            background: url(${TokenizationDesktopImage}) no-repeat center/cover;\n        }\n    }\n  \n    @media (min-width: ${breakpoints.md}) and (max-width: ${breakpoints.lg}) {\n        ${ContentContainer} {\n            .content-wrapper {\n                ${H1} {\n                    ${h4BaseStyle};\n                }\n\n                ${H5} {\n                    ${h6BaseStyle};\n                    font-weight: ${fontWeights.regular};\n                }\n            }\n        }\n    }\n`;\n\n\n/*\n * Public Elements\n */\nconst VaultPage = () => {\n    const setContrast = useContext(ContrastContext);\n    setContrast(false);\n    const {t} = useTranslation();\n\n    const section = t('Vault');\n    // eslint-disable-next-line i18next/no-literal-string\n    const sectionStr = 'Vault';\n    const hero = t('Store payment credentials for multichannels use.');\n    const description = t('Save customers\\' payment details in a PCI DSS compliant manner for faster checkouts and '\n        + 'optimized sales conversions.');\n    const image = (\n        <StaticImage src=\"../../images/product/vault/logo.png\" placeholder=\"none\" loading=\"eager\" alt=\"\" />\n    );\n    const mobileImage = (\n        <StaticImage src=\"../../images/product/vault/logo-mobile.png\" placeholder=\"none\" loading=\"eager\" alt=\"\" />\n    );\n\n    return (\n        <>\n            <SEO\n                title={section}\n                ogTitle={t('Optimize Authorization Rates with Tokenization - Switch')}\n                description={t('Save payment details and tokenize card data in a PCI compliant manner. Avoid declines '\n                    + 'with network tokenization. Speed up checkouts and optimize conversions.')}\n                image=\"/website/metatags/vault.png\"\n            />\n\n            <ProductHero\n                section={section}\n                sectionStr={sectionStr}\n                hero={hero}\n                description={description}\n                image={image}\n                mobileImage={mobileImage}\n                videoUrl={videoUrl}\n            />\n\n            <ProductPageContainer>\n                <DataProtectionContainer>\n                    <div className=\"row no-gutters shield-one\">\n                        <div className=\"col-4 col-lg-3\">\n                            <StaticImage\n                                src=\"../../images/product/vault/shield-1.png\"\n                                placeholder=\"tracedSVG\"\n                                alt=\"\"\n                            />\n                        </div>\n                    </div>\n                    <ContentContainer>\n                        <div className=\"row no-gutters\">\n                            <div className=\"col-12 col-md-5 offset-md-1\">\n                                <Hero><Trans>Protect your customers&apos; data at all times.</Trans></Hero>\n                            </div>\n                            <div className=\"col-12 col-md-4 offset-md-1\">\n                                <H5>\n                                    <Trans>\n                                        With the Switch ability to create vaults, you can securely store and tokenize\n                                        payment details and customer&apos;s data. All while being compliant with the\n                                        latest data regulations across the globe, including GDPR.\n                                    </Trans>\n                                </H5>\n                            </div>\n                        </div>\n                        <div className=\"row no-gutters\">\n                            <div className=\"col-12 col-md-11 offset-md-1\">\n                                <CTA to=\"/learn/607991475c98ce001052b3ef\" colored>\n                                    <Trans>Read more about Securing Personal Data</Trans>\n                                </CTA>\n                            </div>\n                        </div>\n                    </ContentContainer>\n                    <div className=\"row no-gutters\">\n                        <div className=\"col-8 offset-4 col-lg-7 offset-lg-5 col-xl-6 offset-xl-6\">\n                            <StaticImage\n                                src=\"../../images/product/vault/shield-2.png\"\n                                placeholder=\"tracedSVG\"\n                                alt=\"\"\n                            />\n                        </div>\n                    </div>\n                </DataProtectionContainer>\n\n                <CustomerCheckoutContainer>\n                    <div className=\"background\">\n                        <div className=\"trapezoid-wrapper\">\n                            <TrapezoidBackground />\n                        </div>\n\n                        <div className=\"shapes-wrapper\">\n                            <div className=\"image-wrapper\">\n                                {/* Due to the positioning of the image, we cannot use gatsby-image for this */}\n                                <img src={ShapesBackground} className=\"background-image\" alt=\"\" />\n                            </div>\n                        </div>\n                    </div>\n\n                    <ContentContainer>\n                        <div className=\"row no-gutters lean\">\n                            <div className=\"col-12 col-md-5 offset-md-1 checkout-image\">\n                                <StaticImage\n                                    src=\"../../images/product/vault/checkout.png\"\n                                    placeholder=\"tracedSVG\"\n                                    alt=\"\"\n                                />\n                            </div>\n                            <div className=\"col-12 col-md-4 offset-md-1\">\n                                <div className=\"row no-gutters\">\n                                    <H1><Trans>Make your customers&apos; experience smoother and faster.</Trans></H1>\n                                    <H5>\n                                        <Trans>\n                                            Deliver a sleek experience to your customers providing the flexibility to\n                                            reuse their payment details for a quicker checkout even in different payment\n                                            channels. Increase sales while maintaining security standards.\n                                        </Trans>\n                                    </H5>\n                                </div>\n                                <div className=\"row no-gutters lean\">\n                                    <div className=\"col-12\">\n                                        <CTA to=\"https://switchpayments.com/docs/vault\" target=\"_blank\" colored>\n                                            <Trans>Learn more about our Vault API</Trans>\n                                        </CTA>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </ContentContainer>\n                </CustomerCheckoutContainer>\n\n                <NetworkTokenizationContainer>\n                    <AnimatedBackground>\n                        <ContentContainer>\n                            <div className=\"row no-gutters content-wrapper\">\n                                <div className=\"col-12 col-md-5 offset-md-1\">\n                                    <H1><Trans>Reduce declines with Network Tokenization.</Trans></H1>\n                                    <H5>\n                                        <Trans>\n                                            Put an end to declines related to fraud, expired cards, or lost credentials.\n                                            Network tokens are interoperable at every level — issuer, merchant, gateway,\n                                            and acquirer. This means you can disregard the PCI scope and the risk of a\n                                            breach is no longer relevant.\n                                        </Trans>\n                                    </H5>\n                                </div>\n                            </div>\n                        </ContentContainer>\n                        <div className=\"background\" />\n                    </AnimatedBackground>\n                </NetworkTokenizationContainer>\n            </ProductPageContainer>\n        </>\n    );\n};\n\n\n/*\n * Exports\n */\nexport default VaultPage;\n","var React = require('react');\n\nfunction Trapezoid (props) {\n    return React.createElement(\"svg\",props,[React.createElement(\"title\",{\"key\":0},\"Rectangle Copy\"),React.createElement(\"desc\",{\"key\":1},\"Created with Sketch.\"),React.createElement(\"g\",{\"id\":\"Desktop\",\"stroke\":\"none\",\"strokeWidth\":\"1\",\"fill\":\"none\",\"fillRule\":\"evenodd\",\"key\":2},React.createElement(\"g\",{\"id\":\"2.4-Product_Vault\",\"transform\":\"translate(0.000000, -1345.000000)\",\"fill\":\"#F7F6F6\"},React.createElement(\"path\",{\"d\":\"M0,1703 C960,1464.33333 1440,1345 1440,1345 C1440,1345 1440,1616.66667 1440,2160 L0,2160 L0,1703 Z\",\"id\":\"Rectangle-Copy\"})))]);\n}\n\nTrapezoid.defaultProps = {\"preserveAspectRatio\":\"none\",\"width\":\"1440\",\"height\":\"815\",\"viewBox\":\"0 0 1440 815\"};\n\nmodule.exports = Trapezoid;\n\nTrapezoid.default = Trapezoid;\n"],"sourceRoot":""}