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
          style={styles.button}
          textInputProps={{
            title: "Pay Now",
            style: 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

| prop | type | description | | ----------------- | ------- | --------------------------------------------- | | config.publicKey | string | The public key from your Checkout.com account | | config.debug | boolean | Trigger the debug mode () | | config.cardholder | object | The cardholder name and billing details |

The cardholder information

| prop | type | description | | -------------------------------------- | ------ | -------------------------------- | | cardholder.name | string | The name of the cardholder | | cardholder.phone | string | The phone number of the customer | | cardholder.billingAddress | object | The cardholder billing address | | cardholder.billingAddress.addressLine1 | string | Address line 1 | | cardholder.billingAddress.addressLine2 | string | Address line 2 | | cardholder.billingAddress.zip | string | Zip | | cardholder.billingAddress.city | string | City | | cardholder.billingAddress.state | string | State | | cardholder.billingAddress.country | string | Country |

The handlers

| prop | type | description | | ---------------------- | -------- | -------------------------------------------------------------------------------------------------------- | | frameValidationChanged | function | Triggered when a field's validation status has changed. Use it to show error messages or update the UI. | | paymentMethodChanged | function | Triggered when a valid payment method is detected based on the card number being entered. | | cardValidationChanged | function | Triggered when the state of the card validation changes. | | cardTokenized | function | Triggered after a card is tokenized. Here you will get the card token alongside general card information | | cardTokenizationFailed | function | Triggered after the card tokenization fails. | | cardBinChanged | function | Triggered when the user inputs or changes the first 8 digits of a card. |

Improvements based on Checkout.com React Native SDK

Checkout.com React Native SDK