begateway-react-native-sdk v0.1.2

begateway-react-native-sdk

Installation

npm install begateway-react-native-sdk
 // OR
yarn add 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

Custom styles

fields_form

button_buy

cardholder

card_number

expire_date

CVC_CVV

save_card

button_remove

button_another_card

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