diff --git a/.bundlemonrc.json b/.bundlemonrc.json
index 50a9b111bb..dd2e80f69b 100644
--- a/.bundlemonrc.json
+++ b/.bundlemonrc.json
@@ -4,7 +4,7 @@
{
"path": "size.min.js",
"compression": "gzip",
- "maxPercentIncrease": 3,
+ "maxPercentIncrease": 3.6,
"maxSize": "76kb"
}
],
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a5bde607b0..3d9e793b3e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 5.0.285 (2023-11-07)
+
+* Venmo overlay (#2271) ([294709b](https://github.com/paypal/paypal-checkout-components/commit/294709b)), closes [#2271](https://github.com/paypal/paypal-checkout-components/issues/2271)
+
+
+
## 5.0.284 (2023-11-02)
* Update CODE_OF_CONDUCT.md (#2268) ([6caee02](https://github.com/paypal/paypal-checkout-components/commit/6caee02)), closes [#2268](https://github.com/paypal/paypal-checkout-components/issues/2268)
diff --git a/package.json b/package.json
index 4e89d13526..90b10aed63 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@paypal/checkout-components",
- "version": "5.0.284",
+ "version": "5.0.285",
"description": "PayPal Checkout components, for integrating checkout products.",
"main": "index.js",
"scripts": {
diff --git a/src/zoid/checkout/component.jsx b/src/zoid/checkout/component.jsx
index 3c1370a6df..279227fd31 100644
--- a/src/zoid/checkout/component.jsx
+++ b/src/zoid/checkout/component.jsx
@@ -27,7 +27,11 @@ import {
inlineMemoize,
} from "@krakenjs/belter/src";
import { FUNDING } from "@paypal/sdk-constants/src";
-import { SpinnerPage, Overlay } from "@paypal/common-components/src";
+import {
+ SpinnerPage,
+ Overlay,
+ VenmoOverlay,
+} from "@paypal/common-components/src";
import { getSessionID } from "../../lib";
import { containerContent } from "../content";
@@ -81,20 +85,38 @@ export function getCheckoutComponent(): CheckoutComponent {
const {
nonce,
locale: { lang },
+ fundingSource,
} = props;
- const content = containerContent("PayPal")[lang];
- return (
-
- ).render(dom({ doc }));
+ const isVenmo = fundingSource === FUNDING.VENMO;
+ const browserLanguage = isVenmo ? "en" : lang;
+ const content = containerContent(fundingSource)[browserLanguage];
+ if (isVenmo) {
+ return (
+
+ ).render(dom({ doc }));
+ } else {
+ return (
+
+ ).render(dom({ doc }));
+ }
},
props: {
@@ -197,6 +219,7 @@ export function getCheckoutComponent(): CheckoutComponent {
type: "string",
queryParam: true,
default: () => FUNDING.PAYPAL,
+ allowDelegate: true,
},
standaloneFundingSource: {
diff --git a/src/zoid/content.js b/src/zoid/content.js
index 3c5aff1d54..6337181aa2 100644
--- a/src/zoid/content.js
+++ b/src/zoid/content.js
@@ -1,162 +1,178 @@
/* @flow */
/* eslint max-lines: 0 */
-import { LANG } from "@paypal/sdk-constants/src";
+import { LANG, FUNDING } from "@paypal/sdk-constants/src";
type ContentMap = {
[$Values]: {|
windowMessage?: string,
continueMessage?: string,
+ cancelMessage?: string,
+ interrogativeMessage?: string,
|},
};
-export const containerContent: (string) => ContentMap = (fundingSource) => ({
- ar: {
- windowMessage: `لا ترى متصفح ${fundingSource} الآمن؟ سنساعدك في إعادة فتح النافذة لاستكمال مشترياتك`,
- continueMessage: `متابعة`,
- },
- bg: {
- windowMessage: `Не виждате защитения браузър на ${fundingSource}? Ще ви помогнем да отворите отново прозореца, за да завършите покупката си`,
- continueMessage: `Щракнете, за да продължите`,
- },
- cs: {
- windowMessage: `Nezobrazuje se vám bezpečný prohlížeč ${fundingSource}? Pomůžeme vám okno znovu otevřít, abyste mohli nákup dokončit`,
- continueMessage: `Pokračovat`,
- },
- da: {
- windowMessage: `Kan du ikke se ${fundingSource}s sikre browser? Vi hjælper dig med at genstarte vinduet, så du kan betale`,
- continueMessage: `Fortsæt`,
- },
- de: {
- windowMessage: `Sie sehen das sichere Browserfenster von ${fundingSource} nicht? Hier können Sie es wieder öffnen und Ihren Einkauf abschließen`,
- continueMessage: `Weiter`,
- },
- el: {
- windowMessage: `Δεν βλέπετε το ασφαλές πρόγραμμα περιήγησης ${fundingSource}; Θα σας βοηθήσουμε να επανεκκινήσετε το παράθυρο για να ολοκληρώσετε την αγορά σας`,
- continueMessage: `Συνέχεια`,
- },
- en: {
- windowMessage: `Don’t see the secure ${fundingSource} browser? We’ll help you re-launch the window to complete your purchase`,
- continueMessage: `Click to Continue`,
- },
- es: {
- windowMessage: `¿No ve el navegador seguro de ${fundingSource}? Abriremos la ventana nuevamente para que pueda completar su compra`,
- continueMessage: `Continuar`,
- },
- et: {
- windowMessage: `Kas te ei näe turvalist ${fundingSource}i lehitsejat? Aitame teil ostu lõpuleviimiseks akna uuesti avada.`,
- continueMessage: `Jätkamiseks klõpsake`,
- },
- fi: {
- windowMessage: `Eikö suojattua ${fundingSource}-selainta näy? Autamme avaamaan ikkunan uudelleen oston viimeistelyä varten`,
- continueMessage: `Jatka`,
- },
- fr: {
- windowMessage: `Le navigateur sécurisé de ${fundingSource} n’apparaît pas ? Nous allons vous aider à rouvrir la fenêtre pour finaliser votre achat`,
- continueMessage: `Continuer`,
- },
- he: {
- windowMessage: `לא רואה את דפדפן ${fundingSource} המאובטח? נעזור לך לפתוח מחדש את החלון כדי להשלים את הקנייה שלך`,
- continueMessage: `המשך`,
- },
- hu: {
- windowMessage: `Nem látja a biztonságos ${fundingSource}-böngészőt? Segítünk újra betölteni az ablakot, hogy befejezhesse a vásárlást`,
- continueMessage: `Folytatás`,
- },
- id: {
- windowMessage: `Browser ${fundingSource} yang aman tidak terlihat? Kami akan membantu menampilkan ulang jendela untuk menyelesaikan pembayaran Anda`,
- continueMessage: `Lanjutkan`,
- },
- it: {
- windowMessage: `Non vedi la pagina sicura di ${fundingSource}? Ti aiuteremo a riaprire la finestra per completare l’acquisto`,
- continueMessage: `Continua`,
- },
- ja: {
- windowMessage: `セキュアなブラウザが表示されない場合は、ウィンドウを再起動して、支払いを完了できるようお手伝いいたします`,
- continueMessage: `続行`,
- },
- ko: {
- windowMessage: `보안 ${fundingSource} 브라우저가 보이지 않으신가요? 창을 다시 실행하여 결제를 완료할 수 있도록 도와드리겠습니다`,
- continueMessage: `계속`,
- },
- lt: {
- windowMessage: `Nematote saugios „${fundingSource}“ naršyklės? Padėsime iš naujo paleisti langą, kad užbaigtumėte pirkimą`,
- continueMessage: `Paspauskite, jei norite tęsti`,
- },
- lv: {
- windowMessage: `Vai neredzat drošo ${fundingSource} pārlūkprogrammu? Mēs palīdzēsim jums atkārtoti palaist logu, lai pabeigtu pirkumu.`,
- continueMessage: `Noklikšķiniet, lai turpinātu`,
- },
- ms: {
- windowMessage: `Tidak melihat pelayar ${fundingSource} yang selamat? Kami akan membantu anda melancarkan semula tetingkap untuk melengkapkan pembelian anda`,
- continueMessage: `Klik untuk Meneruskan`,
- },
- no: {
- windowMessage: `Ser du ikke den sikre ${fundingSource}-nettleseren? Vi hjelper deg med å starte vinduet på nytt så du kan fullføre kjøpet`,
- continueMessage: `Fortsett`,
- },
- nl: {
- windowMessage: `Ziet u de beveiligde ${fundingSource}-browser niet? We helpen u het venster opnieuw te openen om uw aankoop te voltooien`,
- continueMessage: `Doorgaan`,
- },
- pl: {
- windowMessage: `Nie widzisz bezpiecznej przeglądarki ${fundingSource}? Pomożemy Ci ponownie uruchomić to okno w celu dokonania zakupu`,
- continueMessage: `Kontynuuj`,
- },
- pt: {
- windowMessage: `Não está vendo o navegador seguro do ${fundingSource}? Ajudaremos você a reabrir a janela para concluir a compra`,
- continueMessage: `Continuar`,
- },
- ro: {
- windowMessage: `Nu vezi browser-ul securizat ${fundingSource}? Te vom ajuta să lansezi din nou fereastra pentru a finaliza achiziția`,
- continueMessage: `Dă clic pentru a continua`,
- },
- ru: {
- windowMessage: `Не отображается безопасная страница ${fundingSource} в браузере? Мы поможем вам повторно загрузить окно, чтобы завершить покупку`,
- continueMessage: `Продолжить`,
- },
- si: {
- windowMessage: `ආරක්ෂිත ${fundingSource} බ්රව්සරය නොපෙනේ ද? ඔබේ මිල දී ගැනීම සම්පූර්ණ කිරීම සඳහා අපි ඔබට කවුළුව නැවත දියත් කිරීමට උපකාර කරන්නෙමු`,
- continueMessage: `ඉදිරියට යාමට ක්ලික් කරන්න`,
- },
- sk: {
- windowMessage: `Nezobrazuje sa vám zabezpečený prehliadač ${fundingSource}? Pomôžeme vám znova otvoriť okno, aby ste mohli nákup dokončiť`,
- continueMessage: `Pokračovať`,
- },
- sl: {
- windowMessage: `Ne vidite ${fundingSource}ovega varnega brskalnika? Pomagali vam bomo ponovno zagnati okno za dokončanje nakupa`,
- continueMessage: `Kliknite za nadaljevanje`,
- },
- sq: {
- windowMessage: `Nuk e shikon shfletuesin e sigurt të ${fundingSource}? Do të të ndihmojmë të rihapësh dritaren për të përfunduar blerjen`,
- continueMessage: `Kliko për të vazhduar`,
- },
- sv: {
- windowMessage: `Ser du inte den säkra ${fundingSource}-webbläsaren? Vi hjälper dig att starta om fönstret för att slutföra ditt köp`,
- continueMessage: `Fortsätt`,
- },
- th: {
- windowMessage: `ถ้าคุณไม่เห็นเบราว์เซอร์ที่มีระบบความปลอดภัยของ ${fundingSource} เราจะช่วยคุณเปิดหน้าต่างอีกครั้งเพื่อชำระเงินให้เรียบร้อย`,
- continueMessage: `ดำเนินการต่อ`,
- },
- tl: {
- windowMessage: `Hindi nakikita ang secure na ${fundingSource} browser? Tutulungan ka naming i-launch ulit ang window para makumpleto ang pagbili mo.`,
- continueMessage: `I-click para Magpatuloy`,
- },
- tr: {
- windowMessage: `Güvenli ${fundingSource} tarayıcısını görmüyor musunuz? Alışverişinizi tamamlamak için pencereyi yeniden başlatmanıza yardımcı olacağız`,
- continueMessage: `Devam`,
- },
- vi: {
- windowMessage: `Bạn không thấy trình duyệt ${fundingSource} bảo mật? Chúng tôi sẽ giúp bạn mở lại cửa sổ để hoàn tất giao dịch mua hàng`,
- continueMessage: `Nhấp để tiếp tục`,
- },
- zh: {
- windowMessage: `没有找到安全的${fundingSource}浏览器?我们将帮助您重启窗口以完成付款`,
- continueMessage: `继续`,
- },
- zh_Hant: {
- windowMessage: `看不到安全 ${fundingSource} 瀏覽器?我們會協助你重新啟動視窗,以完成購物程序`,
- continueMessage: `按一下並繼續`,
- },
-});
+export const containerContent: (string) => ContentMap = (fundingSource) => {
+ if (fundingSource === FUNDING.VENMO) {
+ return {
+ en: {
+ windowMessage:
+ "Tap cancel payment to cancel and return to the business. Continue payment will relaunch the payment window.",
+ continueMessage: "Continue payment",
+ cancelMessage: "Cancel payment",
+ interrogativeMessage: "What would you like to do?",
+ },
+ };
+ } else {
+ return {
+ ar: {
+ windowMessage: `لا ترى متصفح ${fundingSource} الآمن؟ سنساعدك في إعادة فتح النافذة لاستكمال مشترياتك`,
+ continueMessage: `متابعة`,
+ },
+ bg: {
+ windowMessage: `Не виждате защитения браузър на ${fundingSource}? Ще ви помогнем да отворите отново прозореца, за да завършите покупката си`,
+ continueMessage: `Щракнете, за да продължите`,
+ },
+ cs: {
+ windowMessage: `Nezobrazuje se vám bezpečný prohlížeč ${fundingSource}? Pomůžeme vám okno znovu otevřít, abyste mohli nákup dokončit`,
+ continueMessage: `Pokračovat`,
+ },
+ da: {
+ windowMessage: `Kan du ikke se ${fundingSource}s sikre browser? Vi hjælper dig med at genstarte vinduet, så du kan betale`,
+ continueMessage: `Fortsæt`,
+ },
+ de: {
+ windowMessage: `Sie sehen das sichere Browserfenster von ${fundingSource} nicht? Hier können Sie es wieder öffnen und Ihren Einkauf abschließen`,
+ continueMessage: `Weiter`,
+ },
+ el: {
+ windowMessage: `Δεν βλέπετε το ασφαλές πρόγραμμα περιήγησης ${fundingSource}; Θα σας βοηθήσουμε να επανεκκινήσετε το παράθυρο για να ολοκληρώσετε την αγορά σας`,
+ continueMessage: `Συνέχεια`,
+ },
+ en: {
+ windowMessage: `Don’t see the secure ${fundingSource} browser? We’ll help you re-launch the window to complete your purchase`,
+ continueMessage: `Click to Continue`,
+ },
+ es: {
+ windowMessage: `¿No ve el navegador seguro de ${fundingSource}? Abriremos la ventana nuevamente para que pueda completar su compra`,
+ continueMessage: `Continuar`,
+ },
+ et: {
+ windowMessage: `Kas te ei näe turvalist ${fundingSource}i lehitsejat? Aitame teil ostu lõpuleviimiseks akna uuesti avada.`,
+ continueMessage: `Jätkamiseks klõpsake`,
+ },
+ fi: {
+ windowMessage: `Eikö suojattua ${fundingSource}-selainta näy? Autamme avaamaan ikkunan uudelleen oston viimeistelyä varten`,
+ continueMessage: `Jatka`,
+ },
+ fr: {
+ windowMessage: `Le navigateur sécurisé de ${fundingSource} n’apparaît pas ? Nous allons vous aider à rouvrir la fenêtre pour finaliser votre achat`,
+ continueMessage: `Continuer`,
+ },
+ he: {
+ windowMessage: `לא רואה את דפדפן ${fundingSource} המאובטח? נעזור לך לפתוח מחדש את החלון כדי להשלים את הקנייה שלך`,
+ continueMessage: `המשך`,
+ },
+ hu: {
+ windowMessage: `Nem látja a biztonságos ${fundingSource}-böngészőt? Segítünk újra betölteni az ablakot, hogy befejezhesse a vásárlást`,
+ continueMessage: `Folytatás`,
+ },
+ id: {
+ windowMessage: `Browser ${fundingSource} yang aman tidak terlihat? Kami akan membantu menampilkan ulang jendela untuk menyelesaikan pembayaran Anda`,
+ continueMessage: `Lanjutkan`,
+ },
+ it: {
+ windowMessage: `Non vedi la pagina sicura di ${fundingSource}? Ti aiuteremo a riaprire la finestra per completare l’acquisto`,
+ continueMessage: `Continua`,
+ },
+ ja: {
+ windowMessage: `セキュアなブラウザが表示されない場合は、ウィンドウを再起動して、支払いを完了できるようお手伝いいたします`,
+ continueMessage: `続行`,
+ },
+ ko: {
+ windowMessage: `보안 ${fundingSource} 브라우저가 보이지 않으신가요? 창을 다시 실행하여 결제를 완료할 수 있도록 도와드리겠습니다`,
+ continueMessage: `계속`,
+ },
+ lt: {
+ windowMessage: `Nematote saugios „${fundingSource}“ naršyklės? Padėsime iš naujo paleisti langą, kad užbaigtumėte pirkimą`,
+ continueMessage: `Paspauskite, jei norite tęsti`,
+ },
+ lv: {
+ windowMessage: `Vai neredzat drošo ${fundingSource} pārlūkprogrammu? Mēs palīdzēsim jums atkārtoti palaist logu, lai pabeigtu pirkumu.`,
+ continueMessage: `Noklikšķiniet, lai turpinātu`,
+ },
+ ms: {
+ windowMessage: `Tidak melihat pelayar ${fundingSource} yang selamat? Kami akan membantu anda melancarkan semula tetingkap untuk melengkapkan pembelian anda`,
+ continueMessage: `Klik untuk Meneruskan`,
+ },
+ no: {
+ windowMessage: `Ser du ikke den sikre ${fundingSource}-nettleseren? Vi hjelper deg med å starte vinduet på nytt så du kan fullføre kjøpet`,
+ continueMessage: `Fortsett`,
+ },
+ nl: {
+ windowMessage: `Ziet u de beveiligde ${fundingSource}-browser niet? We helpen u het venster opnieuw te openen om uw aankoop te voltooien`,
+ continueMessage: `Doorgaan`,
+ },
+ pl: {
+ windowMessage: `Nie widzisz bezpiecznej przeglądarki ${fundingSource}? Pomożemy Ci ponownie uruchomić to okno w celu dokonania zakupu`,
+ continueMessage: `Kontynuuj`,
+ },
+ pt: {
+ windowMessage: `Não está vendo o navegador seguro do ${fundingSource}? Ajudaremos você a reabrir a janela para concluir a compra`,
+ continueMessage: `Continuar`,
+ },
+ ro: {
+ windowMessage: `Nu vezi browser-ul securizat ${fundingSource}? Te vom ajuta să lansezi din nou fereastra pentru a finaliza achiziția`,
+ continueMessage: `Dă clic pentru a continua`,
+ },
+ ru: {
+ windowMessage: `Не отображается безопасная страница ${fundingSource} в браузере? Мы поможем вам повторно загрузить окно, чтобы завершить покупку`,
+ continueMessage: `Продолжить`,
+ },
+ si: {
+ windowMessage: `ආරක්ෂිත ${fundingSource} බ්රව්සරය නොපෙනේ ද? ඔබේ මිල දී ගැනීම සම්පූර්ණ කිරීම සඳහා අපි ඔබට කවුළුව නැවත දියත් කිරීමට උපකාර කරන්නෙමු`,
+ continueMessage: `ඉදිරියට යාමට ක්ලික් කරන්න`,
+ },
+ sk: {
+ windowMessage: `Nezobrazuje sa vám zabezpečený prehliadač ${fundingSource}? Pomôžeme vám znova otvoriť okno, aby ste mohli nákup dokončiť`,
+ continueMessage: `Pokračovať`,
+ },
+ sl: {
+ windowMessage: `Ne vidite ${fundingSource}ovega varnega brskalnika? Pomagali vam bomo ponovno zagnati okno za dokončanje nakupa`,
+ continueMessage: `Kliknite za nadaljevanje`,
+ },
+ sq: {
+ windowMessage: `Nuk e shikon shfletuesin e sigurt të ${fundingSource}? Do të të ndihmojmë të rihapësh dritaren për të përfunduar blerjen`,
+ continueMessage: `Kliko për të vazhduar`,
+ },
+ sv: {
+ windowMessage: `Ser du inte den säkra ${fundingSource}-webbläsaren? Vi hjälper dig att starta om fönstret för att slutföra ditt köp`,
+ continueMessage: `Fortsätt`,
+ },
+ th: {
+ windowMessage: `ถ้าคุณไม่เห็นเบราว์เซอร์ที่มีระบบความปลอดภัยของ ${fundingSource} เราจะช่วยคุณเปิดหน้าต่างอีกครั้งเพื่อชำระเงินให้เรียบร้อย`,
+ continueMessage: `ดำเนินการต่อ`,
+ },
+ tl: {
+ windowMessage: `Hindi nakikita ang secure na ${fundingSource} browser? Tutulungan ka naming i-launch ulit ang window para makumpleto ang pagbili mo.`,
+ continueMessage: `I-click para Magpatuloy`,
+ },
+ tr: {
+ windowMessage: `Güvenli ${fundingSource} tarayıcısını görmüyor musunuz? Alışverişinizi tamamlamak için pencereyi yeniden başlatmanıza yardımcı olacağız`,
+ continueMessage: `Devam`,
+ },
+ vi: {
+ windowMessage: `Bạn không thấy trình duyệt ${fundingSource} bảo mật? Chúng tôi sẽ giúp bạn mở lại cửa sổ để hoàn tất giao dịch mua hàng`,
+ continueMessage: `Nhấp để tiếp tục`,
+ },
+ zh: {
+ windowMessage: `没有找到安全的${fundingSource}浏览器?我们将帮助您重启窗口以完成付款`,
+ continueMessage: `继续`,
+ },
+ zh_Hant: {
+ windowMessage: `看不到安全 ${fundingSource} 瀏覽器?我們會協助你重新啟動視窗,以完成購物程序`,
+ continueMessage: `按一下並繼續`,
+ },
+ };
+ }
+};
diff --git a/src/zoid/venmo/component.jsx b/src/zoid/venmo/component.jsx
index 24b3cb8ed5..763237e49b 100644
--- a/src/zoid/venmo/component.jsx
+++ b/src/zoid/venmo/component.jsx
@@ -27,7 +27,7 @@ import {
inlineMemoize,
} from "@krakenjs/belter/src";
import { FUNDING } from "@paypal/sdk-constants/src";
-import { SpinnerPage, Overlay } from "@paypal/common-components/src";
+import { SpinnerPage, VenmoOverlay } from "@paypal/common-components/src";
import { getSessionID } from "../../lib";
import { containerContent } from "../content";
@@ -74,13 +74,10 @@ export function getVenmoCheckoutComponent(): VenmoCheckoutComponent {
prerenderFrame,
props,
}) => {
- const {
- nonce,
- locale: { lang },
- } = props;
- const content = containerContent("Venmo")[lang];
+ const { nonce } = props;
+ const content = containerContent("venmo").en;
return (
-