tipsy

by Hyacinthe Hamon

HTML

import React, { Component, PropTypes } from 'react'
import { View, Text, TouchableHighlight, ActivityIndicator, Platform, StyleSheet } from 'react-native'

export default class Button extends Component {
  static propTypes = {
    text: PropTypes.string,
    disabledText: PropTypes.string,
    loading: PropTypes.bool,
    disabled: PropTypes.bool,
    style: PropTypes.any,
    onPress: PropTypes.func,
  }

  handlePress = (event) => {
    const { loading, disabled, onPress } = this.props

    if (loading || disabled) {
      return
    }

    if (onPress) {
      onPress(event)
    }
  }

  render() {
    const { text, disabledText, loading, disabled, style, ...rest } = this.props

    return (
      <TouchableHighlight
        {...rest}
        style={[styles.button, style]}
        underlayColor="rgba(0,0,0,0.5)"
        onPress={this.handlePress}>
        <View>
          {loading &&
            <ActivityIndicator
              animating
              size="small"
            />
          }
          {!loading && !disabled &&
            <Text>
              {text}
            </Text>
          }
          {!loading && disabled &&
            <Text>
              {disabledText || text}
            </Text>
           }
        </View>
      </TouchableHighlight>
    )
  }
}

const styles = StyleSheet.create({
  button: {
    padding: 8,
    height: Platform.OS === 'ios' ? 35 : 40,
    minWidth: 160,
    overflow: 'hidden',
    borderRadius: 4,
    backgroundColor: 'white',
    alignItems: 'center',
  },
})

JavaScript

import React, { PropTypes, Component, Stylesheet } from 'react';
import { View, Text, TouchableHighlight, ActivityIndicator, Platform, StyleSheet } from 'react-native'
import { ModuleLayout, RippleButton, SwipeableItem } from '../../../../core/components/index';
import { CardDetails } from '../index';
import Button from './Button;
import { cs } from '../../../../core/styles/index';
import stripe from 'tipsi-stripe';

export default class CardFormScreen extends Component {

		componentWillMount() {
			stripe.init({
			publishableKey: 'pk_test_lJlOVa7hLrA3fRC2sEUgpsrp',
		}); }

	  state = {
	    loading: false,
	    token: null,
	  }

	  handleCardPayPress = async () => {
	    try {
	      this.setState({
	        loading: true,
	        token: null,
	      })
	      const token = await stripe.paymentRequestWithCardForm({
	        smsAutofillDisabled: true, // iOS only
	      })

	      console.log('Result:', token) // eslint-disable-line no-console
	      this.setState({
	        loading: false,
	        token,
	      })
	    } catch (error) {
	      console.log('Error:', error) // eslint-disable-line no-console
	      this.setState({
	        loading: false,
	      })
	    }
	  }

	  render() {
	    const { loading, token } = this.state

	    return (
			  <ModuleLayout>
	      <View style={styles.container}>
	        <Text style={styles.header}>
	          Card Form Example
	        </Text>
	        <Text style={styles.instruction}>
	          Click button to show Card Form dialog.
	        </Text>
	        <Button
	          text="Enter you card and pay"
	          loading={loading}
	          style={styles.button}
	          accessible
	          accessibilityLabel={'cardFormButton'}
	          onPress={this.handleCardPayPress}
	        />
	        <View
	          style={styles.token}
	          accessible
	          accessibilityLabel={'cardFormToken'}>
	          {token &&
	            <Text style={styles.instruction}>
	              Token:...