paypal · danzhaaspaypal · Aug 15, 2024 · Jul 8, 2024 · Jul 8, 2024 · Jul 9, 2024
diff --git a/content/modals/AU/short_term.json b/content/modals/AU/short_term.json
@@ -7,7 +7,7 @@
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
         "apr": "{apr}",
-        "useV4Design": "false",
+        "useV5Design": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

diff --git a/content/modals/DE/long_term.json b/content/modals/DE/long_term.json
@@ -2,7 +2,7 @@
     "meta": {
         "product": "PAY_LATER_LONG_TERM",
         "offerCountry": "DE",
-        "useV4Design": "false",
+        "useV5Design": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

diff --git a/content/modals/DE/long_term_en.json b/content/modals/DE/long_term_en.json
@@ -3,7 +3,7 @@
         "product": "PAY_LATER_LONG_TERM",
         "offerCountry": "DE",
         "language": "en-DE",
-        "useV4Design": "false",
+        "useV5Design": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

diff --git a/content/modals/DE/pay_in_1.json b/content/modals/DE/pay_in_1.json
@@ -1,7 +1,7 @@
 {
     "meta": {
         "offerCountry": "DE",
-        "useV4Design": "false",
+        "useV5Design": "false",
         "periodicPayment": "{formattedPeriodicPayment}",
         "product": "PAY_LATER_PAY_IN_1",
         "minAmount": "{minAmount}",

diff --git a/content/modals/DE/pay_in_1_en.json b/content/modals/DE/pay_in_1_en.json
@@ -2,7 +2,7 @@
     "meta": {
         "offerCountry": "DE",
         "language": "en-DE",
-        "useV4Design": "false",
+        "useV5Design": "false",
         "periodicPayment": "{formattedPeriodicPayment}",
         "product": "PAY_LATER_PAY_IN_1",
         "minAmount": "{minAmount}",

diff --git a/content/modals/DE/product_list.json b/content/modals/DE/product_list.json
@@ -1,26 +1,27 @@
-{
-    "meta": {
-        "product": "PRODUCT_LIST"
-    },
-    "content": {
-        "headline": "<span aria-hidden='true'>Jetzt kaufen, <br/>später bezahlen</span><span class='sr-only'>Jetzt kaufen, später bezahlen</span>",
-        "disclosure": "Es gelten die Nutzungsbedingungen. Vorbehaltlich Kreditwürdigkeitsprüfung. Für weitere Informationen zur Bezahlung nach 30 Tagen oder PayPal Ratenzahlung wählen Sie eine der obigen Optionen.",
-        "instructions": {
-            "payLater": "Wählen Sie <strong>PayPal</strong>, um <strong>“Später Bezahlen”</strong> zu nutzen."
-        },
-        "productTiles": {
-            "payLater": [
-                {
-                    "header": "Bezahlen Sie nach 30 Tagen",
-                    "body": "Erhalten Sie mehr Zeit, um Ihren Einkauf zu bezahlen.",
-                    "viewName": "PAY_LATER_PAY_IN_1"
-                },
-                {
-                    "header": "PayPal Ratenzahlung",
-                    "body": "Zahlen Sie Ihren Einkauf in monatlichen Raten.",
-                    "viewName": "PAY_LATER_LONG_TERM"
-                }
-            ]
-        }
-    }
-}
+{
+    "meta": {
+        "product": "PRODUCT_LIST",
+        "useV5Design": "false"
+    },
+    "content": {
+        "headline": "<span aria-hidden='true'>Jetzt kaufen, <br/>später bezahlen</span><span class='sr-only'>Jetzt kaufen, später bezahlen</span>",
+        "disclosure": "Es gelten die Nutzungsbedingungen. Vorbehaltlich Kreditwürdigkeitsprüfung. Für weitere Informationen zur Bezahlung nach 30 Tagen oder PayPal Ratenzahlung wählen Sie eine der obigen Optionen.",
+        "instructions": {
+            "payLater": "Wählen Sie <strong>PayPal</strong>, um <strong>“Später Bezahlen”</strong> zu nutzen."
+        },
+        "productTiles": {
+            "payLater": [
+                {
+                    "header": "Bezahlen Sie nach 30 Tagen",
+                    "body": "Erhalten Sie mehr Zeit, um Ihren Einkauf zu bezahlen.",
+                    "viewName": "PAY_LATER_PAY_IN_1"
+                },
+                {
+                    "header": "PayPal Ratenzahlung",
+                    "body": "Zahlen Sie Ihren Einkauf in monatlichen Raten.",
+                    "viewName": "PAY_LATER_LONG_TERM"
+                }
+            ]
+        }
+    }
+}
diff --git a/content/modals/ES/short_term.json b/content/modals/ES/short_term.json
@@ -7,6 +7,7 @@
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
         "apr": "{apr}",
+        "useV5Design": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

diff --git a/content/modals/ES/short_term_en.json b/content/modals/ES/short_term_en.json
@@ -7,7 +7,7 @@
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
         "apr": "{apr}",
-        "useV4Design": "false",
+        "useV5Design": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

diff --git a/content/modals/FR/short_term.json b/content/modals/FR/short_term.json
@@ -7,6 +7,7 @@
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
         "apr": "{apr}",
+        "useV5Design": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

diff --git a/content/modals/FR/short_term_en.json b/content/modals/FR/short_term_en.json
@@ -7,7 +7,7 @@
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
         "apr": "{apr}",
-        "useV4Design": "false",
+        "useV5Design": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

diff --git a/content/modals/GB/short_term.json b/content/modals/GB/short_term.json
@@ -7,7 +7,6 @@
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
         "apr": "{apr}",
-        "useV4Design": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

diff --git a/content/modals/IT/short_term.json b/content/modals/IT/short_term.json
@@ -10,6 +10,7 @@
         "offerCountry": "IT",
         "creditProductIdentifier": "{credit_product_identifier}",
         "creditType": "{credit_type}",
+        "useV5Design": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

diff --git a/content/modals/IT/short_term_en.json b/content/modals/IT/short_term_en.json
@@ -10,6 +10,7 @@
         "offerCountry": "IT",
         "creditProductIdentifier": "{credit_product_identifier}",
         "creditType": "{credit_type}",
+        "useV5Design": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

diff --git a/content/modals/US/PL2GO/pl2go_long_term.json b/content/modals/US/PL2GO/pl2go_long_term.json
@@ -2,7 +2,7 @@
     "meta": {
         "product": "PAY_LATER_LONG_TERM",
         "offerCountry": "US",
-        "useV4Design": "false",
+        "useV5Design": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",
@@ -33,6 +33,11 @@
             "Shop almost anywhere after receiving a single-use virtual card number.",
             "Pay back what you spend in monthly installments. $0 due today."
         ],
+        "v5Instructions": [
+            "Explore plan options. No sign-up fees or late fees.",
+            "Choose a plan and pay nothing today.",
+            "use autopay for your payments. It's easy!"
+        ],
         "disclosure": [
             "Pay Monthly is subject to consumer credit approval. Payments may change based on shipping, taxes, updates to your purchase, or missed payments. Availability depends on the merchant and may not be available for subscriptions or recurring payments. Pay Monthly is currently not available to residents of AK, HI, or NV</span><span class='sr-only'>Alaska, Hawaii, or Nevada</span>. You must be 18 years old or older to apply. Missed payments may have an impact on your credit score. The lender for Pay Monthly is WebBank. PayPal, Inc. (NMLS #910457): <span aria-hidden='true'>CT</span><span class='sr-only'>Connecticut</span> Small Loan Licensee. <span aria-hidden='true'>RI</span><span class='sr-only'>Rhode Island</span> Loan Broker Licensee. <span aria-hidden='true'>VT</span><span class='sr-only'>Vermont</span> Loan Solicitation Licensee. <span aria-hidden='true'>VT</span><span class='sr-only'>Vermont</span> residents:",
             ["Find more disclosures ", "https://www.paypal.com/us/digital-wallet/ways-to-pay/buy-now-pay-later"],

diff --git a/content/modals/US/PL2GO/pl2go_short_term.json b/content/modals/US/PL2GO/pl2go_short_term.json
@@ -7,7 +7,7 @@
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
         "apr": "{apr}",
-        "useV4Design": "false",
+        "useV5Design": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

diff --git a/content/modals/US/PLHub/plhub_long_term.json b/content/modals/US/PLHub/plhub_long_term.json
@@ -2,7 +2,7 @@
     "meta": {
         "product": "PAY_LATER_LONG_TERM",
         "offerCountry": "US",
-        "useV4Design": "false",
+        "useV5Design": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",
@@ -33,6 +33,11 @@
             "Get a decision in seconds and complete your purchase.",
             "Use autopay for your payments. It's easy!"
         ],
+        "v5Instructions": [
+            "Explore plan options. No sign-up fees or late fees.",
+            "Choose a plan and pay nothing today.",
+            "use autopay for your payments. It's easy!"
+        ],
         "disclosure": [
             "Pay Monthly is subject to consumer credit approval. Payments may change based on shipping, taxes, updates to your purchase, or missed payments. Availability depends on the merchant and may not be available for subscriptions or recurring payments. Pay Monthly is currently not available to residents of <span aria-hidden='true'>AK, HI, or NV</span><span class='sr-only'>Alaska, Hawaii, or Nevada</span>. You must be 18 years old or older to apply. Missed payments may have an impact on your credit score. The lender for Pay Monthly is WebBank. PayPal, Inc. (NMLS #910457): <span aria-hidden='true'>CT</span><span class='sr-only'>Connecticut</span> Small Loan Licensee. <span aria-hidden='true'>RI</span><span class='sr-only'>Rhode Island</span> Loan Broker Licensee. <span aria-hidden='true'>VT</span><span class='sr-only'>Vermont</span> Loan Solicitation Licensee. <span aria-hidden='true'>VT</span><span class='sr-only'>Vermont</span> residents:",
             ["Find more disclosures ", "https://www.paypal.com/us/digital-wallet/ways-to-pay/buy-now-pay-later"],

diff --git a/content/modals/US/PLHub/plhub_short_term.json b/content/modals/US/PLHub/plhub_short_term.json
@@ -7,7 +7,7 @@
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
         "apr": "{apr}",
-        "useV4Design": "false",
+        "useV5Design": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

diff --git a/content/modals/US/v2_long_term.json b/content/modals/US/v2_long_term.json
@@ -1,7 +1,7 @@
 {
     "meta": {
         "product": "PAY_LATER_LONG_TERM",
-        "useV4Design": "false",
+        "useV5Design": "false",
         "offerCountry": "US",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
@@ -33,6 +33,11 @@
             "Get a decision in seconds and complete your purchase.",
             "Use autopay for your payments. It's easy!"
         ],
+        "v5Instructions": [
+            "Explore plan options. No sign-up fees or late fees.",
+            "Choose a plan and pay nothing today.",
+            "Use autopay for your payments. It's easy!"
+        ],
         "disclosure": [
             "Pay Monthly is subject to consumer credit approval. Payments may change based on shipping, taxes, updates to your purchase, or missed payments. Availability depends on the merchant and may not be available for subscriptions or recurring payments. Pay Monthly is currently not available to residents of <span aria-hidden='true'>AK, HI, or NV</span><span class='sr-only'>Alaska, Hawaii, or Nevada</span>. You must be 18 years old or older to apply. Missed payments may have an impact on your credit score. The lender for Pay Monthly is WebBank. PayPal, Inc. (NMLS #910457): <span aria-hidden='true'>CT</span><span class='sr-only'>Connecticut</span> Small Loan Licensee. <span aria-hidden='true'>RI</span><span class='sr-only'>Rhode Island</span> Loan Broker Licensee. <span aria-hidden='true'>VT</span><span class='sr-only'>Vermont</span> Loan Solicitation Licensee. <span aria-hidden='true'>VT</span><span class='sr-only'>Vermont</span> residents:",
             ["Find more disclosures ", "https://www.paypal.com/us/digital-wallet/ways-to-pay/buy-now-pay-later"],

diff --git a/content/modals/US/v2_long_term_xo.json b/content/modals/US/v2_long_term_xo.json
@@ -1,7 +1,7 @@
 {
     "meta": {
         "product": "PAY_LATER_LONG_TERM",
-        "useV4Design": "false",
+        "useV4Design": "true",
         "offerCountry": "US",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",

diff --git a/content/modals/US/v2_product_list.json b/content/modals/US/v2_product_list.json
@@ -1,7 +1,7 @@
 {
     "meta": {
         "product": "PRODUCT_LIST",
-        "useV4Design": "false",
+        "useV5Design": "false",
         "offerCountry": "US"
     },
     "content": {

diff --git a/content/modals/US/v2_short_term.json b/content/modals/US/v2_short_term.json
@@ -1,7 +1,7 @@
 {
     "meta": {
         "product": "PAY_LATER_SHORT_TERM",
-        "useV4Design": "false",
+        "useV5Design": "false",
         "periodicPayment": "{formattedPeriodicPayment}",
         "minAmount": "{minAmount}",
         "maxAmount": "{maxAmount}",

diff --git a/content/modals/US/v2_short_term_xo.json b/content/modals/US/v2_short_term_xo.json
@@ -7,7 +7,7 @@
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
         "apr": "{apr}",
-        "useV4Design": "false",
+        "useV4Design": "true",
         "preapproved": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",

diff --git a/src/components/modal/v2/parts/BodyContent.jsx b/src/components/modal/v2/parts/BodyContent.jsx
@@ -62,13 +62,17 @@ const BodyContent = () => {
     const isQualifying = productMeta?.qualifying;
 
     const useV4Design = productMeta?.useV4Design === 'true';
+    const useV5Design = productMeta?.useV5Design === 'true';
     const useNewCheckoutDesign = features?.includes('new-checkout-design') ? 'true' : 'false';
 
-    // add v4Design class to root html to update lander specific styles to v4
+    // add v4Design or v5Design class to root html to update lander specific styles to v4 or v5 respectively
     const documentClassName = document.documentElement.className;
     if (useV4Design && isLander) {
         document.documentElement.className = `${documentClassName} v4Design`;
     }
+    if (useV5Design && isLander) {
+        document.documentElement.className = `${documentClassName} v5Design`;
+    }
     const isPreapproved = productMeta?.preapproved;
     const preapprovalHeadline = content?.preapproval?.preapprovalHeadline;
     const preapprovalSubHeadline = content?.preapproval?.preapprovalSubHeadline;
@@ -117,8 +121,9 @@ const BodyContent = () => {
                 openProductList={openProductList}
             />
         ),
-        [VIEW_IDS.PRODUCT_LIST]: <ProductList content={content} setViewName={setViewName} />
+        [VIEW_IDS.PRODUCT_LIST]: <ProductList content={content} useV5Design={useV5Design} setViewName={setViewName} />
     };
+
     // IMPORTANT: These elements cannot be nested inside of other elements.
     // They are using very precise CSS position sticky rules that require this
     // specific adjacent DOM structure
@@ -148,10 +153,11 @@ const BodyContent = () => {
                     closeButtonLabel={closeButtonLabel}
                     viewName={viewName}
                     useV4Design={useV4Design}
+                    useV5Design={useV5Design}
                 />
             )}
             <div
-                className={`content__container ${useV4Design ? 'v4Design' : ''} ${
+                className={`content__container ${useV4Design ? 'v4Design' : ''} ${useV5Design ? 'v5Design' : ''} ${
                     useNewCheckoutDesign === 'true' ? 'checkout' : ''
                 }`}
             >

diff --git a/src/components/modal/v2/parts/Calculator.jsx b/src/components/modal/v2/parts/Calculator.jsx
@@ -65,7 +65,14 @@ const getError = ({ offers, error = '' }, isLoading, calculator, amount, country
     return null;
 };
 
-const Calculator = ({ setExpandedState, calculator, aprDisclaimer, useV4Design, useNewCheckoutDesign }) => {
+const Calculator = ({
+    setExpandedState,
+    calculator,
+    aprDisclaimer,
+    useV4Design,
+    useV5Design,
+    useNewCheckoutDesign
+}) => {
     const { view, value, isLoading, submit, changeInput } = useCalculator({ autoSubmit: true });
     const { amount } = useXProps();
     const { country, views } = useServerData();
@@ -183,15 +190,19 @@ const Calculator = ({ setExpandedState, calculator, aprDisclaimer, useV4Design,
     };
 
     return (
-        <div className={`calculator ${useNewCheckoutDesign === 'true' ? 'checkout' : ''}`}>
+        <div
+            className={`calculator ${useNewCheckoutDesign === 'true' ? 'checkout' : ''} ${
+                useV5Design === 'true' ? 'v5Design' : ''
+            }`}
+        >
             <form
                 className={`form ${useV4Design === 'true' ? 'v4Design' : ''} ${
-                    useNewCheckoutDesign === 'true' ? 'checkout' : ''
-                }`}
+                    useV5Design === 'true' ? 'v5Design' : ''
+                } ${useNewCheckoutDesign === 'true' ? 'checkout' : ''}`}
                 onSubmit={submit}
             >
                 <h4 className="title">{title}</h4>
-                <div className="input__wrapper transitional">
+                <div className={`input__wrapper transitional ${useV5Design === 'true' ? 'v5Design' : ''}`}>
                     <label htmlFor="purchase-amount" className={`input__label ${country}`}>
                         {renderInputLabelOnEmptyField(country)}
                     </label>
@@ -217,6 +228,7 @@ const Calculator = ({ setExpandedState, calculator, aprDisclaimer, useV4Design,
                         isLoading={isLoading}
                         aprDisclaimer={aprDisclaimer}
                         useV4Design={useV4Design}
+                        useV5Design={useV5Design}
                         useNewCheckoutDesign={useNewCheckoutDesign}
                     />
                 </div>
@@ -225,7 +237,7 @@ const Calculator = ({ setExpandedState, calculator, aprDisclaimer, useV4Design,
                 <div
                     className={`finance-terms__disclaimer ${
                         !(hasInitialAmount || hasUsedInputField) || error ? 'no-amount' : ''
-                    }`}
+                    } ${useV5Design === 'true' ? 'v5Design' : ''}`}
                 >
                     {aprDisclaimer[0].aprDisclaimer}
                 </div>