.flowconfig

@@ -31,6 +31,7 @@ emoji=true
 
 esproposal.optional_chaining=enable
 esproposal.nullish_coalescing=enable
+esproposal.decorators=ignore
 
 module.system=haste
 module.system.haste.use_name_reducers=true

android/app/build.gradle

@@ -163,6 +163,7 @@ android {
 }
 
 dependencies {
+    implementation project(':tipsi-stripe')
     implementation project(':react-native-svg')
     implementation project(':react-native-device-info')
     implementation project(':react-native-sentry')

android/app/src/main/java/com/minds/mobile/MainApplication.java

@@ -3,6 +3,7 @@ package com.minds.mobile;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.gettipsi.stripe.StripeReactPackage;
 import com.horcrux.svg.SvgPackage;
 import com.learnium.RNDeviceInfo.RNDeviceInfo;
 import io.sentry.RNSentryPackage;
@@ -59,6 +60,7 @@ public class MainApplication extends Application implements ShareApplication, Re
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new StripeReactPackage(),
             new SvgPackage(),
             new RNDeviceInfo(),
             new RNSentryPackage(),

android/settings.gradle

 rootProject.name = 'Minds'
+include ':tipsi-stripe'
+project(':tipsi-stripe').projectDir = new File(rootProject.projectDir, '../node_modules/tipsi-stripe/android')
 include ':react-native-svg'
 project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
 include ':react-native-device-info'

locales/en.json

@@ -66,7 +66,7 @@
     "balance":"Balance",
     "gasEth":"Gas (ETH)",
     "walletNameExample":"eg. Mobile Spending",
-    "receiverAddress":"Recieve Address",
+    "receiverAddress":"Receive Address",
     "shouldBeReceiver":"Should this address be your receiver address for Wire & Boost?",
     "downloadPrivate":"Download the private key of this wallet",
     "deleteWarning":"WARNING: this is irreversable and all tokens will be lost",
@@ -349,6 +349,7 @@
     "referral_complete": "Referral Complete"
   },
   "payments":{
+    "confirmDeleteCard":"Do you want to delete this card?",
     "cardExpirationMonth":"Card Expiration Month",
     "cardExpirationYear":"Card Expiration Year",
     "yourSavedCard":"YOUR SAVED CARDS:",
@@ -556,7 +557,9 @@
     }
   },
   "wire":{
-    "amountMonth":"{{amount}}/month",
+    "selectCredit":"Select a credit card.",
+    "willNotRecur":"You can send {{currency}} to this user, however it will not recur.",
+    "amountMonth":"{{amount}} / month",
     "noAddress":"This channel has not configured their {{type}} address yet",
     "amountMonthDescription":"THIS POST CAN ONLY BE SEEN BY SUPPORTERS WHO WIRE {{amount}}/MONTH TO @{{name}}",
     "weHaveReceivedYourTransaction":"We've received your transaction",

package.json

@@ -110,6 +110,7 @@
     "string_decoder": "^0.10.31",
     "stripe-client": "^1.1.3",
     "timers-browserify": "^1.0.1",
+    "tipsi-stripe": "8.0.0-beta.6",
     "tty-browserify": "0.0.0",
     "url": "~0.10.1",
     "util": "~0.10.3",

src/common/services/stripe.service.js

+import stripe from 'tipsi-stripe';
+import mindsService from './minds.service';
+
+let intialized = false;
+
+export const initStripe = async() => {
+  if (intialized) return;
+  intialized = true;
+
+  const settings = await mindsService.getSettings();
+
+  await stripe.setOptions({
+    publishableKey: settings.stripe_key,
+    //androidPayMode: 'test', // Android only
+  });
+}
+
+export default stripe;
+

src/styles/Colors.js

 export default colors = {
   primary   : '#4690D6',
   secondary : '#FFDD63',
-  terciary  : '#4C9EB1',
+  tertiary  : '#4C9EB1',
   danger    : '#f53d3d',
   light     : '#f7f7f7',
   medium    : '#b0bec5',

src/styles/Common.js

@@ -89,8 +89,8 @@ export const CommonStyle = StyleSheet.create({
   colorSecondary: {
     color: colors.secondary
   },
-  colorTerciary: {
-    color: colors.terciary
+  colorTertiary: {
+    color: colors.tertiary
   },
   colorPrimary: {
     color: colors.primary
@@ -144,8 +144,8 @@ export const CommonStyle = StyleSheet.create({
   backgroundTransparent: {
     backgroundColor: 'transparent'
   },
-  backgroundTerciary: {
-    backgroundColor: colors.terciary
+  backgroundTertiary: {
+    backgroundColor: colors.tertiary
   },
   // borders
   borderWhite: {
@@ -163,8 +163,8 @@ export const CommonStyle = StyleSheet.create({
   borderSecondary: {
     borderColor: colors.secondary
   },
-  borderTerciary: {
-    borderColor: colors.terciary
+  borderTertiary: {
+    borderColor: colors.tertiary
   },
   borderPrimary: {
     borderColor: colors.primary
@@ -451,6 +451,14 @@ export const CommonStyle = StyleSheet.create({
     textAlign: 'justify'
   },
 
+  fullWidth: {
+    width: '100%'
+  },
+
+  halfWidth: {
+    width: '50%'
+  },
+
   // Overlay∫
   blackOverlay: {
     backgroundColor:'black',

src/wire/FabScreen.js

@@ -26,7 +26,6 @@ import McIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import colors from '../styles/Colors';
 import { CommonStyle as CS } from '../styles/Common';
 
-import CenteredLoading from '../common/components/CenteredLoading';
 import RewardsCarousel from '../channel/carousel/RewardsCarousel';
 
 import featuresService from '../common/services/features.service';
@@ -41,6 +40,7 @@ import BtcPayment from './methods/BtcPayment';
 import PaymentMethodIcon from './methods/PaymentMethodIcon';
 import Button from '../common/components/Button';
 import numberFromat from '../common/helpers/number';
+import StripeCardSelector from './methods/StripeCardSelector';
 
 /**
  * Wire Fab Screen
@@ -112,11 +112,7 @@ export default class FabScreen extends Component {
    * Modal navigation
    */
   static navigationOptions = ({ navigation }) => ({
-    header: (
-      <View style={[CS.backgroundLight, CS.rowJustifyEnd]}>
-        <Icon size={40} name="ios-close" onPress={() => navigation.goBack()} style={[CS.marginRight3x, CS.marginTop3x]}/>
-      </View>
-    ),
+    header: null,
     transitionConfig: {
       isModal: true
     }
@@ -132,33 +128,59 @@ export default class FabScreen extends Component {
     this.props.wire.setShowBtc(false);
   }
 
+  onSelectCard = (card) => {
+    this.props.wire.setPaymentMethodId(card.id);
+  }
+
+  goBackUSD = () => {
+    this.props.wire.setShowCardselector(false)
+  }
+
   getBody() {
+    const buttonDisabled = this.props.wire.sending || this.props.wire.errors.length > 0;
+
     if (this.props.wire.showBtc) {
       return (
         <BtcPayment amount={this.props.wire.amount} address={this.props.wire.owner.btc_address} onCancel={this.onCancelBtc}/>
       )
     }
 
+    if (this.props.wire.showCardselector) {
+      return (
+        <View style={CS.columnAlignCenter}>
+          <Text style={[CS.marginTop2x, CS.fontHairline, CS.fontXL, CS.marginBottom2x]}>{i18n.t('wire.selectCredit')}</Text>
+          <StripeCardSelector onCardSelected={this.onSelectCard}/>
+
+          <View style={[CS.rowJustifyCenter, CS.paddingTop3x, CS.marginTop4x]}>
+            <Button
+              text={i18n.t('goback').toUpperCase()}
+              disabled={buttonDisabled || !this.props.wire.paymentMethodId}
+              onPress={this.goBackUSD}
+              textStyle={[CS.fontL, CS.padding]}
+            />
+            <Button
+              text={i18n.t('send').toUpperCase()}
+              disabled={buttonDisabled || !this.props.wire.paymentMethodId}
+              onPress={this.confirmSend}
+              textStyle={[CS.fontL, CS.padding]}
+              inverted
+            />
+          </View>
+        </View>
+      )
+    }
+
     const owner = this.getOwner();
     const txtAmount = this.getTextAmount();
     const amount = this.props.wire.amount.toString();
-    const buttonDisabled = this.props.wire.sending || this.props.wire.errors.length > 0;
 
-    const currencySelector = (
-      <View style={CS.alignCenter}>
-        <PaymentMethodIcon value={this.props.wire.currency} size={30} style={CS.colorPrimary} onPress={this.selectMethod}/>
-        <Text style={[CS.fontL, CS.colorPrimary]} onPress={this.selectMethod}>
-          {this.props.wire.currency.toUpperCase()}
-        </Text>
-      </View>
-    )
     return (
       <Fragment>
-        <Text style={[CS.fontM, CS.textCenter]}>{i18n.to('wire.supportMessage', {payments: featuresService.has('wire-multi-currency') ? 'tokens , ETH, BTC or USD' : 'tokens' }, {
+        <Text style={[CS.fontL, CS.textCenter, CS.marginTop2x]}>{i18n.to('wire.supportMessage', {payments: featuresService.has('wire-multi-currency') ? 'tokens , ETH, BTC or USD' : 'tokens' }, {
           name: <Text style={CS.bold}>@{ owner.username }</Text>
         })}</Text>
 
-        <View style={[styles.carouselContainer, CS.paddingTop2x]}>
+        <View style={[CS.paddingBottom, CS.paddingTop3x]}>
           {this.props.wire.owner.wire_rewards.rewards && <SubscriptionTierCarousel
             amount={amount}
             rewards={this.props.wire.owner.wire_rewards.rewards}
@@ -167,22 +189,18 @@ export default class FabScreen extends Component {
           />}
         </View>
 
-        <View>
+        <View style={CS.marginTop3x, CS.marginBottom2x}>
           {this.props.wire.errors.map(e => <Text style={[CS.colorDanger, CS.fontM, CS.textCenter]}>{e}</Text>)}
         </View>
-        {this.props.wire.currency === 'btc' && <Text style={[CS.fontM, CS.textCenter]}>You can send BTC to this user, however it will not recur.</Text>}
 
+        <PaymentMethodSelector
+          ref={this.paymethodRef}
+          value={this.props.wire.currency}
+          onSelect={this.props.wire.setCurrency}
+        />
 
         <View style={[CS.rowJustifySpaceEvenly, CS.marginBottom3x, CS.marginTop3x, CS.alignJustifyCenter, CS.alignCenter]}>
 
-          <View style={[CS.flexContainer, CS.centered]}>
-            <PaymentMethodSelector
-              button={currencySelector}
-              ref={this.paymethodRef}
-              value={this.props.wire.currency}
-              onSelect={this.props.wire.setCurrency}
-            />
-          </View>
           <TextInput
 
             ref="input"
@@ -195,17 +213,20 @@ export default class FabScreen extends Component {
         </View>
 
         <View>
-          <CheckBox
-            title={i18n.t('wire.repeatMessage')}
-            checked={this.props.wire.recurring}
-            onPress={() => this.props.wire.toggleRecurring()}
-            left
-            checkedIcon="check-circle-o"
-            checkedColor={ colors.primary }
-            uncheckedIcon="circle-o"
-            uncheckedColor={ colors.greyed }
-            containerStyle={[CS.backgroundLight]}
-          />
+          { ['usd','tokens'].includes(this.props.wire.currency) ?
+            <CheckBox
+              title={i18n.t('wire.repeatMessage')}
+              checked={this.props.wire.recurring}
+              onPress={() => this.props.wire.toggleRecurring()}
+              left
+              checkedIcon="check-circle-o"
+              checkedColor={ colors.primary }
+              uncheckedIcon="circle-o"
+              uncheckedColor={ colors.greyed }
+              containerStyle={[CS.backgroundLight]}
+            />:
+            <Text style={[CS.fontM, CS.textCenter, CS.marginTop2x, CS.marginBottom2x]}>{i18n.t('wire.willNotRecur', {currency: this.props.wire.currency.toUpperCase()})}</Text>
+          }
         </View>
 
         { this.props.wire.owner.wire_rewards && this.props.wire.owner.wire_rewards.length && <View>
@@ -228,22 +249,19 @@ export default class FabScreen extends Component {
    * Render screen
    */
   render() {
-    if (!this.props.wire.loaded) {
-      return <CenteredLoading/>
-    }
-
     // sending?
     let icon;
     if (this.props.wire.sending) {
       icon = <ActivityIndicator size={'large'} color={colors.primary}/>
     } else {
-      icon = <Icon size={64} name="ios-flash" style={CS.colorPrimary} />
+      icon = <Icon size={64} name="ios-flash" style={[CS.colorPrimary, CS.paddingBottom2x]} />
     }
 
-    const body = this.getBody();
+    const body = !this.props.wire.loaded ? <ActivityIndicator size={'large'} color={colors.primary}/> : this.getBody();
 
     return (
-      <ScrollView contentContainerStyle={[CS.backgroundLight, CS.paddingLeft2x, CS.paddingRight2x, CS.flexContainer, CS.alignCenter]}>
+      <ScrollView contentContainerStyle={[CS.backgroundLight, CS.paddingLeft2x, CS.paddingRight2x, CS.columnAlignCenter, CS.alignCenter, CS.flexContainer, CS.paddingTop2x]}>
+        <Icon size={40} name="ios-close" onPress={() => this.props.navigation.goBack()} style={[CS.marginRight3x, CS.marginTop3x, CS.positionAbsoluteTopRight]}/>
         {icon}
         {body}
       </ScrollView>
@@ -259,10 +277,15 @@ export default class FabScreen extends Component {
       return;
     }
 
+    // we only show the btc component
     if (this.props.wire.currency === 'btc') {
       return this.send();
     }
 
+    if (this.props.wire.currency === 'usd' && !this.props.wire.showCardselector) {
+      return this.props.wire.setShowCardselector(true);
+    }
+
     Alert.alert(
       i18n.t('confirmMessage'),
       i18n.t('wire.confirmMessage', {amount: this.props.wire.formatAmount(this.props.wire.amount), name: this.props.wire.owner.username}),
@@ -320,10 +343,4 @@ export default class FabScreen extends Component {
 }
 
 const selectedcolor = '#4690D6';
-const color = '#444'
-
-const styles = {
-  carouselContainer: {
-    height: 180
-  }
-}
+const color = '#444';

src/wire/WireService.js

@@ -67,7 +67,7 @@ class WireService {
    * Send wire
    * @param {object} opts
    */
-  async send(opts): Promise<any> {
+  async send(opts: Object): Promise<any> {
     const payload = await this.getTransactionPayloads(opts);
 
     if (!payload) {
@@ -91,13 +91,27 @@ class WireService {
    */
   async getTransactionPayloads(opts: Object): any {
 
-    let payload
+    let payload: Object;
 
-    if (opts.currency == 'tokens' || opts.currency == 'eth') {
-      payload = await BlockchainWalletService.selectCurrent(i18n.t('wire.selectWalletMessage'), { signable: true, offchain: opts.currency === 'tokens', buyable: opts.currency === 'tokens', confirmTokenExchange: opts.amount, currency: opts.currency });
+    switch (opts.currency) {
+      case 'tokens':
+      case 'eth':
+        payload = await BlockchainWalletService.selectCurrent(
+          i18n.t('wire.selectWalletMessage'),
+          {
+            signable: true,
+            offchain: opts.currency === 'tokens',
+            buyable: opts.currency === 'tokens',
+            confirmTokenExchange: opts.amount,
+            currency: opts.currency
+          }
+        );
+      break;
+      case 'usd':
+        payload = {type: 'usd'};
+      break;
     }
 
-
     if (!payload || payload.cancelled) {
       return;
     }
@@ -147,6 +161,12 @@ class WireService {
           receiver: opts.owner.eth_wallet,
           txHash: await BlockchainWireService.createEth(opts.owner.eth_wallet, opts.amount)
         };
+
+      case 'usd':
+        return {
+          method: payload.type,
+          paymentMethodId: opts.paymentMethodId
+        }
     }
 
     throw new Error('Unknown type');

src/wire/WireStore.js

@@ -7,14 +7,6 @@ import {
 import wireService from './WireService';
 import i18n from '../common/services/i18n.service';
 
-export type PayloadType =
-  | 'onchain'
-  | 'offchain'
-  | 'usd'
-  | 'eth'
-  | 'erc20'
-  | 'btc';
-
 /**
  * Wire store
  */
@@ -25,14 +17,29 @@ class WireStore {
   @observable.shallow owner = null;
   @observable recurring = false;
   @observable showBtc = false;
+  @observable showCardselector = false;
   @observable loaded = false;
   @observable errors = [];
 
+  @observable paymentMethodId: ?string = null;
+
+  guid: string;
+
   @action
   setShowBtc = (value: boolean) => {
     this.showBtc = value;
   }
 
+  @action
+  setShowCardselector = (value: boolean) => {
+    this.paymentMethodId = null;
+    this.showCardselector = value;
+  }
+
+  setPaymentMethodId(value: string) {
+    this.paymentMethodId = value;
+  }
+
   @action
   setCurrency = (value: string) => {
     this.currency = value;
@@ -63,6 +70,7 @@ class WireStore {
   @action
   setOwner(owner: any) {
     this.owner = owner;
+    this.guid = owner.guid || owner.entity_guid;
   }
 
   async loadUserRewards(): Promise<any> {
@@ -159,7 +167,8 @@ class WireStore {
         guid: this.guid,
         owner: this.owner,
         recurring: this.recurring,
-        currency: this.currency
+        currency: this.currency,
+        paymentMethodId: this.paymentMethodId
       });
 
       this.stopSending();
@@ -178,8 +187,10 @@ class WireStore {
 
   @action
   reset() {
+    this.paymentMethodId = null,
     this.amount = 1;
     this.showBtc = false;
+    this.showCardselector = false;
     this.currency = 'tokens';
     this.sending = false;
     this.owner = null;

src/wire/methods/PaymentMethodSelector.js

 // @flow
 import * as React from 'react'
 
-import { Text, StyleSheet } from 'react-native';
-
-import Menu, { MenuItem } from 'react-native-material-menu';
+import { Text, StyleSheet, View, TouchableOpacity } from 'react-native';
 
 import featuresService from '../../common/services/features.service';
 import testID from '../../common/helpers/testID';
@@ -72,18 +70,16 @@ export default class PaymentMethodSelector extends React.PureComponent<PropsType
   render(): React.Node {
 
     return (
-      <Menu ref={this.menuRef} button={this.props.button}>
-        {this.methods.map((method: any, i: number): MenuItem  => (
-          <MenuItem
-            key={i}
-            onPress={method.handle}
-            textStyle={CS.fontXL}
-            {...testID(`PAYMENT METHOD ${method.label}`)}
-          >
-            <Text style={(method.label.toLowerCase() === this.props.value) ? styles.selected : null}><PaymentMethodIcon value={method.label} size={15} /> {method.label}</Text>
-          </MenuItem>
+      <View style={[CS.rowJustifySpaceEvenly, CS.fullWidth]}>
+        {this.methods.map((method: any, i: number): React.Node  => (
+          <TouchableOpacity style={[CS.alignCenter, CS.padding ]} {...testID(`PAYMENT METHOD ${method.label}`)} key={i} onPress={method.handle}>
+            <PaymentMethodIcon value={method.label} size={30} style={(method.label.toLowerCase() === this.props.value) ? styles.selected : null} />
+            <Text style={[CS.fontL, (method.label.toLowerCase() === this.props.value) ? styles.selected : null]} >
+              {method.label.toUpperCase()}
+            </Text>
+          </TouchableOpacity>
         ))}
-      </Menu>
+      </View>
     );
   }
 }

src/wire/methods/StripeCardCarousel.js

+// @flow
+import * as React from 'react';
+
+import { Text, View, StyleSheet, Alert } from 'react-native';
+import Carousel from 'react-native-snap-carousel';
+
+import { CommonStyle as CS } from '../../styles/Common';
+import viewportPercentage from '../../common/helpers/viewportPercentage';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+import i18n from '../../common/services/i18n.service';
+
+const {value: slideWidth, viewportHeight} = viewportPercentage(75);
+const {value: itemHorizontalMargin} = viewportPercentage(2);
+
+const itemWidth = slideWidth + itemHorizontalMargin * 2;
+const itemHeight = {height: parseInt(itemWidth * 0.55)};
+
+type PropsType = {
+  paymentmethods: Array<any>,
+  onCardSelected: Function,
+  onCardDeleted: Function
+};
+
+/**
+ * Stripe card Carousel
+ */
+export default class StripeCardCarousel extends React.PureComponent<PropsType> {
+
+  carouselRef: ?React.ElementRef<Carousel>;
+
+  /**
+   * Constructor
+   * @param {PropsType} props
+   */
+  constructor(props: PropsType) {
+    super(props);
+
+    if (props.paymentmethods && props.onCardSelected) {
+      this.props.onCardSelected(props.paymentmethods[props.paymentmethods.length - 1]);
+    }
+
+    this.carouselRef = React.createRef();
+  }
+
+  /**
+   * Component did update
+   * @param {PropsType} prevProps
+   */
+  componentDidUpdate(prevProps: PropsType) {
+
+    // if the array of cards changes we snap to the last item
+    if (prevProps.paymentmethods !== this.props.paymentmethods) {
+      setTimeout(() => {
+        if (this.carouselRef && this.carouselRef.current) {
+          this.carouselRef.current.snapToItem(this.props.paymentmethods.length);
+        }
+      }, 100);
+    }
+  }
+
+  delete(card: any) {
+    Alert.alert(
+      i18n.t('confirmMessage'),
+      i18n.t('payments.confirmDeleteCard'),
+      [
+        { text: i18n.t('cancel'), style: 'cancel' },
+        { text: i18n.t('ok'), onPress: (): any => this.props.onCardDeleted(card) },
+      ],
+      { cancelable: false }
+    );
+  }
+
+  /**
+   * Renders a card
+   * @param {Object} row
+   */
+  _renderItem = (row: any): React.Node => {
+
+    const even = row.index % 2;
+    return (
+
+      <View
+        key={`card${row.item.id}`}
+        style={[itemHeight, even ? CS.backgroundPrimary : CS.backgroundTertiary, CS.borderRadius4x, CS.padding2x, CS.shadow]}
+      >
+          {this.getCardIcon(row.item.card_brand)}
+          <Icon name="close" style={[CS.positionAbsoluteTopRight, CS.margin, CS.colorWhite]} size={25} onPress={(): any => this.delete(row.item)}/>
+          <Text style={[CS.fontM, CS.fontMedium, CS.colorWhite, CS.paddingBottom2x]}>{row.item.card_country}</Text>
+          <Text style={[CS.fontXL, CS.fontMedium, CS.colorWhite, CS.textCenter, CS.paddingTop3x]}>********** {row.item.card_last4}</Text>
+          <Text numberOfLines={5} style={[CS.fontL, CS.fontHairline, CS.colorWhite, CS.textRight , CS.paddingTop3x]}>{row.item.card_expires}</Text>
+      </View>
+    );
+  }
+
+  /**
+   * Get credit card icon
+   * @param {string} card
+   */
+  getCardIcon(card: string): React.Node {
+    let name;
+
+    switch (card) {
+      case 'visa':
+        name = 'cc-visa';
+        break;
+      case 'amex':
+        name = 'cc-amex';
+        break;
+      case 'mastercard':
+        name = 'cc-mastercard';
+        break;
+      case 'jcb':
+        name = 'cc-jcb';
+        break;
+      case 'discover':
+        name = 'cc-discover';
+        break;
+      case 'diners':
+        name = 'cc-diners-club';
+        break;
+      default:
+        name = 'credit-card-alt'
+    }
+    return <Icon name={name} size={30} color="white"/>
+  }
+
+  /**
+   * Card Selected
+   * @param {number} index
+   */
+  onSelected = (index: number) => {
+    if (this.props.onCardSelected) {
+      this.props.onCardSelected(this.props.paymentmethods[index]);
+    }
+  }
+
+  /**
+   * Render
+   */
+  render(): React.Node {
+
+    return (
+      <Carousel
+        layout={'stack'}
+        layoutCardOffset={7}
+        onSnapToItem={this.onSelected}
+        firstItem={this.props.paymentmethods.length - 1}
+        containerCustomStyle={styles.carousle}
+        enableSnap={true}
+        ref={this.carouselRef}
+        data={ this.props.paymentmethods }
+        renderItem={this._renderItem}
+        inactiveSlideScale={0.94}
+        inactiveSlideOpacity={0.7}
+        sliderWidth={viewportHeight}
+        itemWidth={itemWidth}
+      />
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  carousle: {
+    flexGrow: 0,
+  }
+})
\ No newline at end of file

src/wire/methods/StripeCardSelector.js

+// @flow
+import * as React from 'react'
+import { View, ActivityIndicator, Alert } from 'react-native';
+
+import { CommonStyle as CS } from '../../styles/Common';
+import api from '../../common/services/api.service';
+import stripe, { initStripe } from '../../common/services/stripe.service';
+import Button from '../../common/components/Button';
+import i18nService from '../../common/services/i18n.service';
+import StripeCardCarousel from './StripeCardCarousel';
+
+type PropsType = {
+  onCardSelected: ?Function
+};
+
+type StateType = {
+  cards: Array<any>,
+  loaded: boolean,
+  inProgress: boolean
+};
+
+/**
+ * Stripe card selector
+ */
+export default class StripeCardSelector extends React.PureComponent<PropsType, StateType> {
+  intentKey = '';
+  intentId = '';
+
+  state = {
+    cards: [],
+    loaded: false,
+    inProgress: false
+  }
+
+  /**
+   * Component did mount
+   */
+  componentDidMount() {
+    this.loadCards();
+  }
+
+  /**
+   * On card deleted
+   * @param {any} card
+   */
+  onCardDeleted = (card: any) => {
+    const index = this.state.cards.findIndex((r: any): any => r === card);
+    this.removeCard(index);
+  }
+
+  /**
+   * Render
+   */
+  render(): React.Node {
+    return (
+      <View>
+        {(!this.state.loaded) && <ActivityIndicator/>}
+        {(this.state.cards.length > 0) && <StripeCardCarousel
+          paymentmethods={this.state.cards}
+          onCardSelected={this.props.onCardSelected}
+          onCardDeleted={this.onCardDeleted}
+        />}
+        <View style={[CS.rowJustifyCenter, CS.marginTop2x]}>
+          <Button inverted text="Add Card" onPress={this.addNewCard} textStyle={[CS.fontL, CS.padding]}/>
+        </View>
+      </View>
+    )
+  }
+
+  /**
+   * Load cards
+   */
+  async loadCards(): Promise<any> {
+
+    try {
+      const result = await api.get('api/v2/payments/stripe/paymentmethods');
+
+      if (result && result.paymentmethods) {
+        return this.setState({cards: result.paymentmethods.reverse(), loaded: true});
+      }
+    } catch (err) {
+      console.log(err);
+    }
+
+
+    this.setState({loaded: true});
+  }
+
+  /**
+   * Show error message
+   * @param {string} message
+   */
+  showError(message: string) {
+    Alert.alert(message + '\n' + i18nService.t('tryAgain'));
+  }
+
+  /**
+   * Get setup intent from server
+   */
+  async getSetupIntent(): Promise<boolean> {
+    try {
+      const { intent } = (
+        await api.put('api/v2/payments/stripe/intents/setup')
+      );
+      this.intentKey = intent.client_secret;
+      this.intentId = intent.id;
+      return true;
+    } catch(err) {
+      this.showError(i18nService.t('cantReachServer'));
+      return false;
+    }
+  }
+
+  /**
+   * Remove a credit card from the payment methods
+   * @param {number} index
+   */
+  async removeCard(index: number): Promise<any> {
+
+    if (this.state.inProgress) return;
+
+    this.setState({inProgress: true});
+
+    try {
+      await api.delete('api/v2/payments/stripe/paymentmethods/' + this.state.cards[index].id)
+
+      const cards = this.state.cards.slice(0);
+      cards.splice(index, 1);
+
+      this.setState({cards, inProgress: false})
+    } catch (err) {
+      this.setState({inProgress: false});
+    }
+  }
+
+  /**
+   * Add a new credit card using a setup intent
+   */
+  addNewCard = async (): Promise<any> => {
+
+    try {
+      const intent = this.getSetupIntent();
+
+      if (!intent) return;
+
+      await initStripe();
+
+      const paymentMethod = await stripe.paymentRequestWithCardForm({requiredBillingAddressFields: 'full'});
+
+      const params = {
+        paymentMethodId: paymentMethod.id,
+        clientSecret: this.intentKey
+      };
+
+
+      const { setupIntent, error } = await stripe.confirmSetupIntent(params);
+
+      if (error) {
+        throw error;
+      }
+
+      // we log the result
+      console.log('Setup Intent Confirmed', setupIntent);
+
+      // finally we save the card
+      this.saveCard();
+
+    } catch (err) {
+      if (err.message && err.message === 'Cancelled by user') return;
+      this.showError(err.message || i18nService.t('errorMessage'));
+      console.log(err);
+    }
+
+  }
+
+  /**
+   * Save card
+   */
+  async saveCard(): Promise<any> {
+    const { success } = await api.post(
+      'api/v2/payments/stripe/paymentmethods/apply',
+      {
+        intent_id: this.intentId,
+      }
+    );
+
+    this.intentKey = '';
+    this.loadCards();
+  }
+}
\ No newline at end of file

src/wire/tiers/SubscriptionTierCarousel.js

 import React, { PureComponent } from 'react';
-import { Text, View } from 'react-native';
-import Carousel from 'react-native-snap-carousel';
+import { Text, View, StyleSheet } from 'react-native';
+import Carousel, { Pagination } from 'react-native-snap-carousel';
 
 import featuresService from '../../common/services/features.service';
 import { CommonStyle as CS } from '../../styles/Common';
 import viewportPercentage from '../../common/helpers/viewportPercentage';
+import i18n from '../../common/services/i18n.service';
 
 const {value: slideWidth, viewportHeight} = viewportPercentage(75);
 const {value: itemHorizontalMargin} = viewportPercentage(2);
@@ -46,7 +47,7 @@ export default class SubscriptionTierCarousel extends PureComponent {
     }];
     const methodsMap = [{ method: 'tokens', currency: 'tokens' }];
 
-    if (featuresService.has('wire-multi-currency') || true) {
+    if (featuresService.has('wire-multi-currency')) {
       methodsMap.push({ method: 'money', currency: 'usd' });
     }
 
@@ -85,7 +86,7 @@ export default class SubscriptionTierCarousel extends PureComponent {
     return (
       <View key={`rewards${row.item.amount}`} style={[CS.rowJustifyCenter, CS.backgroundLightGreyed, CS.borderRadius5x, CS.padding2x, CS.border, CS.borderGreyed]}>
         <View style={CS.columnAlignCenter}>
-          <Text style={[CS.fontXXL, CS.fontMedium, CS.colorDark]}>{amount} {this.getPluralizedCurrency(currency, row.item.amount)} / month</Text>
+          <Text style={[CS.fontXXL, CS.fontMedium, CS.colorDark]}>{i18n.t('wire.amountMonth',{amount: amount + ' ' + this.getPluralizedCurrency(currency, row.item.amount)})}</Text>
           <Text numberOfLines={5} style={[CS.fontL, CS.fontHairline, CS.colorDark]}>{row.item.description}</Text>
         </View>
       </View>
@@ -109,20 +110,48 @@ export default class SubscriptionTierCarousel extends PureComponent {
     let current = this.rewards.findIndex(r => r.amount == this.props.amount && r.currency == this.props.currency);
 
     return (
-      <Carousel
-        onSnapToItem={this.onSelected}
-        enableSnap={true}
-        // layout={'tinder'}
-        layoutCardOffset={`10`}
-        ref={(c) => { this._carousel = c; }}
-        data={this.rewards}
-        firstItem={current}
-        renderItem={this._renderItem}
-        inactiveSlideScale={0.94}
-        inactiveSlideOpacity={0}
-        sliderWidth={viewportHeight}
-        itemWidth={itemWidth}
-      />
+      <View style={[]}>
+        <Pagination
+          dotsLength={this.rewards.length}
+          activeDotIndex={current === -1 ? 0 : current}
+          containerStyle={styles.paginatorContainer}
+          dotStyle={styles.dot}
+          inactiveDotOpacity={0.4}
+          inactiveDotScale={0.6}
+        />
+        <Carousel
+          onSnapToItem={this.onSelected}
+          containerCustomStyle={styles.carousel}
+          enableSnap={true}
+          // layout={'tinder'}
+          layoutCardOffset={`10`}
+          ref={(c) => { this._carousel = c; }}
+          data={this.rewards}
+          firstItem={current}
+          renderItem={this._renderItem}
+          inactiveSlideScale={0.94}
+          inactiveSlideOpacity={0}
+          sliderWidth={viewportHeight}
+          itemWidth={itemWidth}
+        />
+
+      </View>
     )
   }
-}
\ No newline at end of file
+}
+
+const styles = StyleSheet.create({
+  carousel: {
+    flexGrow: 0,
+  },
+  paginatorContainer: {
+    paddingVertical: 10
+  },
+  dot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    marginHorizontal: 0,
+    backgroundColor: 'rgba(46, 46, 46, 0.92)'
+  }
+})
\ No newline at end of file

yarn.lock

@@ -9339,6 +9339,11 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tipsi-stripe@8.0.0-beta.6:
+  version "8.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/tipsi-stripe/-/tipsi-stripe-8.0.0-beta.6.tgz#801c9e4c4d8dfab4a57c6f59ec507da478be2973"
+  integrity sha512-+/XErvJdiQofIO+dMN1AC9mxQiwYKvCekRHCFSCftTHS6Skn3Lx131GDhNqf0tM+IMAaAJhwq1HNluREm1rcpQ==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"