npm

Don't miss out on this year's npm Pride t-shirt designs!Order your favorites here »

@creadi/react-native-datatrans

1.0.7 • Public • Published

react-native-datatrans

Getting started

# Clone this repository. (in parent folder) 
git clone https://github.com/creadi/simpego-app-react-native.git
 
# Install dependencies 
yarn add file:../DatatransPayment
 
# Link libraries 
react-native link react-native-datatrans
 
# Require library in the Podfile 
pod 'RNDatatransPayment', :path => '../node_modules/react-native-datatrans'
 
# Install required native iOS packages (via pod) 
cd ios && pod install

To make TWINT work you have to do the following:

Set up a url scheme

https://developer.apple.com/documentation/uikit/core_app/communicating_with_other_apps_using_custom_urls

In Xcode navigate to Project targets > Info tab > Url Types

Add app url prefix scheme

Add the url scheme to the init options

When you initialize the library you need to add the twint property

const datatrans = new Datatrans({ ... twint: 'ch.shop' })

Manual installation

iOS

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-datatrans and add RNDatatransPayment.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNDatatransPayment.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<

Android

  1. Open up android/app/src/main/java/[...]/MainActivity.java
  • Add import com.reactlibrary.RNDatatransPaymentPackage; to the imports at the top of the file
  • Add new RNDatatransPaymentPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-datatrans'
    project(':react-native-datatrans').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-datatrans/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      compile project(':react-native-datatrans')
    

Usage

First initialize the app

import Datatrans from 'react-native-datatrans'
const datatrans = new Datatrans({ merchantId: '1100007268', twint: 'ch.shop', signature: '171127105041804302', testing: false })

You can pay in hidden mode by passing card number and the other checkout parameters

datatrans.payWithCard({
  brand: 'Visa',
  number: '4242424242424242',
  expMonth: 12,
  expYear: 2018,
  cvv: '123',
  name: 'Dani Lazarov',
  amount: 199.99,
  currencyCode: 'CHF',
  country: 'Switzerland',
  refNo: '20171207-test-4',
})
.then(res => console.log('Payment was successful', res)
.catch(err => console.error('There was an error', err)

Or open app in ui mode

datatrans.payWithCardUI({
  amount: 200,
  currencyCode: 'CHF',
  country: 'Switzerland',
  refNo: '20171207-test-4',
})
.then(res => console.log('Payment was successful', res)
.catch(err => console.error('There was an error', err)

Config parameters

options = { 
  merchantId: string, // e.g The merchant id 
  twint: string, // e.g Twint url as defined in description above
  signature: string, // e.g Secret  
  testing: false // e.g The way we are running the app -> test mode or not
}

Payments parameters

options = {
  brand: 'Visa' | 'Mastercard' | 'Diners' | 'Amex' | 'Jcb' | 'Myone' | 'Discover',
  number: string, // e.g. 4242424242424242 no spaces
  expMonth: number, // e.g. 12 2 digit month
  expYear: number, // e.g. 2025 full year 4 digits
  cvv: string, // e.g. 123 3digit number on the back of the card
  name: string, // e.g. Cardholder name
  amount: number, // e.g. A positive number in the smallest currency unit representing the amount to charge the customer (e.g., 1099 for a €10.99 payment).
  currencyCode: string, // e.g. CHF, USD, GBP
  country?: string, // e.g. Switzerland
  refNo: string, // e.g. This should be provided by your backend
}

install

npm i @creadi/react-native-datatrans

Downloadsweekly downloads

29

version

1.0.7

license

MIT

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability