import React, { Component } from "react";
import { View, Button } from "react-native";
import BlueSnapEncrypter from "react-native-bluesnap-encrypter";

class MyComponent extends Component {
    constructor(props, context) {
        super(props, context);

        this.encrypter = null;
    }

    onEncrypt = async () => {

        const encrypted = await this.encrypter.encrypt({
            creditCardNumber: "1234123412341234",
            cvvNumber: "123"
        });

        console.log(encrypted);
        /*
            {
                "ccLast4Digits": "1234",
                "encryptedCreditCard": "ENCYPTED",
                "encryptedCvv": "ENCYPTED"
            }
        */
    }

    render() {
        return (
            <View>
                <Button
                    title="Encrypt Credit Card"
                    onPress={this.onEncrypt}
                />

                <BlueSnapEncrypter
                    clientEncryptionKey="YOUR_CLIENT_ENCRYPTION_KEY"
                    bluesnapVersion="1.0.3"
                    fraudSessionId="XXXX"
                    ref={(encrypter) => this.encrypter = encrypter}
                />
            </View>
        );
    }
}

const encrypted = await this.encrypter.encrypt({
    creditCardNumber: "1234123412341234",
    cvvNumber: "123"
});