begateway-react-native-sdk
Installation
npm install @begateway/begateway-react-native-sdk
// OR
yarn add @begateway/begateway-react-native-sdk
Make sure that you have the following libraries installed:
'react-native-svg'
'react-native-webview'
'@react-native-async-storage/async-storage'
'@google/react-native-make-payment'
'react-native-awesome-card-io'
'react-native-payments'
npm install react-native-svg
// OR
yarn add react-native-svg
npm install react-native-webview
// OR
yarn add react-native-webview
npm install @react-native-async-storage/async-storage
// OR
yarn add @react-native-async-storage/async-storage
npm install @google/react-native-make-payment
// OR
yarn add @google/react-native-make-payment
npm install react-native-awesome-card-io
// OR
yarn add react-native-awesome-card-io
npm install react-native-payments
// OR
yarn add react-native-payments
check that it has been fixed for react-native-payments:
https://github.com/naoufal/react-native-payments/commit/578f55e8ac2b98360126f6b569a35fa3c9b955de
pod install
// OR
Sync Project with Gradle Files
Usage
import * as React from 'react';
import { useState } from 'react';
import {
View,
Image,
SafeAreaView,
StyleSheet,
Text,
TouchableOpacity,
} from 'react-native';
import { BeGateProvider, CheckPaymentType } from 'react-native-bepaid-demo';
export const App = () => {
const [isProvider, setIsProvider] = useState(false);
const [response, setResponse] = useState<CheckPaymentType | null>(null);
console.log('RESPONSE :', response?.checkout.status);
return (
<View>
{isProvider ? (
<BeGateProvider
public_key_or_token={'your public key'}
closeHandler={setIsProvider}
responseHandler={setResponse}
test={true}
transaction_type={'payment'}
amount={4299}
currency={'GBP'}
description={'Some description about product'}
language={'en'}
holder={'Ivan Ivanov'}
customer_country={'GB'}
customer_email={'jake@example.com'}
customer_contract={true}
button_text={'Pay watch 42.99$'}
apple_merchant_id={'merchant.by.your-example'}
apple_merchant_name={'NAME BRAND'}
google_merchant_id={'JKF2DN9TRKZKZUIFF'}
google_merchant_name={'NAME BRAND'}
gateway_merchant_id={'646463'}
custom_styles={{
save_card: {
color_text: '#000000',
},
}}
/>
) : (
<Product callback={setIsProvider} />
)}
</View>
);
}
export const Product: FC<ProductType> = ({ callback }) => {
return (
<View>
<SafeAreaView>
<View style={styles.container}>
<View>
<Text style={styles.title}>Men's Watch</Text>
</View>
<Image style={styles.image} source={require('./images/watch.jpg')} />
<View>
<Text style={styles.description}>
Ultra thin Men's Watch 38 mm 5 ATM
</Text>
<Text style={styles.description}>Article: w-101/2023</Text>
<Text style={styles.description}>
Delivery time 1-3 working days
</Text>
</View>
<View>
<Text style={styles.price}>$99.99</Text>
</View>
<TouchableOpacity
activeOpacity={0.5}
style={styles.button}
onPress={() => callback(true)}
>
<Text style={styles.textButton}>Buy</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</View>
);
};
const styles = StyleSheet.create({
container: {
height: '100%',
alignItems: 'center',
justifyContent: 'space-between',
padding: 16,
},
title: {
fontSize: 24,
fontWeight: '600',
},
image: {
width: 150,
height: 250,
},
description: {
fontWeight: '500',
},
price: {
fontSize: 24,
fontWeight: '600',
color: '#36b42a',
},
button: {
width: '100%',
height: 58,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#36b42a',
borderRadius: 8,
},
textButton: {
fontSize: 24,
fontWeight: '600',
color: '#FFF',
letterSpacing: 1,
},
});
Props
Props | Type | Importance |
---|
public_key_or_token | string | require |
closeHandler | (value: boolean) => void | require |
responseHandler | (value: {}) => void | require |
test | boolean | require |
transaction_type | "authorization", "payment", "tokenization" | require |
amount | number integer (example: $99.99 -> 9999) | require |
currency | string (3) (ISO-4217, example: "USD") | require |
description | string (255) | require |
language | "az", "be", "da", "de", "en", "es", "fi", "fr", "it", "ja", "ka", "lv", "nb", "pl", "ro", "ru", "sv", "tr", "uk", "zh" | require |
holder | string (70) (example: "Rick Astley") | require |
customer_country | string (60) (ISO 3166-1 alpha-2, example: "GB") | require |
customer_email | string (255) (example: "jake@example.com") | require |
customer_address | string (510) (example: "Baker street 221b") | optional |
customer_city | string (120) (example: "London") | optional |
apple_merchant_id | string | optional |
apple_merchant_name | string | optional |
apple_display_label | string | optional |
google_merchant_name | string | optional |
google_merchant_id | string | optional |
gateway_merchant_id | string | optional |
attempts | number integer | optional |
customer_contract | boolean | optional |
button_text | string | optional |
custom_styles | {{ fields_form: {}, button_buy: {}, cardholder: {}, card_number: {}, expire_date: {}, CVC_CVV: {}, save_card: {}, button_remove: {}, button_another_card: {} }} | optional |
button_text | string | optional |
visible | ["email", "first_name", "last_name", "address", "city", "state", "zip", "phone", "country", "birth_date"] | optional |
read_only | ["email", "first_name", "last_name", "address", "city", "state", "zip", "phone", "country", "birth_date"] | optional |
device_id | string | optional |
receipt_text | string[] | optional |
contract | ["recurring", "oneclick", "credit", "card_on_file"] | optional |
initiator | "merchant", "customer" | optional |
type | "delayed_charge", "increment", "resubmission", "reauthorization", "no_show" | optional |
Custom styles
fields_form
Props | Type | Importance |
---|
font | string | optional |
color | string | optional |
color_active | string | optional |
color_error | string | optional |
button_buy
Props | Type | Importance |
---|
text_color | string | optional |
text_size | number | optional |
text_button | string | optional |
bg_color | string | optional |
bg_color_disable | string | optional |
cardholder
Props | Type | Importance |
---|
title_color | string | optional |
title_size | number | optional |
title_hide | boolean | optional |
title_text | string | optional |
hint_color | string | optional |
hint_size | number | optional |
hint_hide | boolean | optional |
hint_text | string | optional |
card_number
Props | Type | Importance |
---|
title_color | string | optional |
title_size | number | optional |
title_hide | boolean | optional |
title_text | string | optional |
hint_color | string | optional |
hint_size | number | optional |
hint_hide | boolean | optional |
hint_text | string | optional |
expire_date
Props | Type | Importance |
---|
title_color | string | optional |
title_size | number | optional |
title_hide | boolean | optional |
title_text | string | optional |
hint_color | string | optional |
hint_size | number | optional |
hint_hide | boolean | optional |
hint_text | string | optional |
CVC_CVV
Props | Type | Importance |
---|
title_color | string | optional |
title_size | number | optional |
title_hide | boolean | optional |
title_text | string | optional |
hint_color | string | optional |
hint_size | number | optional |
hint_hide | boolean | optional |
hint_text | string | optional |
secure_text | boolean | optional |
save_card
Props | Type | Importance |
---|
color_field | string | optional |
color_text | string | optional |
text_size | number | optional |
button_remove
Props | Type | Importance |
---|
text_color | string | optional |
text_size | number | optional |
text_button | string | optional |
bg_color | string | optional |
button_another_card
Props | Type | Importance |
---|
text_color | string | optional |
text_size | number | optional |
text_button | string | optional |
bg_color | string | optional |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library