react-native-datatrans

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 Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-datatrans and add RNDatatransPayment.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNDatatransPayment.a to your project's Build Phases ➜ Link 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
}