@magicpay/react-magicpay

Magic Payment

Dependencies

• React 17

Example To Open Magic Link:

import { MagicLink, MagicButton } from "@magicpay/react-magicpay";
import React, { useState } from "react";

function App() {
  const [key, setKey] = useState(0);
  const [link, setLink] = useState(false);
  const [checkoutId] = useState("Put the checkout id here.");

  const handleClick = () => {
    setKey(key + 1);
    setLink(true);
  };

  const onError = (data) => {
    console.log("Error Occured: ", data);
  };
  const onSuccess = (data) => {
    console.log("Success: ", data);
  };
  return (
    <div className="app">
      {link && (
        <MagicLink
          key={key}
          link={link}
          checkoutId={checkoutId}
          onError={onError}
          onSuccess={onSuccess}
        />
      )}
      <MagicButton onClick={handleClick} />
    </div>
  );
}

export default App;

Example for Magic Marketing Component with Popup

import { MagicInfo } from "@magicpay/react-magicpay";
import React, { useState } from "react";

function App() {
  return (
    <div className="app">
      <MagicInfo creditAmount={"14.90"} />
    </div>
  );
}

export default App;

Development

1. Take the pull from main
2. Use Node version v16.19.0
3. Install dependencies npm install
4. We are using storybook to create the components. Run the command npm run storybook and it will run the story book at http://localhost:6006

NPM Management

• Create an account at NPM
• In the project root directory use npm login to login to your account. And run npm publish to publish the new version
• Make sure in update the version in package.json file