[Bug] the paypal Frame flicker when use onClick to validate form

[2632755669]

🐞 Describe the Bug

A clear and concise description of what the bug is.

onClick: function (data, actions) { if (!validateForm()) { return actions.reject(); }; },
Its purpose is to prevent the user from making the next payment if the verification form fails， But this will cause a Frame flicker problem；

😕 Actual Behavior

1、 The frame will flicker when the user clicks the PayPal button.

🤔 Expected Behavior

it shouldn't show the Frame and close when i click paypal button and execute actions.reject() in the onClick

🌍 Environment

• Node.js/npm: -
• OS: -
• Browser: - chrome

➕ Additional Context

[jshawl]

Another way to handle form validation would be to use actions.disable() inside onInit and listen for events that validate the form, and once valid, call actions.enable()

Here is an example:

paypal.Buttons({
  onInit(data, actions) {
    actions.disable(); // disabled, by default
    document.querySelector("form").addEventListener("change", (e) => {
      if (validateForm()) {
        actions.enable();
      } else {
        actions.disable();
      }
    });
  },
  onClick(data, actions) {
    if (!validateForm()) {
      // show an error message on the form
    }
    // no other code is needed here for the click to initiate the popup checkout flow
  }
}).render("#paypal-button-container");

This page includes complete examples for both client-side and server-side form validation: https://developer.paypal.com/docs/checkout/standard/customize/validate-user-input/

actions.reject() is best used for preventing a payment based on what the buyer enters within the popup, before the payment is approved, e.g. changing their shipping address to an unsupported country. (https://developer.paypal.com/sdk/js/reference/#link-examples)

Let us know if this doesn't solve the issue and we can take another look, thanks!

[knoefel]

@jshawl @wsbrunson I think a common use case is (at least its our use case 😁), that you want to trigger the validation after the user has clicked the paypal submit button. And only after the validation succeeded the popup should open. We are using the adyen integration for paypal and experience a similar flicker of the popup. Any ideas what we can do in this scenario? Here is our react code for setting up the paypal button:

paypal
  .create('paypal', {
    style: { color: 'gold', shape: 'pill', label: 'pay' },
    onClick: async () => {
      const { form, paypal } = get()

      if (!form?.current) return

      form.current.setSubmitting(true)

      const errors = await form.current.validateForm()
      if (!isEmpty(errors)) {
        await form.current.setTouched(setNestedObjectValues(errors, true))

        return false
      }

      paypal?.setState({ input: getInput(form.current.values) })
    },
  })
  .mount(nodes.paypal)

Thanks in advance!

[wsbrunson]

@knoefel I agree completely, this is a common pain-point that comes up with paypal integrations.

Unfortunately, this is not a limitation of the PayPal SDK but the browsers themselves. Once the browsers detect a click, we have less than 1 second (the rules in the browsers can be vague but it basically needs to be immediately) to open the popup window or else it will trigger the browser's adblock and prevent it from opening.

This is why that flicker happens, we have to open it immediately. This is also why the popup first opens to about:blank. We immediately open the popup, run createOrder, then redirect to our checkout app with the order id once createOrder resolves.

[wsbrunson]

This article has a better explanation about this limitation: https://developer.mozilla.org/en-US/docs/Web/Security/User_activation

[knoefel]

@wsbrunson Thanks a lot for the quick and useful reply!!

[Jelly38214]

Hi guys, is there any update for solving the scenario that @knoefel mentioned? Or is there a way to trigger the PayPal button via Javascript? thx.

[wsbrunson]

hi @Jelly38214,

We don't have a way to solve the popup flash when validating onClick because of the nature of 3rd-party popups and User Activation restrictions in browsers.

We currently do not provide a javascript-only mechanism for triggering the PayPal button. In the future, we plan to offer a more flexible integration path for developers, including providing a way to open the Checkout window through javascript. It is unlikely that these changes will happen in the current generation of our SDK though.

I can't speak to any timelines on when this next generation of our SDK will be available, I would make sure to check our developer announcements throughout this year