React Web Component

import { VolumeProvider } from '@getvolume/react-web'
 
export default function Root() {
  return (
    <VolumeProvider
      applicationId="123456789"
      volumeEnvironment="sandbox"
      onEvent={handleEvent}
    >
      <App />
    </VolumeProvider>
  )
}

    <VolumeProvider
          applicationId="123456789"
          volumeEnvironment="sandbox"
          onEvent={(event: VolumeEvent) => {
            console.log(JSON.stringify(event))
          }}
        >
        ...

    interface VolumeEvent {
        /**
         * Enum of unique event types
         */
        type: VolumeEventType;
        /**
         * Unix timestamp
         */
        time: number;
        /**
         * Event specific meta
         */
        meta?: {};
    }

    enum VolumeEventType {
        GenericError = "GENERIC_ERROR",
        PaymentInitiated = "PAYMENT_INITIATED",
        ConfirmPageLoaded = "CONFIRM_PAGE_LOADED",
        BankSelectionLoaded = "BANK_SELECTION_LOADED",
        AwaitingAuthorisation = "AWAITING_AUTHORISATION",
        BankLaunchedLoaded = "BANK_LAUNCHED_LOADED",
        PaymentIdGenerated = "PAYMENT_ID_GENERATED", // only in desktop version
    }

    meta: {
        institution: 'institution.id',
        merchantPaymentId: 'merchantPaymentId',
        paymentId: 'paymentId',
        reference: 'payment reference',
        metadata: {...} // metadata object passed by the merchant to the Volume tag
      }

    meta: {
        institution: 'institution.id',
        reference: 'payment reference'
      }

    meta: {
        merchantPaymentId: 'merchantPaymentId',
        paymentId: 'paymentId',
        reference: 'payment reference',
        metadata: {...} // metadata object passed by the merchant to the Volume tag
      }

import '@getvolume/react/dist/index.css'

import { Volume } from '@getvolume/react'
 
export default function ProductPage() {
  return (
    <>
      ...
      <Volume
        amount={50}
        currency={'GBP'}
        reference={'Example Reference'}
        country='GB'
        merchantPaymentId={'123456'}
        metadata: { // Optional, max 5000 chars after serialization
            "mydata": "myvalue"
        }
        paymentStatusCallback={
            (paymentStatus: PaymentStatusResponse) => {
                console.log("I've got a new status: " + JSON.stringify(paymentStatus));
            }
        }
        componentViewTypeCallback={
            (componentViewType: ComponentViewType) => {
                console.log("Component UI type is: " + componentViewType);
            }
        }
      />
    </>
  )
}

    metadata: 1
    metadata: "test"
    metadata: [1,2,3]

    metadata: {
        "id": "0001",
        "type": "donut",
        "name": "Cake",
        "batters":
            {
                "batter":
                    [
                        { "id": "1001", "type": "Regular" }
                    ]
            },
    }

   interface PaymentStatusResponse {
       paymentStatus: PaymentStatus;
       errorDescription?: string;
       meta?: PaymentStatusMetadata;
   }

   interface PaymentStatusMetadata {
       paymentId?: string;
       merchantPaymentId?: string;
       reference?: string;
       metadata?: object;
   }

   enum PaymentStatus {
       NEW = "NEW",
       AWAITING_AUTHORIZATION = "AWAITING_AUTHORIZATION",
       AUTHORIZED = "AUTHORIZED",
       PENDING = "PENDING",
       COMPLETED = "COMPLETED",
       FAILED = "FAILED",
       UNDEFINED = "UNDEFINED"
   }

   enum ComponentViewType {
       DESKTOP = "DESKTOP",
       MOBILE_NEW_CUSTOMER = "MOBILE_NEW_CUSTOMER",
       MOBILE_RETURNING_CUSTOMER = "MOBILE_RETURNING_CUSTOMER"
   }