Pass the stripe key in to React Native from iOS Native

artsy · sweir27 · Jun 14, 2018 · Jun 7, 2018 · Jun 7, 2018 · Jun 7, 2018
commit 4a2a3e9260e97d791536cf38376a06b0ad0946a8
diff --git a/Example/Emission/AppDelegate.m b/Example/Emission/AppDelegate.m
@@ -22,6 +22,7 @@
 #import <Emission/ARHomeComponentViewController.h>
 #import <Emission/ARGeneComponentViewController.h>
 #import <Emission/ARConversationComponentViewController.h>
+#import <Keys/EmissionKeys.h>
 
 #import <React/RCTUtils.h>
 #import <TargetConditionals.h>
@@ -103,7 +104,9 @@ - (void)setupEmissionWithUserID:(NSString *)userID accessToken:(NSString *)acces
 
   AppSetup *setup = [AppSetup ambientSetup];
 
-  AREmissionConfiguration *config = [[AREmissionConfiguration alloc] initWithUserID:userID authenticationToken:accessToken sentryDSN:nil googleMapsAPIKey:nil gravityURL:setup.gravityURL metaphysicsURL:setup.metaphysicsURL userAgent:@"Emission Example"];
+  EmissionKeys *keys = [[EmissionKeys alloc] init];
+
+  AREmissionConfiguration *config = [[AREmissionConfiguration alloc] initWithUserID:userID authenticationToken:accessToken sentryDSN:nil stripePublishableKey:[keys stripePublishableKey] googleMapsAPIKey:nil gravityURL:setup.gravityURL metaphysicsURL:setup.metaphysicsURL userAgent:@"Emission Example"];
 
   emission = [[AREmission alloc] initWithConfiguration:config packagerURL:setup.jsCodeLocation];
   [AREmission setSharedInstance:emission];

diff --git a/Example/Emission/AuthenticationManager.m b/Example/Emission/AuthenticationManager.m
@@ -79,6 +79,7 @@ - (void)authenticateWithEmail:(NSString *)email password:(NSString *)password ke
   if(![keys artsyAPIClientKey] || ![keys artsyAPIClientSecret]) {
     @throw @"You need to set up your CocoaPods Keys, you may have to run `bundle exec pod install` in the Example dir.";
   }
+  [keys stripePublishableKey];
 
   ArtsyAuthentication *auth = [[ArtsyAuthentication alloc] initWithClientID:[keys artsyAPIClientKey]
                                                                clientSecret:[keys artsyAPIClientSecret]];

diff --git a/Example/Podfile b/Example/Podfile
@@ -60,6 +60,7 @@ plugin 'cocoapods-keys', {
   :keys => [
     'ArtsyAPIClientSecret',   # Authing to the Artsy API
     'ArtsyAPIClientKey',      #
+    'StripePublishableKey',
   ]
 }
 

diff --git a/Example/Podfile.lock b/Example/Podfile.lock
@@ -213,6 +213,6 @@ SPEC CHECKSUMS:
   UIView+BooleanAnimations: a760be9a066036e55f298b7b7350a6cb14cfcd97
   yoga: 55da126afc384965b96bff46652464373b330add
 
-PODFILE CHECKSUM: 71bb8f3565eab8dcbe15783b33da45f480babcf3
+PODFILE CHECKSUM: 2f34094d440552e47625024325a9da6b92f96b43
 
 COCOAPODS: 1.4.0
diff --git a/Makefile b/Makefile
@@ -53,6 +53,7 @@ oss:
 	@echo "Installing Cocoa Dependencies"
 	cd Example && bundle && bundle exec pod keys set ArtsyAPIClientSecret "3a33d2085cbd1176153f99781bbce7c6" Emission
 	cd Example && bundle exec pod keys set ArtsyAPIClientKey "e750db60ac506978fc70"
+	cd Example && bundle exec pod keys set StripePublishableKey "-"
 
 
 JQ := $(shell command -v jq 2> /dev/null)

diff --git a/Pod/Classes/Core/AREmission.h b/Pod/Classes/Core/AREmission.h
@@ -14,6 +14,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, copy, readonly) NSString *authenticationToken;
 
 // ENV Variables
+@property (nonatomic, copy, readonly, nullable) NSString *stripePublishableKey;
 @property (nonatomic, copy, readonly, nullable) NSString *sentryDSN;
 @property (nonatomic, copy, readonly, nullable) NSString *googleMapsAPIKey;
 
@@ -30,6 +31,7 @@ NS_ASSUME_NONNULL_BEGIN
 - (instancetype)initWithUserID:(NSString *)userID
            authenticationToken:(NSString *)token
                      sentryDSN:(nullable NSString *)sentryDSN
