react-native-datatrans

Getting started

``bash


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:

$3

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

$3

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

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

$3


#### 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
2. 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')
`
3. Insert the following lines inside the dependencies block in android/app/build.gradle:
`
compile project(':react-native-datatrans')
`

Usage

First initialize the app

`javascript
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

`javascript
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

`javascript
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)
`

$3

`typescript
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
}
`

$3

`typescript
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
}
``