@magicpay/magicpay-js

How to use in React Project

• Using Magic Link to Launch the hosted page.

• To Launch the Development Hosted page add 'isSandbox' at tag.

• To Launch the Production Hosted page do not add 'isSandbox' at tag.

• To Send Response after Operation in Onsuccess to hosted page, use 'sendEventToChild' function with argument response format of:

    response = {
      'type': 'SUCCESS_RESPONSE',
      'message': 'success message',
    }, 
    response = {
      'type': 'ERROR_RESPONSE',
      'message': 'error message,
    }

• Use this way to Add MagicLink, Here it's example for react.
• onSuccess and onError are function which need to pass when component is mounted, for that use 'reference' concept according to framework.

import "@magicpay/magicpay-js";
import {sendEventToChild} from "@magicpay/magicpay-js";
import React, { useRef, useEffect } from 'react';

function App() {
  const link_token = "<example_magic_link_token>";
  const checkout_id = "<example_checkout_object_id>";
  const myRef = useRef(null);
  const onError = (data) => {
    console.log("Error Occured: ", data);
  };
  const onSuccess = (data) => {
    console.log("Success: ", data);
    response = {
      'type': 'SUCCESS_RESPONSE',
      'message': 'successful',
    }
    sendEventToChild(response)
  };
  useEffect(() => {
    const element = myRef.current;
    if (element) {
      element.onSuccess = onSuccess;
      element.onError = onError;
    }
  }, []);
  return (
    <div>
      <magic-link
        checkoutId={checkout_id}
        linkToken={link_token}
        ref={myRef}
        isSandbox
      />
    </div>
  );
}

export default App;

Using Magic Marketing Component

import "@magicpay/magicpay-js";

function App() {
  return (
    <div>
      <magic-info />
    </div>
  );
}

export default App;

Using Magic Button

import "@magicpay/magicpay-js";

function App() {
  const handleButtonClick = () => {
    console.log("Handle Button Click");
  };
  return (
    <div>
      <magic-btn onClick={handleButtonClick} />
    </div>
  );
}

export default App;