@simplex/react-sdk

React SDK

this sdk where created in order to make integration with simplex easier instead of loading all the scripts from simplex cdn this sdk will load them automaticly

Components

IframeWidget

this component will load all scripts that needed in order to load simplex inside your application.

Usage

import { IframeWidget } from '@simplex/react-sdk';

function App() {
  return (
    <div className="App">
      ...components of your app
      <IframeWidget env="sandbox | production" publicKey="<partner_public_key>" />
    </div>
  );
}

export default App;

Component Props

{
  env: "sandbox" | "production";
  publicKey: "<partner_public_key>";
  onOnlineFlowFinished?: (event: any) => any;
  onError?: ()=> any;
}

onOnlineFlowCompleted

This function will be triggerd when the customer reaches a point in the checkout flow where he finished interacting with the Checkout UI, and you can safely close the checkout and continue interaction with the customer.

onError

this function will be called if the component couldn't load one of the scripts that needed in order to load the widget.

WalletApiWidget

this component are suit to partner that uses wallet api and creating payment using simplex wallet api. this component will load all scripts that needed in order to load simplex inside your application.

Usage

since this component loading scripts to your page, you can decide when to load them. if you want to load the scripts when simplex should be seen, then you can add the component only when payment is created

import React, { useState } from 'react';
import { WalletApiWidget } from '@simplex/react-sdk';

function App() {
  const [paymentId, setPaymentId] = useState(null);

  const onCheckoutLoaded = (event) => {
    if (event.type === 'checkoutLoadFailed') {
    } else if (event.type === 'checkoutLoadSucceeded') {
    }
  };
  const onOnlineFlowCompleted = (event) => {};

  return (
    <div className="App">
      ...components of your app
      {paymentId && (
        <WalletApiWidget
          env="sandbox | production"
          publicKey="partner_public_key"
          paymentId={paymentId}
          onCheckoutLoaded={onCheckoutLoaded}
          onOnlineFlowCompleted={onOnlineFlowCompleted}
        />
      )}
    </div>
  );
}
export default App;

you can also load the scripts when the app starts, and show simplex only when payment is created. this can be acheived using state.

import React, { useState } from 'react';
import { WalletApiWidget } from '@simplex/react-sdk';

function App() {
  const [paymentId, setPaymentId] = useState(null);

  const onCheckoutLoaded = (event) => {
    if (event.type === 'checkoutLoadFailed') {
    } else if (event.type === 'checkoutLoadSucceeded') {
    }
  };
  const onOnlineFlowCompleted = (event) => {};

  return (
    <div className="App">
      ...components of your app
      <WalletApiWidget
        env="sandbox | production"
        publicKey="partner_public_key"
        paymentId={paymentId}
        onCheckoutLoaded={onCheckoutLoaded}
        onOnlineFlowCompleted={onOnlineFlowCompleted}
      />
    </div>
  );
}
export default App;

when setPaymentId("created_payment_id") will be called the component will show simplex widget.

Component Props

{
  env: "sandbox" | "production";
  publicKey: "<partner_public_key>";
  paymentId?: string;
  onCheckoutLoaded?: (event: any) => any;
  onOnlineFlowCompleted?: (event: any) => any;
  onError?: ()=> any;
}

onCheckoutLoaded

this function will be trigered when simplex finish loading. event.type can be checkoutLoadSucceeded or checkoutLoadFailed.

onOnlineFlowCompleted

This function will be triggerd when the customer reaches a point in the checkout flow where he finished interacting with the Checkout UI, and you can safely close the checkout and continue interaction with the customer.

onError

this function will be called if the component couldn't load one of the scripts that needed in order to load the widget.