Bitcoins are buzz word these days. It increased in value from about $570 to more than $5,300 , a whooping 770% increase, in just the last year. Bitcoins are crypto-currency, i.e. they can be used like a currency, but don’t physically exist. They are digital cash that exist on different computers. Bitcoins can be used in transactions and can be transfered between people, just like other currency. Best thing about bitcoin is that there is no financial system controlling there existence and value.
In this article we will learn how we can add bitcoin payment gateway our React Native App. We will add bitcoin payment feature to a boiler plate membership app. This boiler plate app is built with React Native and Firebase and has the following features :
- Login
- Registration
- Email verification
- User Listing
- User’s Profile
- In App Messaging/ Live Chat
- Skill based filter
- Distance based filter ( similar to tinder)
You can check the demo of this app here. You can check the features of this app here and if you want, you can get it from here.
So we will add a ‘Hire Me’ or ‘Make Payment’ button to the profile screen and link it to the bitcoin payment screen. Below is the code for bitcoin payment screen :
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
StatusBar,
TouchableOpacity,
ActivityIndicator,
Button
} from 'react-native';
import QRCode from 'react-native-qrcode';
const amountInBTC = 0.0015
const transactionId = 0.00000001
const APIKEY = "dde9-34bf-314b-f0ab";
const getAddressesEndpoint = "https://block.io/api/v2/get_my_addresses/?api_key="+APIKEY
const getBalanceInWalletEndpoint = "https://block.io/api/v2/get_address_balance/?api_key="+APIKEY+"&addresses="
export default class Bpayment extends Component {
constructor(props) {
super(props);
this.state = {
wallet: "",
amount: 0,
isLoading: true,
status: 0 // unknown status
}
}
componentWillMount(){
const _this = this
const URL = getAddressesEndpoint
fetch(URL, {
method: 'get',
mode: 'no-cors'
}).then(function(response){
return response.json();
}).then(function(json) {
const amount = amountInBTC + transactionId
_this.oldBalance = json.data.addresses[0].available_balance
_this.setState({wallet: json.data.addresses[0].address, isLoading: false, amount});
});
}
_onPressBack(){
const {goBack} = this.props.navigation
goBack()
}
_confirmPayment(){
const _this = this
const URL = getBalanceInWalletEndpoint + this.state.wallet
fetch(URL, {
method: 'get',
mode: 'no-cors'
}).then(function(response){
return response.json();
}).then(function(json) {
const newBlance = json.data.available_balance
const newBlanceWithAmount = parseFloat(_this.oldBalance) + _this.state.amount
if(newBlance == newBlanceWithAmount)
_this.setState({ status: 1}) // success
else
_this.setState({ status: 2}) // error
});
}
renderPayment(){
return(
<View style={{ flex: 1, justifyContent: "center", alignItems: 'center' }} >
{
this.state.status ? this.state.status == 1 ? (<Text style={styles.success}>Bitcoins received, payment successful</Text>) : (<Text style={styles.error}>Bitcoins not received, contact admin for assistance or try after few mins.</Text>) : (<View />)
}
<Text style={styles.info}>
Amount : { this.state.amount } BTC
</Text>
<QRCode
value={this.state.wallet}
size={200}
bgColor='black'
fgColor='white'/>
<Text style={styles.info}>
{ this.state.wallet }
</Text>
<Button
onPress={() => this._confirmPayment() }
title="Confirm Payment"
color="#81c04d"
/>
<Text style={{marginTop: 10}}>Press the button after making payment</Text>
</View>
)
}
render() {
return (
<View style={styles.container}>
<StatusBar barStyle="light-content"/>
<View style={styles.toolbar}>
<TouchableOpacity onPress={() => this._onPressBack() }><Text style={styles.toolbarButton}>Back</Text></TouchableOpacity>
<Text style={styles.toolbarTitle}>Make Payment</Text>
<Text style={styles.toolbarButton}></Text>
</View>
<View style={{ flex: 1, justifyContent: "center", alignItems: 'center' }}>
{ this.state.isLoading ? (<ActivityIndicator styleAttr='Large'/>) : this.renderPayment() }
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
success: {
fontSize: 11,
textAlign: 'center',
color: "green"
},
error: {
fontSize: 11,
textAlign: 'center',
color: "red"
},
info: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
fontSize: 17,
fontWeight: 'bold',
marginTop: 20,
marginBottom: 20
}
});
In the above code, we are using block.io api, but you can use any other api of your choice if you want (, because there support team never respond). We have divided the total amount of transaction in two parts. The first part, i.e. ‘amountInBTC’, is the net amount that we want it to reach the receiver’s wallet ( bitcoin account). The second part i.e. ‘transactionId’ is the unique id we want to give to the total amount. So that all amount are unique and we can distinguish every transaction with it’s amount. Some small amount will be deducted from senders wallet as transaction fees. Transaction fee, is the amount that will payed to the bitcoin miners for their hard work of verifying and adding transaction to the public ledger. In the componentWillMount we make api call and get the wallet address and amount in wallet before the transaction. Next we show the user wallet address and QR code so that he can make the payment. We also provide user with option to confirm transaction after making payment by pressing the ‘Confirm Payment’ button. When user press ‘Confirm Payment’ button we make second api call and get the current balance of wallet. If sum of old wallet balance ( before transaction) and total transaction amount is equal to new wallet balance ( after transaction ) then we show the message of transaction successful . If there is difference then we inform user that transaction was not successful.
So, this how we can add bitcoin payment gateway to our react native app. I hope you would have enjoyed the tutorial and find it informative. Subscribe to our news letter and YouTube video channel to stay tuned for such exciting React Native tutorials.
Video Tutorial