From b350f5f7769e7d49f518bb3dda2f05f82b24df01 Mon Sep 17 00:00:00 2001 From: Ko-Hsin Chu Date: Mon, 27 Apr 2020 13:18:17 -0400 Subject: [PATCH 1/2] feat: default PKPaymentButton to setup when no payment available MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit (iOS only) This defaults PKPaymentButton type to be “setUp” when no payment is available through the specified networks or Apple Pay available networks. --- .../lib/ios/ReactNativePayments.m | 5 ++++ .../lib/js/NativePayments.js | 13 ++++++++++ .../lib/js/PKPaymentButton.js | 26 +++++++++++++++++-- .../lib/js/PaymentRequest.js | 2 ++ 4 files changed, 44 insertions(+), 2 deletions(-) diff --git a/packages/react-native-payments/lib/ios/ReactNativePayments.m b/packages/react-native-payments/lib/ios/ReactNativePayments.m index e4b4b01c..11f6aa20 100644 --- a/packages/react-native-payments/lib/ios/ReactNativePayments.m +++ b/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 diff --git a/packages/react-native-payments/lib/js/NativePayments.js b/packages/react-native-payments/lib/js/NativePayments.js index 913f9eb2..e647aa35 100644 --- a/packages/react-native-payments/lib/js/NativePayments.js +++ b/packages/react-native-payments/lib/js/NativePayments.js @@ -16,6 +16,7 @@ const NativePayments: { show: () => Promise, abort: () => Promise, complete: PaymentComplete => Promise, + availableNetworks: () => Promise, getFullWalletAndroid: string => Promise } = { 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 { return new Promise((resolve, reject) => { if (!IS_ANDROID) { diff --git a/packages/react-native-payments/lib/js/PKPaymentButton.js b/packages/react-native-payments/lib/js/PKPaymentButton.js index 21d12e73..0da161f0 100644 --- a/packages/react-native-payments/lib/js/PKPaymentButton.js +++ b/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 { 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.buttonType; + const onPress = defaultToSetup ? PaymentRequest.openPaymentSetup : this.props.onPress; return ( diff --git a/packages/react-native-payments/lib/js/PaymentRequest.js b/packages/react-native-payments/lib/js/PaymentRequest.js index 7eb69ac2..a80bc148 100644 --- a/packages/react-native-payments/lib/js/PaymentRequest.js +++ b/packages/react-native-payments/lib/js/PaymentRequest.js @@ -499,5 +499,7 @@ export default class PaymentRequest { } static canMakePaymentsUsingNetworks = NativePayments.canMakePaymentsUsingNetworks; + + static availableNetworks = NativePayments.availableNetworks; } From 9f75767b819f4d58af93e1e41c109e254f393176 Mon Sep 17 00:00:00 2001 From: Ko-Hsin Chu Date: Tue, 12 May 2020 17:18:59 -0400 Subject: [PATCH 2/2] fix: update types and fix pass props --- packages/react-native-payments/lib/js/NativePayments.js | 2 +- packages/react-native-payments/lib/js/PKPaymentButton.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-native-payments/lib/js/NativePayments.js b/packages/react-native-payments/lib/js/NativePayments.js index e647aa35..b208384c 100644 --- a/packages/react-native-payments/lib/js/NativePayments.js +++ b/packages/react-native-payments/lib/js/NativePayments.js @@ -16,7 +16,7 @@ const NativePayments: { show: () => Promise, abort: () => Promise, complete: PaymentComplete => Promise, - availableNetworks: () => Promise, + availableNetworks: () => Promise, getFullWalletAndroid: string => Promise } = { supportedGateways: IS_ANDROID diff --git a/packages/react-native-payments/lib/js/PKPaymentButton.js b/packages/react-native-payments/lib/js/PKPaymentButton.js index 0da161f0..17003281 100644 --- a/packages/react-native-payments/lib/js/PKPaymentButton.js +++ b/packages/react-native-payments/lib/js/PKPaymentButton.js @@ -67,7 +67,7 @@ export class PKPaymentButton extends React.Component { render() { const { defaultToSetup } = this.state; - const buttonType = defaultToSetup ? 'setUp' : this.props.buttonType; + const buttonType = defaultToSetup ? 'setUp' : this.props.type; const onPress = defaultToSetup ? PaymentRequest.openPaymentSetup : this.props.onPress; return (