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,
    }

import "@magicpay/magicpay-js";
import {sendEventToChild} from "@magicpay/magicpay-js";

function App() {
  const link_token = "<example_magic_link_token>";
  const checkout_id = "<example_checkout_object_id>";
  const onError = (data) => {
    console.log("Error Occured: ", data);
  };
  const onSuccess = (data) => {
    console.log("Success: ", data);
    response = {
      'type': 'SUCCESS_RESPONSE',
      'message': 'successful',
    }
    sendEventToChild(response)
  };
  return (
    <div>
      <magic-link
        checkoutId={checkout_id}
        linkToken={link_token}
        onSuccess={onSuccess}
        onError={onError}
        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;