# sphereone-checkout

> This npm package contains the `SphereOneButton` component, which allows users to make a payment using the SphereOne Checkout. It accepts three props: `apiKey`, `chargeData` and `style`.

Latest version **0.1.2** (published 2022-12-16) · 0 weekly downloads

## Install

```sh
npm install sphereone-checkout
pnpm add sphereone-checkout
yarn add sphereone-checkout
bun add sphereone-checkout
```

## 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.1.2 |
| Published | 2022-12-16 |
| First published | 2022-12-15 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 172.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ephcratsphereone |

## Links

- npm: https://www.npmjs.com/package/sphereone-checkout
- npm.io page: https://npm.io/package/sphereone-checkout

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [cogo-toast](https://npm.io/package/cogo-toast.md) ^4.2.3
- [vite-plugin-dts](https://npm.io/package/vite-plugin-dts.md) ^1.7.1

## Recent versions

- 0.1.2 (latest) — 2022-12-16
- 0.1.1 — 2022-12-16
- 0.1.0 — 2022-12-16
- 0.0.9 — 2022-12-16
- 0.0.8 — 2022-12-15
- 0.0.7 — 2022-12-15
- 0.0.6 — 2022-12-15
- 0.0.5 — 2022-12-15
- 0.0.4 — 2022-12-15
- 0.0.3 — 2022-12-15
- 0.0.2 — 2022-12-15
- 0.0.1 — 2022-12-15
- 0.0.0 — 2022-12-15

## README

# sphereone-checkout

This npm package contains the `SphereOneButton` component, which allows users to make a payment using the SphereOne Checkout. It accepts three props: `apiKey`, `chargeData` and `style`.

## Installation

To install the `sphereone-checkout` package, run the following command in your project directory:

```
npm install sphereone-checkout
```

## Props

### `apiKey`

- Type: `string`
- Required: `true`

This is the unique identifier for your SphereOne account. It is used to authenticate the payment request.

### `chargeData`

- Type: `object`
- Required: `true`

This object contains the data for the payment, including the name of the item being purchased, the price, the currency, and the URLs for the success and cancel pages.

### `style`

- Type: `object`
- Required: `false`

This object contains inline styles to be applied to the `SphereOneButton` component. This can be used to customize the appearance of the button.

## Example

```js
import SphereOneButton from "sphereone-checkout";

const chargeData = {
  name: "Shirt",
  image: "https://example.com/shirt.jpg",
  amount: 29.99,
  quantity: 1,
  currency: "USDC",
  successUrl: "https://example.com/success",
  cancelUrl: "https://example.com/cancel",
};

const customStyles = {
  fontSize: "1.5rem",
  width: "25rem",
};

const App = () => (
  <SphereOneButton
    apiKey="12345678-1234-1234-1234-123456789012"
    chargeData={chargeData}
    style={customStyles}
  />
);
```

## Usage

After installing the `sphereone-checkout` package, you can import the `SphereOneButton` component and use it in your code like any other React component. It accepts the `apiKey` and `chargeData` props as described above. When clicked, the button will initiate the payment process by creating a checkout session and will redirect the user to the checkout link generated by the session.

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