Can't submit Paypal outside of payment form

Hi! What’s the reason of changes made by this PR 754 You broke our logic by that changes. In our website we’re using one submit button for all payment methods and now we can’t use it or should look for dirty “workarounds”. According to your documentation - there is possibility to disable submit buttons for each method by putting showPayButton: false during adyen-web initialisation and then use just one submit button wherever you wish on page and programatically submit payment form. Would be great if you can review your changes one more time. Thanks!

[pabloai]

Hi @TarasVerbniak, and thanks for reaching out.

The only change introduced in that PR is an addition of an error message when the submit method is called when PayPal is selected. Before the PR, the submit would just fail. The reason for this is that the PayPal SDK doesn’t allow the flow to be triggered programatically, as discussed in paypal/paypal-checkout-components#522.

One thing you could do is to indeed set the showPayButton prop as false to have the chance to select PayPal in the Drop-in but to show the button somewhere else in the page using the PayPal Component.

I hope this clarifies things. Have a nice day, and feel free to reach out again!

[yuzhakovvv]

Here is a rough example from our React codebase:

     const config  = { ... };
     ...
     
     const [isPayPalSelected, setIsPayPalSelected] = useState(false);
     ...

     const dropInCheckout = await AdyenCheckout({
        ...config,
        showPayButton: false,
      });

      const payPalCheckout = await AdyenCheckout({
        ...config,
        showPayButton: true,
      });

      const dropIn = dropInCheckout
        .create("dropin", {
          onSelect: (component: { props: { name: string } }) => {
            setIsPayPalSelected(component.props.name === "PayPal");
          },
        })
        .mount(paymentContainerRef.current);

      payPalCheckout
        .create("paypal")
        .mount(payPalContainerRef.current);

      ...

      return (
         <div>
           <div ref={paymentContainerRef}></div>
          
           <div style={{ display: isPayPalSelected ? "block" : "none" }}>
                <div ref={payPalContainerRef}></div>
           </div>

           <div style={{ display: !isPayPalSelected ? "block" : "none" }}>
                <button onClick={() => { dropIn.submit(); }>Pay</button>
           </div>
         </div>
       );