react-native-adyen-cse

Adyen client side encryption library for react native projects.

It is for project when you don't need use Adyen Drop-in integration and just need tokenize card info or use your custom interface for card data.

Installation

yarn add git+https://github.com/reservamos/react-native-adyen-cse.git#1.1.0

Requirements

Check if your app is compatible:

• Android mininal sdk version: 21 - Android Lollipop
• iOS minimal build target: iOS 12.4

Get your Client Encryption Public Key.

You need to set this as your publicKey when using the react-native-adyen-cse library. To get your public key:

• Sign in to your Customer Area using your company-level account.

• Navigate to Developers > API credentials.

• Click on your web service user (ws@Company.[YourCompanyAccount]) in the users list.

  This opens the Edit Web Service User page.

• In the Client-Side Encryption panel, copy the Client Encryption Public Key.

Usage

import React, { useState, useEffect } from 'react';
import { View, Text, Button, ScrollView } from 'react-native';
import { initAdyen, encryptCard } from 'react-native-adyen-cse';

// ...

const App = () => {
  const publicKey = '1001|...'; //add your Adyen CSE Public Key
  const [encryptedCard, setEncryptedCard] = useState(null);

  const card = {
    cardNumber: '4917610000000000',
    cvv: '737',
    expMonth: '03',
    expYear: '2030',
  };

  useEffect(() => {
    initAdyen(publicKey, 'test'); // environment can be ['test'|'live']
  }, []);

  const onSubmit = async () => {
    const { cardNumber, expMonth, expYear, cvv } = card;
    const encrypted = await encryptCard(cardNumber, expMonth, expYear, cvv);
    setEncryptedCard(encrypted);
  };
};

return (
  <View>
    <View
      style={{
        margin: 12,
      }}
    >
      <Button onPress={onSubmit} title="Encrypt" />
    </View>
    {encryptedCard && (
      <ScrollView
        style={{
          margin: 12,
          borderWidth: 1,
          borderRadius: 5,
          borderColor: '#cecece',
          padding: 10,
        }}
      >
        <Text>{JSON.stringify(encryptedCard)}</Text>
      </ScrollView>
    )}
  </View>
);

export default App;

Demo app

you can see an example to use react-native-adyen-cse library in our demo app.

iOS	Android

References

• Custom Card Integration
• Adyen iOS Drop-in
• Adyen Android Drop-in

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

react-native-adyen-cse