Widget Integration

Integrate our widgets with React

• Import the Crypto Transfer Widget SDK

  import CryptoWidgetConnect from '@xport_digital/crypto_transfer_widget';

• Initialize the component If you would like to prepopulate the ammounts and/or email of a specific users, you may pass the variables from your backend to the parameters for each transction rendered within the widget.
  • Paramater 1 - Email - Email must be in email format '[email protected]'
  • Parameter 2 - Amount - Amount must be in 2 decimal places in USD '100.00'

    let cryptoWidget = new CryptoWidgetConnect({
      env: "staging",
      redirectUrl: "https://mywebsite.com",
      isPaymentRedirect: false,
      uuid: "",
      isKycRedirect: false,
      elementId: "cryptoWidget", // id for div element
      buttonId: "cryptoWidgetConnect", // optional
      accessKey: "", // Account ApiKey
      companyUUID: "", // CompanyUUID 
      #optional parameter
      params: { 
        email: "",
        amount: 0
      }
    });

    render() {
        return (
            <div id="cryptoWidget"></div>
        )
    }

There are two ways to start the widget

• On Button click (buttonId is required).

    cryptoWidget.startWidget();

        render() {
        return (
            <div id="cryptoWidget"></div>
            <button id="cryptoWidgetConnect">Click to Load the widget</button>
        )
    }

• This will display the widget directly on the website, and no action will be needed.

    cryptoWidget.startCryptoWidget();

        render() {
        return (
            <div id="cryptoWidget"></div>
            <button id="cryptoWidgetConnect">Click to Load the widget</button>
        )
    }

Events Emitters

There are two options events which your application will use for processing redirects back to your domain.

• In order to process transactions a user must meet 2 conditions.

• Condition 1 - "Verified" KYC application.

• Condition 2 - Approved payment for the purchase.

  1. The KYC application will initialize within the app and render as a redirect to the Fully Verified host domain for KYC submission. Upon KYC completion the user will be sent back to KYC redirect URL provided within your configuration. The KYC redirect must match the KYC redirect submitted via sign up. However, you must contact XPort Digital support if you wish to change the KYC redirect URL. Sample KYC redirect url 'https://your-dmain.com/payment/summary'
  2. The payments submitted through the crypto widget will only process 3DS enrolled cards for 3DS verification. Users will be be redirected to the banks host domain to conduct 3DS verification for their transactions. Upon completion of 3DS verification the user will be redirected back to your host and the widget will display the transactions status. The Payment redirect URL will be the url provided during the sign up process and the url in our configuration must match. If you wish to change the KYC rediret URL please XPort Digital support and sumbit a request to update this url.

  (The whitelisted domain listed your dashbaord must also match the host domain for both redirects.)

    cryptoWidget.on("paymentRedirect", (res)=>{
      let html = res.html;
      //Render the html inside the DOM
      if(res.method === 'FEN'){
        document.downloadForm.submit();
      }
      else{
        document.silentPost.submit();
      }
    });

    cryptoWidget.on("kycRedirect", (url)=>{
      // Redirect to start KYC process.
      window.location.href = url;
    });

Handling Redirects

After successful callback redirect for either kyc or payment, Initialize the widget as below

• For Kyc, set isKycRedirect to true

    let cryptoWidget = new CryptoWidgetConnect({
      env: "staging",
      redirectUrl: "https://mywebsite.com", // For payment
      isPaymentRedirect: false,
      uuid: "",
      isKycRedirect: true,
      elementId: "cryptoWidget", // id for div element
      buttonId: "cryptoWidgetConnect", // optional
      accessKey: "", // Account ApiKey
      companyUUID: "" // CompanyUUID 
    });

• For Payment callback, fetch the request uuid from the Query String and set the isPaymentRedirect to true and uuid

    let cryptoWidget = new CryptoWidgetConnect({
      env: "staging",
      redirectUrl: "https://mywebsite.com", // For payment
      isPaymentRedirect: true,
      uuid: "", // uuid from query-string
      isKycRedirect: false,
      elementId: "cryptoWidget", // id for div element
      buttonId: "cryptoWidgetConnect", // optional
      accessKey: "", // Account ApiKey
      companyUUID: "" // CompanyUUID 
    });