wecre8-frames-react-native v1.2.4

Frames React Native

Start accepting online card payments in just a few minutes with Frames. It's quick and easy to integrate, accepts online card payments from all major credit cards, and is customizable to your brand.

:nerd_face: How does it work?

• Accepting card payments generally has 2 main stages. The first is collecting the card details securely (client-side), and the second is processing a payment via the API (server-side). Frames is addressing only the first stage. The server-side interaction can easily be achieved by using our various server side SDKs.
• The Frames React Nave project provides customisable inputs for the card details with the core purpose of tokenising the sensitive information and giving back a secure token (alongside various card metadata, like the BIN information).

Frames is meant to be used in conjunction with the rest of your checkout page elements as opposed to being an independent view. That way, you have full control of the UI, and you can implement other payment methods or collect other details (like billing details) alongside it.

:rocket: Install

yarn add frames-react-native

:computer: Import

import {
  Frames,
  CardNumber,
  ExpiryDate,
  Cvv,
  SubmitButton,
} from "frames-react-native";

:tada: Example

import React from "react";
import { StyleSheet, View, TouchableHighlight } from "react-native";
import {
  Frames,
  CardNumber,
  ExpiryDate,
  Cvv,
  SubmitButton,
} from "frames-react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Frames
        config={{
          debug: true,
          publicKey: "pk_test_4296fd52-efba-4a38-b6ce-cf0d93639d8a",
        }}
        cardTokenized={(e) => {
          alert(e.token);
        }}
      >
        <CardNumber
          style={styles.cardNumber}
          placeholderTextColor="#9898A0"
          // showIcon={false} in case you don't want to see the card scheme logo
        />

        <View style={styles.dateAndCode}>
          <ExpiryDate
            style={styles.expiryDate}
            placeholderTextColor="#9898A0"
          />
          <Cvv style={styles.cvv} placeholderTextColor="#9898A0" />
        </View>

        <SubmitButton
          title="Pay Now"
          style={styles.button}
          textStyle={styles.buttonText}
          onPress={() => console.log("merchant action")}
        />
      </Frames>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000000",
    alignItems: "center",
    justifyContent: "flex-start",
    paddingTop: 80,
    paddingLeft: 10,
    paddingRight: 10,
  },
  dateAndCode: {
    marginTop: 15,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  cardNumber: {
    fontSize: 18,
    height: 50,
    color: "#FEFFFF",
    backgroundColor: "#1B1C1E",
    borderColor: "#3A4452",
    borderRadius: 5,
    borderWidth: 0,
  },
  expiryDate: {
    fontSize: 18,
    height: 50,
    width: "48%",
    color: "#FEFFFF",
    backgroundColor: "#1B1C1E",
    borderWidth: 0,
  },
  cvv: {
    fontSize: 18,
    height: 50,
    width: "48%",
    color: "#FEFFFF",
    backgroundColor: "#1B1C1E",
    borderWidth: 0,
  },
  button: {
    height: 50,
    borderRadius: 5,
    marginTop: 20,
    justifyContent: "center",
    backgroundColor: "#4285F4",
  },
  buttonText: {
    color: "white",
    fontSize: 16,
  },
});

Trigger tokenization

The tokenization is triggered when the SubmitButton is pressed. The process of getting the token is async, so the outcome of the tokenization will be shared in the cardTokenized or cardTokenizationFailed handlers.

The props for the Frames wrapper component

The cardholder information

The handlers