payengine-react-native v1.0.4

payengine-react-native

React Native SDK for PayEngine

Installation

npm install payengine-react-native

Expo managed project

To be updated

Install dependencies into a bare React Native project

In your project directory, run:

npm install react-native-webview

Visit https://github.com/react-native-webview/react-native-webview to view additional installation step if you're using manually linking.

From React Native 0.6.0 and higher, linking is automatic. So you don't need to run react-native link

If you're on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking.

npx pod-install ios

Usage

Configuration

const configuration = {
  publicKey: "pk_dev_lQm6u1h9yaSPO6qGJaAt4lTf5GBlehCI",
  scriptURL: "http://localhost:3000/js/1.0.0/embed.js",
  logLevel: 1
}

Embedded UI

import { PayEngine } from 'payengine-react-native';

<PayEngine
    type="boarding"
    merchant-id="07f6ee61-1548-4ffa-a1dc-f671c837ceb9"
    events={{
      stepChange: (eventData: any) => {
        console.log({ eventData })
      }
    }}
    config={configuration} />

Secure Fields

import * as React from 'react';
import { View, Text, StyleSheet, Button, ScrollView } from 'react-native';
import { SecureFields } from 'payengine-react-native';

export function Payment() {
  const secureFieldRef = React.createRef<any>()
  const [secureFieldsResult, setSecureFieldsResult] = React.useState('')
  const [submitting, setSubmitting] = React.useState(false)

  const createCard = async () => {
    try {
      setSubmitting(true)
      const result = await secureFieldRef.current?.createCard()
      setSecureFieldsResult(result)
    } catch (err: any) {
      setSecureFieldsResult(err.message)
    } finally {
      setSubmitting(false)
    }
  }


  return (
    <View style={styles.container}>
      <Text>Welcome to PayEngine React Native SDK example</Text>
      <Text>Click the hamburger menu above to browse our examples</Text>

      <View style={{ height: 30 }} />
      <Text style={{ fontSize: 18, fontWeight: '600' }}>Secure Fields</Text>
      <SecureFields.CollectManager ref={secureFieldRef} config={configuration}>
        <SecureFields.CardHolderNameField style={styles.field} />
        <SecureFields.CardNumberField placeholder="Card number" style={styles.field} />
        <View style={{ display: 'flex', flexDirection: "row", width: '100%', height: 50, margin: 8 }}>
          <SecureFields.ExpDateTextField style={[styles.field, { flex: 1, margin: 0, marginRight: 10 }]} />
          <SecureFields.CVCField style={[styles.field, { flex: 1, margin: 0 }]} />
        </View>
        <SecureFields.ZipCodeField placeholder="Zip code" style={styles.field} />

        <Button disabled={submitting} onPress={() => createCard()} title="Create Card" />

      </SecureFields.CollectManager>
      <ScrollView scrollEnabled={true} style={{ flex: 1, width: '100%', backgroundColor: 'lightyellow', padding: 10, marginVertical: 20 }}>
        <Text>{JSON.stringify(secureFieldsResult, null, 4)}</Text>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    display: 'flex',
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center'
  },
  field: {
    width: '100%',
    height: 50,
    margin: 8,
    padding: 5
  }
})