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

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.