refactor: 5.1 modal rebrand

content/modals/AU/short_term.json

@@ -7,7 +7,8 @@
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
         "apr": "{apr}",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

content/modals/DE/long_term.json

@@ -2,7 +2,8 @@
     "meta": {
         "product": "PAY_LATER_LONG_TERM",
         "offerCountry": "DE",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

content/modals/DE/long_term_en.json

@@ -3,7 +3,8 @@
         "product": "PAY_LATER_LONG_TERM",
         "offerCountry": "DE",
         "language": "en-DE",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

content/modals/DE/pay_in_1.json

@@ -1,7 +1,8 @@
 {
     "meta": {
         "offerCountry": "DE",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "periodicPayment": "{formattedPeriodicPayment}",
         "product": "PAY_LATER_PAY_IN_1",
         "minAmount": "{minAmount}",

content/modals/DE/pay_in_1_en.json

@@ -2,7 +2,8 @@
     "meta": {
         "offerCountry": "DE",
         "language": "en-DE",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "periodicPayment": "{formattedPeriodicPayment}",
         "product": "PAY_LATER_PAY_IN_1",
         "minAmount": "{minAmount}",

content/modals/DE/product_list.json

@@ -1,7 +1,8 @@
 {
     "meta": {
         "product": "PRODUCT_LIST",
-        "useV5Design": "false"
+        "useV5Design": "true",
+        "v5.1": "true"
     },
     "content": {
         "headline": "<span aria-hidden='true'>Jetzt kaufen, <br/>später bezahlen</span><span class='sr-only'>Jetzt kaufen, später bezahlen</span>",

content/modals/ES/short_term.json

@@ -7,7 +7,8 @@
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
         "apr": "{apr}",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

content/modals/ES/short_term_en.json

@@ -7,7 +7,8 @@
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
         "apr": "{apr}",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

content/modals/FR/short_term.json

@@ -7,7 +7,8 @@
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
         "apr": "{apr}",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

content/modals/FR/short_term_en.json

@@ -7,7 +7,8 @@
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
         "apr": "{apr}",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

content/modals/GB/short_term.json

@@ -6,7 +6,8 @@
         "maxAmount": "{maxAmount}",
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "apr": "{apr}",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",

content/modals/IT/short_term.json

@@ -10,7 +10,8 @@
         "offerCountry": "IT",
         "creditProductIdentifier": "{credit_product_identifier}",
         "creditType": "{credit_type}",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

content/modals/IT/short_term_en.json

@@ -10,7 +10,8 @@
         "offerCountry": "IT",
         "creditProductIdentifier": "{credit_product_identifier}",
         "creditType": "{credit_type}",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

content/modals/US/PL2GO/pl2go_long_term.json

@@ -2,7 +2,8 @@
     "meta": {
         "product": "PAY_LATER_LONG_TERM",
         "offerCountry": "US",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

content/modals/US/PL2GO/pl2go_short_term.json

@@ -7,7 +7,8 @@
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
         "apr": "{apr}",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

content/modals/US/PLHub/plhub_long_term.json

@@ -2,7 +2,8 @@
     "meta": {
         "product": "PAY_LATER_LONG_TERM",
         "offerCountry": "US",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

content/modals/US/PLHub/plhub_short_term.json

@@ -7,7 +7,8 @@
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
         "apr": "{apr}",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",
@@ -36,6 +37,6 @@
         "disclosure": [
             "Pay in 4 is available to consumers upon approval for purchases of {formattedMinAmount} to {formattedMaxAmount}. Pay in 4 is not currently available to residents of <span aria-hidden='true'>MO, NV, or NM</span><span class='sr-only'>Missouri, Nevada, or New Mexico</span>. Offer availability depends on the merchant and also may not be available for certain recurring, subscription services. When applying, a soft credit check may be needed, but will not affect your credit score. You must be of legal age in your U.S. state of residence to use Pay in 4. Loans to California residents are made or arranged pursuant to a California Financing Law License. PayPal, Inc. is a Georgia Installment Lender Licensee, NMLS #910457. Rhode Island Small Loan Lender Licensee."
         ],
-        "linkToProductList": "See other ways to pay later"
+        "linkToProductList": "See other ways to pay over time"
     }
 }

content/modals/US/long_term_df.json

@@ -3,6 +3,7 @@
         "product": "PAY_LATER_LONG_TERM",
         "offerCountry": "US",
         "useV5Design": "true",
+        "v5.1": "true",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

content/modals/US/v2_long_term.json

@@ -1,7 +1,8 @@
 {
     "meta": {
         "product": "PAY_LATER_LONG_TERM",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "offerCountry": "US",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",

content/modals/US/v2_ppc_ni.json

@@ -2,6 +2,8 @@
     "meta": {
         "offerCountry": "US",
         "product": "PAYPAL_CREDIT_NO_INTEREST",
+        "useV5Design": "true",
+        "v5.1": "true",
         "periodicPayment": "{formattedPeriodicPayment}",
         "minAmount": "{minAmount}",
         "maxAmount": "{maxAmount}",
@@ -49,6 +51,6 @@
             ],
             ["Copyright {fullYear} Bill Me Later, Inc. All rights reserved."]
         ],
-        "linkToProductList": "See other ways to pay later"
+        "linkToProductList": "See other ways to pay over time"
     }
 }

content/modals/US/v2_product_list.json

@@ -1,7 +1,8 @@
 {
     "meta": {
         "product": "PRODUCT_LIST",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "offerCountry": "US"
     },
     "content": {

content/modals/US/v2_short_term.json

@@ -1,7 +1,8 @@
 {
     "meta": {
         "product": "PAY_LATER_SHORT_TERM",
-        "useV5Design": "false",
+        "useV5Design": "true",
+        "v5.1": "true",
         "periodicPayment": "{formattedPeriodicPayment}",
         "minAmount": "{minAmount}",
         "maxAmount": "{maxAmount}",
@@ -36,6 +37,6 @@
         "disclosure": [
             "Pay in 4 is available to consumers upon approval for purchases of {formattedMinAmount} to {formattedMaxAmount}. Pay in 4 is currently not available to residents of <span aria-hidden='true'>MO, NV, or NM</span><span class='sr-only'>Missouri, Nevada, or New Mexico</span>. Offer availability depends on the merchant and also may not be available for certain recurring, subscription services.​ When applying, a soft credit check may be needed, but will not affect your credit score.​ You must be of legal age in your U.S. state of residence to use Pay in 4.​ PayPal, Inc.: Loans to <span aria-hidden='true'>CA</span><span class='sr-only'>California</span> residents are made or arranged pursuant to <span aria-hidden='true'>CA</span><span class='sr-only'>California</span> Financing Law License.​ <span aria-hidden='true'>GA</span><span class='sr-only'>Georgia</span> Installment Lender Licensee, NMLS #910457.​ <span aria-hidden='true'>RI</span><span class='sr-only'>Rhode Island</span> Small Loan Lender Licensee."
         ],
-        "linkToProductList": "See other ways to pay later"
+        "linkToProductList": "See other ways to pay over time"
     }
 }

content/offers/DE/long_term.json

@@ -13,6 +13,7 @@
         "total_payments": "{total_payments}",
         "formattedTotalCost": "{formattedTotalCost}",
         "formattedTotalInterest": "{formattedTotalInterest}",
+        "formattedTransactionAmount": "{formattedTransactionAmount}",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

content/offers/DE/long_term_en.json

@@ -13,6 +13,7 @@
         "total_payments": "{total_payments}",
         "formattedTotalCost": "{formattedTotalCost}",
         "formattedTotalInterest": "{formattedTotalInterest}",
+        "formattedTransactionAmount": "{formattedTransactionAmount}",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",

demo/index.html

@@ -4,20 +4,19 @@
         <title>Messages Dev Sandbox</title>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-        <script src="//localhost.paypal.com:8080/sdk/js?client-id=DEV_US_MULTI&components=messages"></script>
+        <script>
+            window.__TEST_ENV__ = 'https://www.msmaster.qa.paypal.com';
+        </script>
+        <script src="https://www.msmaster.qa.paypal.com/sdk/js?client-id=B_AFccMdMuxDJXveYSon7w-PMTQ_aLJPy3b1Q4rz4K9iDYHi8fjX80yGEzQ2-gSHQhJVmCiO7Yp6Q3Kfow&debug=true&components=messages&stage-alias=https://cdn-culs_auth_01.static.engineering.dev.paypalinc.com/upstream/bizcomponents/stage/package.tgz"></script>
     </head>
     <body>
         <div class="messages" data-pp-message></div>
         <script>
-            // paypal
-            //     .Messages({
-            //         style: {
-            //             layout: 'flex',
-            //             ratio: '8x1',
-            //             color: 'blue'
-            //         }
-            //     })
-            //     .render('.messages');
+            paypal
+                .Messages({
+                    amount: '500'
+                })
+                .render('.messages');
         </script>
     </body>
 </html>

demo/standalone-modal.html

@@ -4,13 +4,25 @@
         <title>Standalone Modal Sandbox</title>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-        <script src="//localhost.paypal.com:8080/modal.js"></script>
+        <!-- <script src="//localhost.paypal.com:8080/modal.js"></script> -->
+        <script>
+            window.__TEST_ENV__ = 'https://msmaster.qa.paypal.com';
+        </script>
+        <script
+            src="https://cdn-5_1_rebrand_us_01.static.engineering.dev.paypalinc.com/upstream/bizcomponents/stage/modal.js"
+            data-pp-account="9DZUAPZS6JM5E"
+        ></script>
     </head>
     <body>
         <button class="learn-more">Learn more</button>
         <script>
             const modal = window.paypal.MessagesModal({
-                account: 'DEV_US_MULTI'
+                // account: 'DEV_US_LONG_TERM_DF',
+                amount: '600',
+                channel: 'DEBIT_FLIP',
+                customerId: 'W9WK2RH9RWWQC'
+                // offer: 'PAY_LATER_SHORT_TERM'
+                // features: 'new-checkout-design',
             });
             document.querySelector('.learn-more').addEventListener('click', () => {
                 modal.show();

demo/standalone.html

@@ -4,22 +4,36 @@
         <title>Messaging.js Dev Sandbox</title>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-        <script src="//localhost.paypal.com:8080/messaging.js" data-pp-account="DEV_US_MULTI"></script>
+        <script>
+            window.__TEST_ENV__ = 'https://www.msmaster.qa.paypal.com';
+        </script>
+        <script
+            src="https://cdn-op_only_json_00.static.engineering.dev.paypalinc.com/upstream/bizcomponents/stage/messaging.js"
+            data-pp-account="9DZUAPZS6JM5E"
+        ></script>
     </head>
 
     <body>
-        <div class="messages" data-pp-message></div>
+        <div
+            class="messages"
+            data-pp-message
+            data-pp-amount="1000"
+            data-pp-style-layout="text"
+            data-pp-style-layout="black"
+            data-pp-style-logo-type="primary"
+            data-pp-style-logo-position="left"
+        ></div>
         <script>
-            // paypal
-            //     .Messages({
-            //         style: {
-            //             layout: 'text',
-            //             logo: {
-            //                 type: 'none'
-            //             }
-            //         },
-            //     })
-            //     .render('.messages');
+            paypal
+                .Messages({
+                    style: {
+                        layout: 'text',
+                        logo: {
+                            type: 'none'
+                        }
+                    }
+                })
+                .render('.messages');
         </script>
     </body>
 </html>