# frames-react-native-wrapper

> React Native wrapper of Checkout.com Frames.

Latest version **1.0.4** (published 2021-03-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install frames-react-native-wrapper
pnpm add frames-react-native-wrapper
yarn add frames-react-native-wrapper
bun add frames-react-native-wrapper
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2021-03-22 |
| First published | 2021-03-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 24.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | gcx3829 |
| Maintainers | gcx3829 |

## Links

- npm: https://www.npmjs.com/package/frames-react-native-wrapper
- Homepage: https://github.com/gcx3829/frames-react-native-wrapper
- npm.io page: https://npm.io/package/frames-react-native-wrapper

## Dependencies (3)

- [react](https://npm.io/package/react.md) 16.13.1
- [react-native](https://npm.io/package/react-native.md) 0.63.4
- [react-native-webview](https://npm.io/package/react-native-webview.md) ^11.3.1

## Recent versions

- 1.0.4 (latest) — 2021-03-22
- 1.0.3 — 2021-03-22
- 1.0.2 — 2021-03-07
- 1.0.0 — 2021-03-05

## README

This project is a simple React Native wrapper of [Checkout.com Frames](https://docs.checkout.com/docs/frames).

# Install

```bash
npm install frames-react-native-wrapper
```

# Demo

![Image of Demo](https://upload.cc/i1/2021/03/07/r7YQqw.gif)

# Example Usage

```js
import { Frames } from "frames-react-native-wrapper";

/**
 * ...other code
 */

<Frames
    config={{
        debug: true,
        publicKey: 'pk_test_6e40a700-d563-43cd-89d0-f9bb17d35e73',
        localization: {
            cardNumberPlaceholder: 'Card number',
            expiryMonthPlaceholder: 'MM',
            expiryYearPlaceholder: 'YY',
            cvvPlaceholder: 'CVV',
        },
        style: {
            base: {
                fontSize: '17px',
            },
        },
    }}
    ready={() => {}}
    frameActivated={(e) => {}}
    frameFocus={(e) => {}}
    frameBlur={(e) => {}}
    frameValidationChanged={(e) => {}}
    paymentMethodChanged={(e) => {}}
    cardValidationChanged={(e) => {}}
    cardSubmitted={() => {}}
    cardTokenized={(e) => {}}
    cardTokenizationFailed={(e) => {}}
    submitCardCreator={(submitCard) => {}}
/>
```

# Props

| prop                   | required | description                                                                                                                      |
| ---------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
| config                 | true     |See [Checkout.com Frames](https://docs.checkout.com/docs/frames-reference#section-configuration-options).                         |
| ready                  | false    |Triggered when Frames is registered on the global namespace and safe to use.                                                      |
| frameActivated         |  false   |Triggered when the form is rendered.                                                                                              |
| frameFocus             | false    |Triggered when an input field receives focus. Use it to check the validation status and apply the wanted UI changes.              |
| frameBlur              | false    |Triggered after an input field loses focus. Use it to check the validation status and apply the wanted UI changes.                |
| frameValidationChanged | false    |Triggered when a field's validation status has changed. Use it to show error messages or update the UI.                           |
| paymentMethodChanged   | false    |Triggered when a valid payment method is detected based on the card number being entered. Use this event to change the card icon. |
| cardValidationChanged  | false    |Triggered when the state of the card validation changes.                                                                          |
| cardSubmitted          | false    |Triggered when the card form has been submitted.                                                                                  |
| cardTokenized          | true     |Triggered after a card is tokenized.                                                                                              |
| submitCardCreator      | true     |Return static function `submitCard` for tokenization                                                                              |

---
_Source: https://npm.io/package/frames-react-native-wrapper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._