GooglePayButton is not showing.

[nisargsuthar]

I've placed a GooglePayButton but it does not show. Enabling debug paint, you can see that it is very tiny. Setting height and width parameters also do not help.

I get these errors:

E/flutter (14723): #1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5)
E/flutter (14723): #2      new PaymentConfiguration._ (package:pay_platform_interface/core/payment_configuration.dart:55:16)
E/flutter (14723): #3      PaymentConfiguration.fromAsset (package:pay_platform_interface/core/payment_configuration.dart:85:33)
E/flutter (14723): <asynchronous suspension>
E/flutter (14723): #4      Future.wait.<anonymous closure> (dart:async/future.dart)
E/flutter (14723): <asynchronous suspension>
E/flutter (14723): #5      Pay._loadConfigAssets (package:pay/src/pay.dart:45:25)
E/flutter (14723): <asynchronous suspension>
E/flutter (14723): 

[JlUgia]

Hi @nisarg12, make sure to use a valid payment configuration for the button. If you are loading the configuration from a JSON file in your assets, make sure to include it in your pubspec.yaml (see the example pubspec.yaml), and ensure that the provider and data keys are present in your configuration (take a look at the sample configuration files)

[nisargsuthar]

Hi @nisarg12, make sure to use a valid payment configuration for the button. If you are loading the configuration from a JSON file in your assets, make sure to include it in your pubspec.yaml (see the example pubspec.yaml), and ensure that the provider and data keys are present in your configuration (take a look at the sample configuration files)

Thank you @JlUgia, that was indeed the problem, the JSON file was missing both the keys. I will close this now :)

[nisargsuthar]

Reopening this because when I switch to iOS from flutter inspector, the GooglePayButton becomes tiny, it is present in widget tree but it is once again as shown in the image above.
Android:

iOS:

[JlUgia]

Hi @nisarg12, this is intended. If you keep diving down the tree, you'll find that this is only the representation of an "empty" widget, SizedBox.shrink(), when the conditions to show the payment button are not met. This widget has no visual representation and even though it is part of the widget tree, it's not proposed for drawing, and hence does not take any unnecessary cycles from the processor.

[nisargsuthar]

Hi @nisarg12, this is intended. If you keep diving down the tree, you'll find that this is only the representation of an "empty" widget, SizedBox.shrink(), when the conditions to show the payment button are not met. This widget has no visual representation and even though it is part of the widget tree, it's not proposed for drawing, and hence does not take any unnecessary cycles from the processor.

I found this in the GooglePayButton class:
final List<TargetPlatform> _supportedPlatforms = [TargetPlatform.android];

Does that mean I can not use the GooglePayButton on iOS and ApplePayButton on Android? Are they exclusive to their OS? If so this should not be the case, no? I get that Android won't have Apple Pay but there is a GPay app for iOS if I'm not mistaken.

[JlUgia]

The effect is the same if the platform is set as not supported. This is currently the case for Google Pay and Apple Pay on Android and iOS respectively, although, on one hand, future providers may have support for Android and iOS, and also, if/when Web is added to the plugin, both Apple and Google Pay will have support for two platforms each:

• Apple Pay -> iOS and Web
• Google Pay -> Android and Web

Let me know if this helps.

[nisargsuthar]

The effect is the same if the platform is set as not supported. This is currently the case for Google Pay and Apple Pay on Android and iOS respectively, although, on one hand, future providers may have support for Android and iOS, and also, if/when Web is added to the plugin, both Apple and Google Pay will have support for two platforms each:

• Apple Pay -> iOS and Web
• Google Pay -> Android and Web

Let me know if this helps.

I am assuming this check was placed because it can be easy to forget to implement platform specific buttons causing inconsistency problems and redundant widgets. I hope to see support for both platforms sooner or later. This was helpful, I will close this now thank you for your support!

[JlUgia]

Your assumption is accurate. This plugin acknowledges that platform support will vary across providers, and as such, adapts to these different scenarios. Any request for additional platform support is beyond the scope of the plugin, and is preferable to do directly with each provider separately.

The plugin actually lets you choose the buttons to show in your UI, with two different integration paths:

• With the quick integration path (using the widgets in the pay package), the widgets decide whether to show based on the platform and the response from the userCanPay call.
• With the custom integration path (using the raw buttons on Android and iOS), you can use the calls in the API to decide what buttons to show and when to do so.

[nisargsuthar]

Your assumption is accurate. This plugin acknowledges that platform support will vary across providers, and as such, adapts to these different scenarios. Any request for additional platform support is beyond the scope of the plugin, and is preferable to do directly with each provider separately.

The plugin actually lets you choose the buttons to show in your UI, with two different integration paths:

• With the quick integration path (using the widgets in the pay package), the widgets decide whether to show based on the platform and the response from the userCanPay call.
• With the custom integration path (using the raw buttons on Android and iOS), you can use the calls in the API to decide what buttons to show and when to do so.

Using the quick integration path, the button still occupies some considerable space estate in the UI, so I think developers would still prefer to put the manual checks for the platform the app is being run from. Anyhow, it is pretty convenient that the plugin does that on it's own nonetheless. Kuddos for that ✌🏼

[JlUgia]

Hey @nisarg12, can you elaborate more on the space that the button occupies? When the button does not show, the resulting widget should have 0'ed dimensions and not be drawn at all. Are you experiencing something different? Can you share more details if that's the case?
Thank you!

[nisargsuthar]

Hey @nisarg12, can you elaborate more on the space that the button occupies? When the button does not show, the resulting widget should have 0'ed dimensions and not be drawn at all. Are you experiencing something different? Can you share more details if that's the case?
Thank you!

Yes, it most certainly does not 0 out, I am attaching the results yielded in all the cases:

1. Not shrinked.
2. Shrinked.
3. Removed from the tree completely.

You can take a reference of height of the Razorpay button.

[nisargsuthar]

@JlUgia I just checked if it was because of me using MainAxisAlignment.spaceEvenly for the Column widget and turns out even though the widget is being shrunk to 0 height and width, spaceEvenly & spaceAround would still acknowledge the widget's presence and assign it some space "evenly" & "around". I suggest inverting the boolean check, and render the button if the platform is same.

if (widget._isPlatformSupported) {
      return FutureBuilder<bool>(
      future: userCanPayFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.data == true) {
            return Container(
              margin: widget.margin,
              width: widget.width,
              height: widget.height,
              child: widget._payButton,
            );
          } else {
            return ButtonPlaceholder(
              margin: widget.margin,
              child: widget.childOnError,
            );
          }
        }

        return ButtonPlaceholder(
          margin: widget.margin,
          child: widget.loadingIndicator,
        );
      },
    );
}