+          stripePublishableKey:(NSString *)stripePublishableKey
               googleMapsAPIKey:(nullable NSString *)googleAPIKey
                     gravityURL:(NSString *)gravity
                 metaphysicsURL:(NSString *)metaphysics

diff --git a/Pod/Classes/Core/AREmission.m b/Pod/Classes/Core/AREmission.m
@@ -33,14 +33,15 @@ - (NSDictionary *)constantsToExport
     // Empty is falsy in JS, so these are fine too.
     @"googleMapsAPIKey": self.googleMapsAPIKey ?: @"",
     @"sentryDSN": self.sentryDSN ?: @"",
-
+    @"stripePublishableKey": self.stripePublishableKey ?: @"",
     @"userAgent": self.userAgent ?: @"",
   };
 }
 
 - (instancetype)initWithUserID:(NSString *)userID
            authenticationToken:(NSString *)token
                      sentryDSN:(NSString *)sentryDSN
+          stripePublishableKey:(NSString *)stripePublishableKey
               googleMapsAPIKey:(NSString *)googleAPIKey
                     gravityURL:(NSString *)gravity
                 metaphysicsURL:(NSString *)metaphysics
@@ -50,6 +51,7 @@ - (instancetype)initWithUserID:(NSString *)userID
     _userID = userID.copy;
     _authenticationToken = token.copy;
     _sentryDSN = sentryDSN.copy;
+    _stripePublishableKey = stripePublishableKey.copy;
     _googleMapsAPIKey = googleAPIKey.copy;
     _gravityURL = gravity.copy;
     _metaphysicsURL = metaphysics.copy;

diff --git a/src/lib/Components/Bidding/Screens/BillingAddress.tsx b/src/lib/Components/Bidding/Screens/BillingAddress.tsx
@@ -18,7 +18,7 @@ import { Title } from "../Components/Title"
 import { Address } from "./ConfirmFirstTimeBid"
 
 interface BillingAddressProps {
-  onSubmit?: (values: Address) => null
+  onSubmit?: (values: Address) => void
   navigator?: NavigatorIOS
   billingAddress?: Address
 }

diff --git a/src/lib/Components/Bidding/Screens/ConfirmFirstTimeBid.tsx b/src/lib/Components/Bidding/Screens/ConfirmFirstTimeBid.tsx
@@ -1,5 +1,6 @@
 import React from "react"
-import { View } from "react-native"
+import { NativeModules, TouchableWithoutFeedback, View } from "react-native"
+const Emission = NativeModules.Emission || {}
 import { createFragmentContainer, graphql } from "react-relay"
 import styled from "styled-components/native"
 
@@ -24,13 +25,22 @@ import { ConfirmBidProps } from "./ConfirmBid"
 
 import { Colors } from "lib/data/colors"
 import stripe from "tipsi-stripe"
+import { CreditCardForm } from "./CreditCardForm"
 
 stripe.setOptions({
-  publishableKey: "fill me in",
+  publishableKey: Emission.stripePublishableKey,
   // merchantId: "MERCHANT_ID", // Optional
   // androidPayMode: "test", // Android only
 })
 
