# @tap-payments/careempay-web

> just for wrapping careem pay button to be used in react

Latest version **0.0.13-development** (published 2023-12-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install @tap-payments/careempay-web
pnpm add @tap-payments/careempay-web
yarn add @tap-payments/careempay-web
bun add @tap-payments/careempay-web
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.13-development |
| Published | 2023-12-21 |
| First published | 2023-11-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 227.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ahmed Elsharkawy |
| Maintainers | mostafaabobakr.tap, i.mousa, mahmoudallam, aya_tap, mud_fahmi, ahmedkaram-tap, haitham-tap, muhammadazhar007, elsharkawy, waqast, hala.q, reham_alsabbagh, kalpanatap, sadbarkhattak |

## Links

- npm: https://www.npmjs.com/package/@tap-payments/careempay-web
- npm.io page: https://npm.io/package/@tap-payments/careempay-web

## Dependencies (11)

- [axios](https://npm.io/package/axios.md) ^1.4.0
- [react](https://npm.io/package/react.md) ^18.2.0
- [crypto-js](https://npm.io/package/crypto-js.md) ^4.1.1
- [jsencrypt](https://npm.io/package/jsencrypt.md) ^3.3.2
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [lottie-react](https://npm.io/package/lottie-react.md) ^2.4.0
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.14.12
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.11.1
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.11.0
- [@tap-payments/browser-info](https://npm.io/package/@tap-payments/browser-info.md) ^1.0.2
- [@tap-payments/web-error-handing](https://npm.io/package/@tap-payments/web-error-handing.md) ^1.0.1

## Recent versions

- 0.0.13-development (latest) — 2023-12-21
- 0.0.31-development (development) — 2026-08-10
- 0.0.6-staging (staging) — 2025-02-17
- 0.0.12-development (test) — 2023-12-20
- 0.0.30-development — 2026-08-04
- 0.0.1 — 2025-03-04
- 0.0.29-development — 2025-02-20
- 0.0.28-development — 2025-02-16
- 0.0.5-staging — 2025-01-06
- 0.0.27-development — 2024-12-31
- 0.0.26-development — 2024-12-31
- 0.0.25-development — 2024-12-26
- 0.0.24-development — 2024-12-23
- 0.0.23-development — 2024-12-23
- 0.0.4-staging — 2024-11-28
- … 24 more at https://npm.io/package/@tap-payments/careempay-web/versions

## README

# CareemPay-Web

We at [Tap Payments](https://www.tap.company/) strive to make your payments easier than ever. We as a PCI compliant company, provide you a from the self solution to process CareemPay payments in your Web applications.

![demo](https://tap-sdks.b-cdn.net/careem-pay/demo/careempay-demo.gif)

# Get your keys

You can always use the example keys within our example app, but we do recommend you to head to our [onboarding](https://register.tap.company/sell) page. You will need to register your `domain` to get your `Key` that you will need to activate our `Card-Web`.

# Install

This is a [React](https://reactjs.org/) module available through the
[npm registry](https://www.npmjs.com/). Installation is done using the
[`npm install` command](https://docs.npmjs.com/getting-started/installing-npm-packages-locally):

```console
npm install @tap-payments/careem-pay-web
```

---------------------------- OR -------------------------

```console
yarn add @tap-payments/careem-pay-web
```

# Examples

## Simple Code Integration

#### ES6

```javascript
import React from 'react'
import { CareemPayButton, Environment, Locale } from '../src'

const App = () => {
	return (
		<CareemPayButton
			operator={{
				publicKey: 'pk_test_Vlk842B1EA7tDN5QbrfGjYzh'
			}}
			environment={Environment.Development}
			order={{
				amount: '20',
				currency: 'BHD'
			}}
			customer={{
				name: [
					{
						lang: Locale.EN,
						first: 'test',
						last: 'tester',
						middle: 'test'
					}
				],
				contact: {
					email: 'test@gmail.com',
					phone: {
						countryCode: '+20',
						number: '1000000000'
					}
				}
			}}
			onReady={() => console.log('Ready')}
			onClick={() => console.log('Clicked')}
			onCancel={() => console.log('Cancelled')}
			onError={(err) => console.log('Error', err)}
			onSuccess={(data) => console.log('Success', data)}
		/>
	)
}
```

#### Vanilla JS

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://tap-sdks.b-cdn.net/careem-pay/build-1.0.4-test/main.js"></script>
</head>

<body>
    <div id="careem-pay-button"></div>
    <script type="text/javascript">
        const { renderCareemPayButton, Environment, Locale } = window.TapSDKs
        renderCareemPayButton(
            {
                operator: {
                    publicKey: 'pk_test_Vlk842B1EA7tDN5QbrfGjYzh'
                },
                environment: Environment.Development,
                order: {
                    amount: 12,
                    currency: 'BHD'
                },
                customer: {
                    name: [
                        {
                            lang: Locale.EN,
                            first: 'test',
                            last: 'tester',
                            middle: 'test'
                        }
                    ],
                    contact: {
                        email: 'test@gmail.com',
                        phone: {
                            countryCode: '20',
                            number: '1000000000'
                        }
                    }
                },
                onReady: () => console.log('Ready'),
                onClick: () => console.log('Clicked'),
                onCancel: () => console.log('Cancelled'),
                onError: (err) => console.log('Error', err),
                onSuccess: (data) => console.log('Success', data)
				},
            'careem-pay-button'
        )
    </script>
</body>

</html>
```

## Advanced Code Integration

#### ES6

```javascript
import React from 'react'
import { CareemPayButton, Environment, Locale, Edges, ThemeMode, ColorStyle } from '../src'

const App = () => {
	return (
		<CareemPayButton
			operator={{
					publicKey: 'pk_test_Vlk842B1EA7tDN5QbrfGjYzh',
					hashstring: ''
				}}
				environment={Environment.Development}
				merchant={{
					id: ''
				}}
				order={{
					id: '',
					amount: '20',
					currency: 'BHD',
					 description: '',
                    reference: '',
                    metadata: {}
				}}
				customer={{
					name: [Ï
						{
							lang: Locale.EN,
							first: 'test',
							last: 'tester',
							middle: 'test'
						}
					],
					contact: {
						email: 'test@gmail.com',
						phone: {
							countryCode: '+20',
							number: '1000000000'
						}
					}
				}}
				interface={{
					locale: Locale.EN,
					edges: Edges.CURVED,
					theme: ThemeMode.LIGHT,
					colorStyle: ColorStyle.MONOCHROME,
					loader: true
				}}
				onReady={() => console.log('Ready')}
				onClick={() => console.log('Clicked')}
				onCancel={() => console.log('Cancelled')}
				onError={(err) => console.log('Error', err)}
				onSuccess={(data) => console.log('Success', data)}
		/>
	)
}Ï
```

#### Vanilla JS

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://tap-sdks.b-cdn.net/careem-pay/build-1.0.4-test/main.js"></script>
</head>

<body>
    <div id="careem-pay-button"></div>
    <script type="text/javascript">
        const { renderCareemPayButton, Edges, Environment, Locale, ThemeMode, ColorStyle } = window.TapSDKs
        renderCareemPayButton(
            {
                operator: {
                    publicKey: 'pk_test_Vlk842B1EA7tDN5QbrfGjYzh'
                },
                environment: Environment.Development,
                order: {
                    amount: 12,
                    currency: 'BHD',
                    description: '',
                    reference: '',
                    metadata: {}
                },
                customer: {
                    name: [
                        {
                            lang: Locale.EN,
                            first: 'test',
                            last: 'tester',
                            middle: 'test'
                        }
                    ],
                    contact: {
                        email: 'test@gmail.com',
                        phone: {
                            countryCode: '20',
                            number: '1000000000'
                        }
                    }
                },
                merchant: {
                    id: '',
                },
                interface: {
                    locale: Locale.EN,
                    edges: Edges.CURVED,
                    theme: ThemeMode.LIGHT,
                    colorStyle: ColorStyle.MONOCHROME,
                    loader: true
                },
                onReady: () => console.log('Ready'),
                onClick: () => console.log('Clicked'),
                onCancel: () => console.log('Cancelled'),
                onError: (err) => console.log('Error', err),
                onSuccess: (data) => console.log('Success', data),
            },
            'careem-pay-button'
        )
    </script>
</body>

</html>
```

# Configurations

| Configuration   | Description                                                                                                                             | Required | Type     | Sample                                                                                                                                                                                                                   |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| operator        | This is the `Key` that you will get after registering you domain.                                                                       | True     | `Object`   | `{"publicKey":"pk_test_YhUjg9PNT8oDlKJ1aE2fMRz7", "hashstring":""}`     |                                                               
| environment        | The environment of the SDK that provided from CareemPay                                                                 | True     | String   | `Development` |                                                                              
| order           | This is the `order id` that you created before or `amount` and `currency` to generate a new order. It will be linked this token.        | True     | `Object` | `{"id":"", "amount":1, "currency":"SAR", "description": "description","reference":"","metadata":{}}`                                                                                                      |
| invoice         | This is the `invoice id` that you want to link this token to if any.                                                                    | False    | `Object` | `{"id":""}`   |
| merchant        | This is the `Merchant id` that you will get after registering you bundle id.                                                            | True     | `Object` | ` {"id":""}`                                                                                                                                                                                                             |
| customer        | The customer details you want to attach to this tokenization process.                                                                   | True     | `Object` | ` {"id":"", "name":[{"lang":"en","first":"TAP","middle":"","last":"PAYMENTS"}], "contact":{"email":"tap@tap.company", "phone":{"countryCode":"+965","number":"88888888"}}}` |
| interface       | Needed to defines look and feel related configurations.                                                                                 | False    | `Object` | `{"locale": "en", "theme": "light", "edges": "curved", "direction": "dynamic", "powered": true, "colorStyle": "colored", "loader": true}`                                                                                |
| post            | This is the `webhook` for your server, if you want us to update you server to server.                                                   | False    | `Object` | `{"url":""}`                                                                                                                                                                                                            |

### Documentation per variable

- operator:
  - Responsible for passing the data that defines you as a merchant within Tap system.
- operator.publicKey:
  - A string, which you get after registering the app bundle id within the Tap system. It is required to correctly identify you as a merchant.
  - You will receive a sandbox and a production key. Use, the one that matches your environment at the moment of usage.
- operator.hashstring:
  - A string, which passed while creating the charge.
- environment:
  - The environment of the SDK and it can be one of these environments: 
    - Development
    - Live
- order:
  - The details about the order that you will be using the token you are generating within.
- order.id:
  - The id of the `order` if you already created it using our apis.
- order.currency:
  - The intended currency you will perform the order linked to this token afterwards.
- order.amount:
  - The intended amount you will perform the order linked to this token afterwards.
- order.description:
  - Optional string to put some clarifications about the order if needed.
- order.reference:
  - Optional string to put a reference to link it to your system.
- order.metadata:
  - Optional, It is a key-value based parameter. You can pass it to attach any miscellaneous data with this order for your own convenience.
- invoice.id:
  - Optional string to pass an invoice id, that you want to link to this token afterwards.
- merchant.id:
  - Optional string to pass to define a sub entity registered under your key in Tap. It is the `Merchant id` that you get from our onboarding team.
- customer.id:
  - If you have previously have created a customer using our apis and you want to link this token to him. please pass his id.
- customer.name:
  - It is a list of localized names. each name will have:
    - lang : the 2 iso code for the locale of this name for example `en`
    - first : The first name.
    - middle: The middle name.
    - last : The last name.
- customer.contact.email:
  - An email string for the customer we are creating. At least the email or the phone is required.
- customer.contact.phone:
  - The customer's phone:
    - countryCode
    - number
- interface.loader:
  - A boolean to indicate wether or not you want to show a loading view on top of the card form while it is performing api requests.
- interface.locale:
  - The language of the card form. Accepted values as of now are:
    - en
    - ar
- interface.theme:
  - The display style of the card form. Accepted values as of now are:
    - light
    - dark
    - dynamic // follow the device's display style
- interface.edges:
  - How do you want the edges of the card form to. Accepted values as of now are:
    - curved
    - flat
- interface.colorStyle:
  - How do you want the icons rendered inside the card form to. Accepted values as of now are:
    - colored
    - monochrome

---
_Source: https://npm.io/package/@tap-payments/careempay-web · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._