Magic Payment

Dependencies

• React 17

Example:

import { MagicLink } from "magic-payment";
import React, { useState } from "react";

function App() {
  const [key, setKey] = useState(0);
  const [link, setLink] = useState(false);
  const [checkoutId] = useState("ch-f9d692c6862b434da354bacce66d8080");

  const handleClick = () => {
    setKey(key + 1);
    console.log("Checking Magic Link...");
    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}
        />
      )}
      <button onClick={handleClick}>Pay With Magic</button>
    </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