Update Apple Pay Button

Add back original button types, set default min width and min height, remove default height, update docs
appfolio · May 21, 2024 · 5fabf09 · 5fabf09
1 parent 5040279
commit 5fabf09
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 15 deletions.
diff --git a/docs/ApplePayButton.md b/docs/ApplePayButton.md
@@ -14,7 +14,7 @@ message along with the logo. The API will provide a localization of the action w
 message based on the user’s language settings. Do
 not create your own localized payment button.
 
-![Apple pay button - types](https://user-images.githubusercontent.com/829963/40891710-daae734a-678a-11e8-935f-481199115068.png)
+![Apple pay button - types](https://github.com/appfolio/react-native-payments/assets/37466295/f6c7b0a0-0b4b-43e0-9add-49c9bc5e4a24)
 
 
 ### Button style
@@ -24,13 +24,15 @@ In addition to button's type, you can set button's visual appearance. For iOS an
 ![Apple pay button - styles](https://user-images.githubusercontent.com/829963/40891711-daca8ff8-678a-11e8-89f2-26a0c3dcf9ed.png)
 
 ## Props
-| Prop name    | required | Type        | Default Value |
+| Prop Name    | Required | Type        | Default Value |
 |--------------|----------|-------------|---------------|
 | type         | yes      | ButtonType  |               |
 | style        | yes      | ButtonStyle |               |
 | onPress      | yes      | Function    |               |
 | width        | no       | number      |               |
-| height       | no       | number      | 44            |
+| height       | no       | number      |               |
+| minWidth     | no       | number      | 100           |
+| minHeight    | no       | number      | 30            |
 | cornerRadius | no       | number      | 4             |
 
 ## Types
@@ -40,12 +42,14 @@ type ButtonType =
   | 'plain'
   // A button with the text “Buy with” and the Apple Pay logo.
   | 'buy'
-  // A button prompting the user to set up a card.
+  // A button with the text “Set up” and the Apple Pay logo.
   | 'setUp'
   // A button with the text “Pay with” and the Apple Pay logo.
   | 'inStore'
   // A button with the text "Donate with" and the Apple Pay logo.
-  | 'donate';
+  | 'donate'
+  // A button with the text "Continue with" and the Apple Pay logo.
+  | 'continue';
 
 type ButtonStyle =
   //   A white button with black lettering (shown here against a gray background to ensure visibility).

diff --git a/ios/Views/PKPaymentButtonView.m b/ios/Views/PKPaymentButtonView.m
@@ -64,12 +64,16 @@ - (void)setButtonType:(NSString *) buttonType andStyle:(NSString *) buttonStyle
   PKPaymentButtonType type;
   PKPaymentButtonStyle style;
 
-  if ([buttonType isEqualToString: @"setUp"]) {
+  if ([buttonType isEqualToString: @"buy"]) {
+    type = PKPaymentButtonTypeBuy;
+  } else if ([buttonType isEqualToString: @"setUp"]) {
     type = PKPaymentButtonTypeSetUp;
-  } else if ([buttonType isEqualToString: @"continue"]) {
-    type = PKPaymentButtonTypeContinue;
   } else if ([buttonType isEqualToString: @"inStore"]) {
     type = PKPaymentButtonTypeInStore;
+  } else if ([buttonType isEqualToString: @"donate"]) {
+    type = PKPaymentButtonTypeDonate;
+  } else if ([buttonType isEqualToString: @"continue"]) {
+    type = PKPaymentButtonTypeContinue;
   } else {
     type = PKPaymentButtonTypePlain;
   }

diff --git a/js/PKPaymentButton/index.js b/js/PKPaymentButton/index.js
@@ -6,12 +6,16 @@ import { NativeModules, requireNativeComponent } from "react-native";
 type PKPaymentButtonType =
   // A button with the Apple Pay logo only.
   | "plain"
+  // A button with the text “Buy with” and the Apple Pay logo.
+  | "buy"
   // A button with the text “Set up” and the Apple Pay logo.
   | "setUp"
-  // A button with the text “Continue with” and the Apple Pay logo.
-  | "continue"
   // A button with the text “Pay with” and the Apple Pay logo.
-  | "inStore";
+  | "inStore"
+  // A button with the text "Donate with" and the Apple Pay logo.
+  | "donate"
+  // A button with the text "Continue with" and the Apple Pay logo.
+  | "continue";
 
 type PKPaymentButtonStyle =
   //   A white button with black lettering (shown here against a gray background to ensure visibility).
@@ -22,12 +26,14 @@ type PKPaymentButtonStyle =
   | "black";
 
 type Props = $Exact<{
-  style: ButtonStyle,
   type: ButtonType,
+  style: ButtonStyle,
+  onPress: Function,
   width?: number,
   height?: number,
-  cornerRadius: number,
-  onPress: Function,
+  minWidth?: number,
+  minHeight?: number
+  cornerRadius?: number,
 }>;
 
 const RNPKPaymentButton = requireNativeComponent("PKPaymentButton", null, {
@@ -41,7 +47,8 @@ export class PKPaymentButton extends React.Component<Props> {
   static defaultProps = {
     buttonStyle: "black",
     buttonType: "plain",
-    height: 44,
+    minWidth: 100,
+    minHeight: 30,
     cornerRadius: 4,
   };
 
@@ -53,6 +60,8 @@ export class PKPaymentButton extends React.Component<Props> {
         onPress={this.props.onPress}
         width={this.props.width}
         height={this.props.height}
+        minWidth={this.props.minWidth}
+        minHeight={this.props.minHeight}
         cornerRadius={this.props.cornerRadius}
       />
     );