Recaptch badge is not shown on PayPal PayflowPro payment form if 'Invisible Badge Position' is 'Bottom Left/Right'

[VasylShvorak]

Preconditions (*)

1. Magento with security-package 1.0-develop
2. Simple product is created
3. Payment PayPal PayflowPro is configured

Note: seems it can be repro only if we enable this reCAPCTHA for Login option and PayPal

Steps to reproduce (*)

1. Configure reCAPTCHA v2 Invisible:

• Enable for Customer Login=reCAPTCHA v2 Invisible
• Enable for PayPal PayflowPro payment form=reCAPTCHA v2 Invisible
• Invisible Badge Position=Bottom Left or Right

2. Add product to cart
3. Go to checkout page
4. On Review & Payments page select Credit Card (Payflow Pro) payment method

Expected result (*)

1. Recaptcha badge is displayed for PayPal PayflowPro payment form

Actual result (*)

1. Recaptcha badge is not shown for PayPal PayflowPro payment form
   

[sdzhepa]

FYI:
@naydav

Result of investigating for this issue:

• seems this issue is not specific for PayPal reCAPCTHA
• "conflict with enabled “Enable for Customer Login”". In some cases Inline badge is not shown on Checkout during login even with disabled reCAPCTHA for PayPal. FYI: @engcom-Delta after fix need to test these flows
• As possible Root Cause Analysis: fix in Add reCAPTCHA to authentication form on Checkout page. #118 leades to the conflict

Thank you @viktym for assistance with this issue

[viktym]

When ReCaptcha is enabled for customer login on the checkout page start rendering at once 2 reCaptcha's components (recaptcha-popup-login, recaptcha-checkout-login)
When reCaptcha for PayPal is enabled we have third component rendering ( recaptcha-checkout-paypal-form)
See

security-package/ReCaptchaCheckout/Block/LayoutProcessor/Checkout/Onepage.php

Line 53 in 9d880c0

$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']

security-package/ReCaptchaCustomer/Plugin/Block/Account/InjectRecaptchaInAuthenticationPopup.php

Line 63 in 7e254a2

if ($this->isCaptchaEnabled->isCaptchaEnabledFor($key)) {

To observe this behavior put a breakpoint here

security-package/ReCaptchaFrontendUi/view/frontend/web/js/reCaptcha.js

Line 122 in 0f19528

widgetId = grecaptcha.render(this.getReCaptchaId(), parameters);

Somehow these multiple renderings prevent displaying the badge when Position is 'Bottom Left/Right'

When only one reCaptcha renders the badge is visible.
To verify that turn off reCaptcha for customer login (since it renders at once two captchas) and you will be able to see that badge for Paypal reCaptcha.

How to solve this conflict and make badge visible when more than one reCaptcha is rendered I didn't find out.

[engcom-Kilo]

Seems issue by Google reCAPTCHA -
if element of reCAPTCHA (v3, v2 invisible) rendering in hidden block,
badge will not visible.