Android Google Pay API PayButton becomes invisible after couple of seconds

Question

I'm trying to integrate Google Pay API's native PayButton with my React Native app, and I thought everything was fine with this Android React Native bridge:

public class GooglePayButtonManager extends SimpleViewManager<PayButton> {
    public static final String REACT_CLASS = "GooglePayButton";
    ReactApplicationContext mCallerContext;

    public GooglePayButtonManager(ReactApplicationContext reactContext) {
        mCallerContext = reactContext;
    }

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    private int theme = ButtonConstants.ButtonTheme.DARK;
    private int type = ButtonConstants.ButtonType.BUY;
    private int cornerRadius = 20;

    @Override
    protected PayButton createViewInstance(@NonNull ThemedReactContext themedReactContext) {
        PayButton button = new PayButton(themedReactContext);
        button.setOnClickListener(v -> {
            WritableMap map = Arguments.createMap();
                themedReactContext.getJSModule(RCTEventEmitter.class).receiveEvent(v.getId(), "onPress", map);
        });
        buildButton(button);
        return button;
    }

    private void buildButton(PayButton button) {
        button.initialize(ButtonOptions.newBuilder()
                .setButtonTheme(theme)
                .setButtonType(type)
                .setCornerRadius(cornerRadius)
                .setAllowedPaymentMethods("[]")
                .build());
    }
}

But now I've noticed that it only works with this variation of the Button, which I get during the first launch of the app:

Then after concurrent launches of the same app, I get this button just for a couple of seconds:

afterwards it just becomes invisible, but is still clickable. If I reinstall the app I get the first version again, and works as normal, then same thing happens after restart.

Does anyone know what could cause this? Google Pay's Gradle package version is 19.2.1, React Native version 0.73.2.

One thing I've noticed is that with both versions I get this error in Logcat when PayButton's .initialize() is called: View class android.support.v7.widget.AppCompatTextView is an AppCompat widget that can only be used with a Theme.AppCompat theme (or descendant). Which is strange because the theme is correctly defined, being a descendant of AppCompat. Also I don't get the error if I return the actual AppCompatTextView instead of the PayButton from the same class.

Any help is appreciated, thanks.

EDIT: after actually passing proper allowedPaymentMethods as mentioned by @Domi, the button no longer disappears. But now when button loads, instead of card's digits, empty space is displayed, with no particular errors in LogCat:

EDIT2: I'm tearing my hair over this - I found out when the above empty digits variant is rendered, if I change anything in the component's style prop from React Native side (e.g. change width from 100% to 101%) and re-bundle again, the button is then rendered correctly with the digits :) But I cannot recreate it to render correctly without re-bundling anything.

Answer 1

It turns out that this is a React Native issue/bug. For more details see here:

https://github.com/facebook/react-native/issues/17968

As a workaround you could wrap the Google Pay PayButton and then trigger measure() and layout() by overwriting requestLayout() in your wrapper:

@Override
public void requestLayout() {
  super.requestLayout();
  post(measureAndLayout);
}

private final Runnable measureAndLayout =
    () -> {
        measure(
                View.MeasureSpec.makeMeasureSpec(getWidth(), View.MeasureSpec.EXACTLY),
                View.MeasureSpec.makeMeasureSpec(getHeight(), View.MeasureSpec.EXACTLY));
        layout(getLeft(), getTop(), getRight(), getBottom());
    };

Check how Stripe solved this for their react native component (Kotlin):

• Wrapper implementation
• GooglePayButtonManager implementation

Update:

In the meantime Google Pay released a version of their button for react native. See here for an example.