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={'[email protected]'}
          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: "[email protected]") | 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