New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

User can register and place bid #1086

Merged
merged 8 commits into from Jun 14, 2018

Pass the stripe key in to React Native from iOS Native

  • Loading branch information...
erikdstock authored and yuki24 committed Jun 6, 2018
commit 4a2a3e9260e97d791536cf38376a06b0ad0946a8
@@ -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];
@@ -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]];
Copy path View file
@@ -60,6 +60,7 @@ plugin 'cocoapods-keys', {
:keys => [
'ArtsyAPIClientSecret', # Authing to the Artsy API
'ArtsyAPIClientKey', #
'StripePublishableKey',
]
}
Copy path View file
@@ -213,6 +213,6 @@ SPEC CHECKSUMS:
UIView+BooleanAnimations: a760be9a066036e55f298b7b7350a6cb14cfcd97
yoga: 55da126afc384965b96bff46652464373b330add
PODFILE CHECKSUM: 71bb8f3565eab8dcbe15783b33da45f480babcf3
PODFILE CHECKSUM: 2f34094d440552e47625024325a9da6b92f96b43
COCOAPODS: 1.4.0
Copy path View file
@@ -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)
Copy path View file
@@ -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
Copy path View file
@@ -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;
@@ -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
}
@@ -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(" ")
}
@@ -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>
)
}
}
ProTip! Use n and p to navigate between commits in a pull request.