Paypal-checkout-components: "disabled" state for paypal button

[colthreepv]

I have a long frontend form that has interactive validation, and at the moment it has a "pay now" button that is disabled until the form is valid.

I would like to add a Paypal button to this form and have the same behaviour; because of the iFrame/div anchor thing I was thinking about 2 possible ways:

Plan A
Instead of making a an empty anchor div <div id="paypal-button"></div> I would put a button inside the anchor using the same styles, but disabled.
When the order is valid, the amount is calculated server-side, and I would invoke Button.render() on the anchor, replacing the "fake disabled paypal button" with a valid iframe button.
problem: missing disabled state in the styles 😢

Plan B
Make an empty anchor div, invoke Button.render() with "empty/disabled" values, just to get the button to be displayed in the page.
When the order is valid, the amount is calculated server-side, and I would invoke Button.render() again with valid informations
problem: I don't think the library has such options (to render a disabled button)

Am I missing something simpler?

[bluepnume]

Hey @colthreepv -- you can selectively enable or disable the paypal button -- there's a demo here: https://developer.paypal.com/demo/checkout/#/pattern/validation

Please let me know if that doesn't work for your use-cases.

[colthreepv]

Yes I am using this option, but the user has no visual feedback.
I was hoping to give them a disable button with the classic 🚫 mouse icon and the greyed out button

[bluepnume]

Yeah, right now it doesn't give visual feedback, as it may need to be clicked to trigger validation messages (like in the example page above).

Let me think about how it would be best to disable the button with a greyed-out style too -- many with an option passed to actions.disable()...

[TopsyCM]

Is the validate option for Button.render documented anywhere?

[bluepnume]

There's an example here: https://developer.paypal.com/demo/checkout/#/pattern/validation

Generally speaking:

1. Add a validate(actions) { ... } handler
2. In validate, listen for changes to form fields / user inputs
3. When the page becomes valid, call actions.enable();
4. When the page becomes invalid, call actions.disable();
5. To trigger validation messages on click of the button, add an onClick() handler

[TopsyCM]

Yes, I saw the example and inferred as much, but I could not find the actions argument explained in the API documentation. I just wanted to be sure I was interpreting the example correctly.

[ionutvmi]

Hi @bluepnume ,

Was the visual feedback that the button is disabled implemented ?
I still don't see it on the demo page here: https://developer.paypal.com/demo/checkout/#/pattern/validation

[Jauny]

I am facing the same issue, and the fact that the button is rendered in an iframe makes it very hard to manually override any styles...

[h3]

@bluepnume The problem is that the workflow assumes that the amount is known and valid before the button is rendered. In a scenario where the user has to fill in a minimum amount, showing a clickable button that just links to a validation error makes no sense.

As for Add a validate(actions) { ... } handler, can you be more specific because I might be missing something, but this has no effects at all:

paypal.Buttons({
  validate(actions) {
    actions.disable()
  }
})

And as mentioned by @ionutvmi and @Jauny, in such scenario the disable/enable button actions are pretty much useless even if I get it to work since they don't show any visual cue that the button is disabled and it's impossible to apply a disabled style inside the iframe.

I had to resort to use a faded image shown when the form is invalid and swap it for the real button once the form enters a valid state.

Not quite elegant..

[initplatform]

How is this closed when there is no official solution from paypal?

This hack works for my purpose... I dynamically add this .disabled-overlay class to the #paypal-button-container to disable it until the user has read the terms and conditions.

.disabled-overlay {
    position: relative;
    margin-bottom: -8px;
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        opacity: .3;
        z-index: 1000;
    }
}

you can adjust the background-color and opacity to suit your needs.

PayPal should invest in some more developer usability resources.
It's quite not fun to work with. My stripe integration went super smooth.

[initplatform]

For reference this is how you do it in stripe:

this.card.update({ disabled: true });

[grantcarthew]

This should not be closed. Thanks @initplatform for the snippet. You saved me time.