+// values from the Tipsi PaymentCardTextField component
+export interface PaymentCardTextFieldParams {
+  number: string
+  expMonth: string
+  expYear: string
+  cvc: string
+}
+
 export interface Address {
   fullName: string
   addressLine1: string
@@ -40,8 +50,9 @@ export interface Address {
   postalCode: string
 }
 
-interface ConformBidState {
+interface ConfirmBidState {
   billingAddress?: Address
+  creditCardFormParams?: PaymentCardTextFieldParams
   creditCardToken?: StripeToken // TODO: change this interface accrodingly when adapting stripe
   conditionsOfSaleChecked: boolean
   isLoading: boolean
@@ -69,7 +80,7 @@ const theme = {
   context_screen: Schema.PageNames.BidFlowConfirmBidPage,
   context_screen_owner_type: null,
 })
-export class ConfirmFirstTimeBid extends React.Component<ConfirmBidProps, ConformBidState> {
+export class ConfirmFirstTimeBid extends React.Component<ConfirmBidProps, ConfirmBidState> {
   state = {
     billingAddress: undefined,
     creditCardToken: null,
@@ -81,6 +92,17 @@ export class ConfirmFirstTimeBid extends React.Component<ConfirmBidProps, Confor
     SwitchBoard.presentModalViewController(this, "/conditions-of-sale?present_modally=true")
   }
 
+  showCreditCardForm() {
+    this.props.navigator.push({
+      component: CreditCardForm,
+      title: "",
+      passProps: {
+        onSubmit: this.onCreditCardAdded,
+        navigator: this.props.navigator,
+      },
+    })
+  }
+
   showBillingAddressForm() {
     this.props.navigator.push({
       component: BillingAddress,
@@ -93,15 +115,14 @@ export class ConfirmFirstTimeBid extends React.Component<ConfirmBidProps, Confor
     })
   }
 
-  onBillingAddressAdded = (values: Address) => {
-    this.setState({ billingAddress: values })
+  onCreditCardAdded = async (params: PaymentCardTextFieldParams) => {
+    // Get token here or just set state? Getting token gives us card type for free
+    const token = await stripe.createTokenWithCard(params)
+    this.setState({ creditCardToken: token, creditCardFormParams: params })
   }
 
-  // Show stripe's complete card form- this does not use CreditCardForm.tsx at all
-  awaitTokenFromCreditCardForm = async () => {
-    const token = await stripe.paymentRequestWithCardForm({ theme })
-    console.log("GOT TOKEN", token)
-    this.setState({ creditCardToken: token })
+  onBillingAddressAdded = (values: Address) => {
+    this.setState({ billingAddress: values })
   }
 
   @track({
@@ -145,9 +166,9 @@ export class ConfirmFirstTimeBid extends React.Component<ConfirmBidProps, Confor
             <Divider mb={2} />
 
             <BidInfoRow
-              label="Credit card"
-              value={token && token.tokenId}
-              onPress={() => this.awaitTokenFromCreditCardForm()}
+              label="Credit Card"
+              value={token && this.formatCard(token)}
+              onPress={() => this.showCreditCardForm()}
             />
 
             <Divider mb={2} />
@@ -177,6 +198,10 @@ export class ConfirmFirstTimeBid extends React.Component<ConfirmBidProps, Confor
     )
   }
 
+  private formatCard(token: StripeToken) {
+    return `${token.card.brand} •••• ${token.card.last4}`
+  }
+
   private formatAddress(address: Address) {
     return [address.addressLine1, address.addressLine2, address.city, address.state].filter(el => el).join(" ")
   }

diff --git a/src/lib/Components/Bidding/Screens/CreditCardForm.tsx b/src/lib/Components/Bidding/Screens/CreditCardForm.tsx
@@ -0,0 +1,71 @@
+import { Fonts } from "lib/data/fonts"
+import React, { Component } from "react"
+import { NavigatorIOS, StyleSheet, View } from "react-native"
+import { PaymentCardTextField } from "tipsi-stripe"
+import { BiddingThemeProvider } from "../Components/BiddingThemeProvider"
+import { Button } from "../Components/Button"
+import { Title } from "../Components/Title"
+import { Flex } from "../Elements/Flex"
+import { theme } from "../Elements/Theme"
+import { PaymentCardTextFieldParams } from "./ConfirmFirstTimeBid"
+
+interface CreditCardFormProps {
+  navigator?: NavigatorIOS
+  onSubmit: (p: PaymentCardTextFieldParams) => void
+}
+
+interface CreditCardFormState {
+  valid: boolean
+  params: PaymentCardTextFieldParams
+}
+
+const styles = StyleSheet.create({
+  field: {
+    fontFamily: Fonts.GaramondRegular,
+    height: 40,
+    fontSize: theme.fontSizes[3],
+    width: "100%",
+    borderColor: theme.colors.purple100,
+    borderWidth: 1,
+    borderRadius: 0,
+  },
+})
+
+export class CreditCardForm extends Component<CreditCardFormProps, CreditCardFormState> {
+  state = {
+    valid: false,
+    params: {
+      number: null,
+      expMonth: null,
+      expYear: null,
+      cvc: null,
+    },
+  }
+
+  handleFieldParamsChange = (valid, params: PaymentCardTextFieldParams) => {
+    this.setState({ valid, params })
+  }
+
+  onSubmit() {
+    if (this.state.valid) {
+      this.props.onSubmit(this.state.params)
+      this.props.navigator.pop()
+    }
+  }
+
+  render() {
+    return (
+      <BiddingThemeProvider>
+        <View>
+          <Title>Your credit card</Title>
+
+          <Flex m={4}>
+            <PaymentCardTextField style={styles.field} onParamsChange={this.handleFieldParamsChange} />
+          </Flex>
+
+          <Button text="Add credit card" onPress={() => this.onSubmit()} />
+        </View>
+      </BiddingThemeProvider>
+    )
+  }
+}