Merge pull request #25 from JeromeFitz/default_to_setup

feat: default PKPaymentButton to setup when no payment available

packages/react-native-payments/lib/ios/ReactNativePayments.m

@@ -27,6 +27,11 @@ - (NSDictionary *)constantsToExport
     callback(@[[NSNull null], @([PKPaymentAuthorizationViewController canMakePaymentsUsingNetworks:paymentNetworks])]);
 }
 
+RCT_EXPORT_METHOD(availableNetworks: (RCTResponseSenderBlock)callback)
+{
+    callback(@[[NSNull null], [PKPaymentRequest availableNetworks]]);
+}
+
 RCT_EXPORT_METHOD(createPaymentRequest: (NSDictionary *)methodData
                   details: (NSDictionary *)details
                   options: (NSDictionary *)options

packages/react-native-payments/lib/js/NativePayments.js

@@ -16,6 +16,7 @@ const NativePayments: {
   show: () => Promise<any>,
   abort: () => Promise<any>,
   complete: PaymentComplete => Promise<any>,
+  availableNetworks: () => Promise<string[] | boolean>,
   getFullWalletAndroid: string => Promise<any>
 } = {
   supportedGateways: IS_ANDROID
@@ -152,6 +153,18 @@ const NativePayments: {
     });
   },
 
+  availableNetworks() {
+    return new Promise((resolve) => {
+      if (IS_ANDROID) {
+        resolve(false);
+      }
+
+      ReactNativePayments.availableNetworks(
+        (err, data) => resolve(data)
+      );
+    });
+  },
+
   getFullWalletAndroid(googleTransactionId: string, paymentMethodData: object, details: object): Promise<string> {
     return new Promise((resolve, reject) => {
       if (!IS_ANDROID) {

packages/react-native-payments/lib/js/PKPaymentButton.js

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { NativeModules, requireNativeComponent } from 'react-native';
+import PaymentRequest from './PaymentRequest';
 
 type PKPaymentButtonType =
   // A button with the Apple Pay logo only.
@@ -29,6 +30,7 @@ type Props = $Exact<{
   width?: number,
   height?: number,
   onPress: Function,
+  supportedNetworks?: string[]
 }>;
 
 const RNPKPaymentButton = requireNativeComponent('PKPaymentButton', null, {
@@ -46,12 +48,32 @@ export class PKPaymentButton extends React.Component<Props> {
     height: 44,
   };
 
+  state = {
+    defaultToSetup: false
+  }
+
+  async componentDidMount() {
+    const { supportedNetworks: customNetworks } = this.props;
+    let supportedNetworks = customNetworks;
+    if (supportedNetworks.length === 0) {
+      supportedNetworks = await PaymentRequest.availableNetworks();
+    }
+    const havePaymentSetup =
+      await PaymentRequest.canMakePaymentsUsingNetworks(supportedNetworks);
+    if (!havePaymentSetup) {
+      this.setState({ defaultToSetup: true })
+    }
+  }
+
   render() {
+    const { defaultToSetup } = this.state;
+    const buttonType = defaultToSetup ? 'setUp' : this.props.type;
+    const onPress = defaultToSetup ? PaymentRequest.openPaymentSetup : this.props.onPress;
     return (
       <RNPKPaymentButton
         buttonStyle={this.props.style}
-        buttonType={this.props.type}
-        onPress={this.props.onPress}
+        buttonType={buttonType}
+        onPress={onPress}
         width={this.props.width}
         height={this.props.height}
       />

packages/react-native-payments/lib/js/PaymentRequest.js

@@ -499,5 +499,7 @@ export default class PaymentRequest {
   }
 
   static canMakePaymentsUsingNetworks = NativePayments.canMakePaymentsUsingNetworks;
+
+  static availableNetworks = NativePayments.availableNetworks;
 }