### Install Project Dependencies

Source: https://github.com/solidgate-tech/react-sdk/blob/master/playground/README.md

Run this command in the project directory to install all necessary dependencies.

```bash
npm install
```

--------------------------------

### Start the Playground

Source: https://github.com/solidgate-tech/react-sdk/blob/master/playground/README.md

Run this command in the terminal to start the playground application after configuration.

```bash
npm start
```

--------------------------------

### Install Solidgate React SDK

Source: https://github.com/solidgate-tech/react-sdk/blob/master/README.md

Run this command to install the Solidgate React SDK in your React project.

```bash
npm install --save @solidgate/react-sdk
```

--------------------------------

### React Payment Component Integration

Source: https://context7.com/solidgate-tech/react-sdk/llms.txt

Integrates the Solidgate Payment component into a React application. This example demonstrates setting up merchant data, form parameters, custom styles, and event handlers for various payment lifecycle events. It also shows how to manage container refs for alternative payment methods like Google Pay and Apple Pay.

```tsx
import React, { useRef } from 'react'
import { createRoot } from 'react-dom/client'
import Payment, {
  SdkMessage,
  MessageType,
  ClientSdkInstance,
  InitConfig,
  FormType
} from '@solidgate/react-sdk'

const merchantData: InitConfig['merchantData'] = {
  merchant: 'your-merchant-id',
  signature: 'your-signature',
  paymentIntent: 'your-payment-intent'
}

const formParams: InitConfig['formParams'] = {
  submitButtonText: 'Pay Now',
  isCardHolderVisible: true,
  headerText: 'Enter your payment details',
  titleText: 'Card Information',
  formTypeClass: FormType.Default,
  autoFocus: true,
  cardHolderLabel: 'Cardholder Name',
  cardHolderPlaceholder: 'John Doe'
}

const customStyles = {
  submit_button: {
    'background-color': '#4CAF50',
    'font-size': '16px',
    'font-weight': 'bold',
    ':hover': {
      'background-color': '#45a049'
    }
  },
  form_body: {
    'font-family': 'Arial, sans-serif'
  }
}

const googlePayButtonParams = {
  color: 'white'
}

const applePayButtonParams: InitConfig['applePayButtonParams'] = {
  integrationType: 'js',
  type: 'plain',
  color: 'black'
}

function App() {
  const googleContainerRef = useRef<HTMLDivElement>(null)
  const appleContainerRef = useRef<HTMLDivElement>(null)

  const handleOnMounted = (e: SdkMessage[MessageType.Mounted]) => {
    console.log('Payment form mounted:', e)
  }

  const handleOnSuccess = (e: SdkMessage[MessageType.Success]) => {
    console.log('Payment successful:', e)
    // e.order contains order details including descriptor
  }

  const handleOnFail = (e: SdkMessage[MessageType.Fail]) => {
    console.log('Payment failed:', e)
    // e.order contains order details with failure reason
  }

  const handleOnError = (e: SdkMessage[MessageType.Error]) => {
    console.log('Payment error:', e)
  }

  const handleOnSubmit = (e: SdkMessage[MessageType.Submit]) => {
    console.log('Form submitted:', e)
  }

  const handleOnCard = (e: SdkMessage[MessageType.Card]) => {
    console.log('Card info:', e)
    // e.card contains: bin, cardType, bank, binCountry, cardCategory
  }

  const handleOrderStatus = (e: SdkMessage[MessageType.OrderStatus]) => {
    console.log('Order status updated:', e)
  }

  const handleOnReadyPaymentInstance = (form: ClientSdkInstance) => {
    console.log('Payment instance ready:', form)
    // Use form.update() to update form data
    // Use form.submit() to programmatically submit
    // Use form.applyCoupon() to apply coupon codes
  }

  return (
    <div>
      <div ref={appleContainerRef} />
      <Payment
        merchantData={merchantData}
        formParams={formParams}
        styles={customStyles}
        googlePayButtonParams={googlePayButtonParams}
        applePayButtonParams={applePayButtonParams}
        googlePayContainerRef={googleContainerRef}
        applePayContainerRef={appleContainerRef}
        onMounted={handleOnMounted}
        onSuccess={handleOnSuccess}
        onFail={handleOnFail}
        onError={handleOnError}
        onSubmit={handleOnSubmit}
        onCard={handleOnCard}
        onOrderStatus={handleOrderStatus}
        onReadyPaymentInstance={handleOnReadyPaymentInstance}
      />
      <div ref={googleContainerRef} />
    </div>
  )
}

createRoot(document.getElementById('root')!).render(<App />)

```

--------------------------------

### Configure Supported Card Brands

Source: https://context7.com/solidgate-tech/react-sdk/llms.txt

Customize the `cardBrands` array within `formParams` to control which card brand icons are displayed and detected by the payment form. This example includes a comprehensive list of supported brands.

```tsx
import Payment, { InitConfig } from '@solidgate/react-sdk'

const formParams: InitConfig['formParams'] = {
  submitButtonText: 'Pay',
  cardBrands: [
    'visa',
    'mastercard',
    'amex',
    'discover',
    'jcb',
    'diners',
    'cartesBancaires',
    'rupay',
    'bcCard',
    'unionPay',
    'dankort',
    'gpnCard',
    'troy',
    'thaiPaymentNetwork',
    'mada',
    'bancontact',
    'interac',
    'bajaj',
    'Paypal' // Displays PayPal icon among card brands
  ]
}

function PaymentWithBrands() {
  return (
    <Payment
      merchantData={{
        merchant: 'your-merchant-id',
        signature: 'your-signature',
        paymentIntent: 'your-payment-intent'
      }}
      formParams={formParams}
    />
  )
}

export default PaymentWithBrands
```

--------------------------------

### Build the Library

Source: https://github.com/solidgate-tech/react-sdk/blob/master/playground/README.md

Execute this command in the top-level directory to build the project library.

```bash
npm run build
```

--------------------------------

### Link React Dependency

Source: https://github.com/solidgate-tech/react-sdk/blob/master/playground/README.md

Navigate to the top-level directory and execute this command to link the React dependency for the project.

```bash
npm link ./playground/node_modules/react
```

--------------------------------

### Handle SDK Events with Callback Props

Source: https://context7.com/solidgate-tech/react-sdk/llms.txt

Define and use event handlers for various stages of the payment lifecycle, including form mounting, submission, success, failure, and errors. The `onReadyPaymentInstance` callback provides access to SDK instance methods for programmatic control.

```tsx
import Payment, { SdkMessage, MessageType, ClientSdkInstance } from '@solidgate/react-sdk'

// Event handler type definitions and usage
const eventHandlers = {
  // Form lifecycle events
  onMounted: (e: SdkMessage[MessageType.Mounted]) => {
    // Triggered when form is rendered. e.name indicates which entity mounted
    // Possible names: 'card', 'googlePay', 'applePay', 'paypal', 'pix', etc.
  },

  onResize: (e: SdkMessage[MessageType.Resize]) => {
    // Triggered when form dimensions change
    // e.width and e.height contain new dimensions
  },

  onCustomStylesAppended: (e: SdkMessage[MessageType.CustomStylesAppended]) => {
    // Triggered when custom styles are applied to the form
  },

  // Payment flow events
  onSubmit: (e: SdkMessage[MessageType.Submit]) => {
    // Triggered when user submits the form
  },

  onVerify: (e: SdkMessage[MessageType.Verify]) => {
    // Triggered when 3D Secure verification is required
  },

  onSuccess: (e: SdkMessage[MessageType.Success]) => {
    // Triggered on successful payment
    // e.order.descriptor contains transaction descriptor
  },

  onFail: (e: SdkMessage[MessageType.Fail]) => {
    // Triggered on failed payment
    // e.order contains failure details
  },

  onError: (e: SdkMessage[MessageType.Error]) => {
    // Triggered on SDK errors
  },

  // Card-specific events (Payment component only)
  onCard: (e: SdkMessage[MessageType.Card]) => {
    // Triggered when card details are detected
    // e.card: { bin, cardType, bank, binCountry, cardCategory }
  },

  // Status and interaction events
  onOrderStatus: (e: SdkMessage[MessageType.OrderStatus]) => {
    // Triggered when order status changes
    // For APM payments, includes APMOrderStatus in response
  },

  onInteraction: (e: SdkMessage[MessageType.Interaction]) => {
    // Triggered on user interactions
    // e.name: 'paypal', 'pix', 'pageClose', etc.
  },

  onFormRedirect: (e: SdkMessage[MessageType.Redirect]) => {
    // Triggered when redirect is required (e.g., for 3DS)
  },

  onPaymentDetails: (e: SdkMessage[MessageType.PaymentDetails]) => {
    // Triggered with payment breakdown details
    // e.priceBreakdown.taxRate contains tax rate as float
  },

  // Instance ready callback
  onReadyPaymentInstance: (instance: ClientSdkInstance) => {
    // Provides access to SDK instance methods:
    // instance.update() - Update form data
    // instance.submit() - Programmatic submission
    // instance.applyCoupon() - Apply discount coupons
    // instance.resign() - Initiate resign flow
  }
}
```

--------------------------------

### Implement Alternative Payment Methods with React SDK

Source: https://context7.com/solidgate-tech/react-sdk/llms.txt

Use this component to integrate multiple alternative payment methods. Ensure each APM has a corresponding ref and button parameters. Handles success and interaction events.

```tsx
import React, { useRef } from 'react'
import Payment, { InitConfig, SdkMessage, MessageType } from '@solidgate/react-sdk'

const merchantData: InitConfig['merchantData'] = {
  merchant: 'your-merchant-id',
  signature: 'your-signature',
  paymentIntent: 'your-payment-intent'
}

function PaymentWithAPMs() {
  const paypalContainerRef = useRef<HTMLDivElement>(null)
  const pixContainerRef = useRef<HTMLDivElement>(null)
  const pixQrContainerRef = useRef<HTMLDivElement>(null)
  const bizumContainerRef = useRef<HTMLDivElement>(null)
  const blikContainerRef = useRef<HTMLDivElement>(null)
  const mbwayContainerRef = useRef<HTMLDivElement>(null)
  const cashAppContainerRef = useRef<HTMLDivElement>(null)
  const pixAutomaticoContainerRef = useRef<HTMLDivElement>(null)

  const paypalButtonParams = { enabled: true }
  const pixButtonParams = { enabled: true }
  const pixQrButtonParams = { enabled: true }
  const bizumButtonParams = { enabled: true }
  const blikButtonParams = { enabled: true }
  const mbwayButtonParams = { enabled: true }
  const cashAppButtonParams = { enabled: true }
  const pixAutomaticoButtonParams = { enabled: true }

  const handleOnSuccess = (e: SdkMessage[MessageType.Success]) => {
    console.log('APM payment successful:', e)
  }

  const handleOnInteraction = (e: SdkMessage[MessageType.Interaction]) => {
    console.log('User interaction:', e)
    // e.name can be: 'paypal', 'pix', 'bizum', 'blik', 'mbway', 'pageClose', etc.
  }

  return (
    <div>
      <div ref={paypalContainerRef} />
      <div ref={pixContainerRef} />
      <div ref={pixQrContainerRef} />
      <div ref={bizumContainerRef} />
      <div ref={blikContainerRef} />
      <div ref={mbwayContainerRef} />
      <div ref={cashAppContainerRef} />
      <div ref={pixAutomaticoContainerRef} />

      <Payment
        merchantData={merchantData}
        paypalButtonParams={paypalButtonParams}
        pixButtonParams={pixButtonParams}
        pixQrButtonParams={pixQrButtonParams}
        bizumButtonParams={bizumButtonParams}
        blikButtonParams={blikButtonParams}
        mbwayButtonParams={mbwayButtonParams}
        cashAppButtonParams={cashAppButtonParams}
        pixAutomaticoButtonParams={pixAutomaticoButtonParams}
        paypalContainerRef={paypalContainerRef}
        pixContainerRef={pixContainerRef}
        pixQrContainerRef={pixQrContainerRef}
        bizumContainerRef={bizumContainerRef}
        blikContainerRef={blikContainerRef}
        mbwayContainerRef={mbwayContainerRef}
        cashAppContainerRef={cashAppContainerRef}
        pixAutomaticoContainerRef={pixAutomaticoContainerRef}
        onSuccess={handleOnSuccess}
        onInteraction={handleOnInteraction}
      />
    </div>
  )
}

export default PaymentWithAPMs

```

--------------------------------

### Override Default SDK Script Source

Source: https://context7.com/solidgate-tech/react-sdk/llms.txt

Use `SdkLoader.load` to specify a custom URL for the SDK script, which is useful for testing or using custom SDK builds. The promise resolves with the client SDK instance upon successful loading.

```tsx
import { SdkLoader } from '@solidgate/react-sdk'

// Override SDK script source before rendering components
SdkLoader.load('https://custom-sdk-url.example.com/sdk.js')
  .then((clientSdk) => {
    console.log('Custom SDK loaded:', clientSdk)
  })
  .catch((error) => {
    console.error('Failed to load custom SDK:', error)
  })
```

--------------------------------

### SDK Events Reference

Source: https://context7.com/solidgate-tech/react-sdk/llms.txt

The SDK emits various events throughout the payment lifecycle that can be handled via callback props on both Payment and Resign components.

```APIDOC
## SDK Events Reference

The SDK emits various events throughout the payment lifecycle that can be handled via callback props on both Payment and Resign components.

### Event Handlers

#### Form lifecycle events
- **onMounted** (e: SdkMessage[MessageType.Mounted]) - Triggered when form is rendered. `e.name` indicates which entity mounted (e.g., 'card', 'googlePay', 'applePay', 'paypal', 'pix').
- **onResize** (e: SdkMessage[MessageType.Resize]) - Triggered when form dimensions change. `e.width` and `e.height` contain new dimensions.
- **onCustomStylesAppended** (e: SdkMessage[MessageType.CustomStylesAppended]) - Triggered when custom styles are applied to the form.

#### Payment flow events
- **onSubmit** (e: SdkMessage[MessageType.Submit]) - Triggered when user submits the form.
- **onVerify** (e: SdkMessage[MessageType.Verify]) - Triggered when 3D Secure verification is required.
- **onSuccess** (e: SdkMessage[MessageType.Success]) - Triggered on successful payment. `e.order.descriptor` contains transaction descriptor.
- **onFail** (e: SdkMessage[MessageType.Fail]) - Triggered on failed payment. `e.order` contains failure details.
- **onError** (e: SdkMessage[MessageType.Error]) - Triggered on SDK errors.

#### Card-specific events (Payment component only)
- **onCard** (e: SdkMessage[MessageType.Card]) - Triggered when card details are detected. `e.card` contains `{ bin, cardType, bank, binCountry, cardCategory }`.

#### Status and interaction events
- **onOrderStatus** (e: SdkMessage[MessageType.OrderStatus]) - Triggered when order status changes. For APM payments, includes APMOrderStatus in response.
- **onInteraction** (e: SdkMessage[MessageType.Interaction]) - Triggered on user interactions. `e.name` can be 'paypal', 'pix', 'pageClose', etc.
- **onFormRedirect** (e: SdkMessage[MessageType.Redirect]) - Triggered when redirect is required (e.g., for 3DS).
- **onPaymentDetails** (e: SdkMessage[MessageType.PaymentDetails]) - Triggered with payment breakdown details. `e.priceBreakdown.taxRate` contains tax rate as float.

#### Instance ready callback
- **onReadyPaymentInstance** (instance: ClientSdkInstance) - Provides access to SDK instance methods like `instance.update()`, `instance.submit()`, `instance.applyCoupon()`, `instance.resign()`.
```

--------------------------------

### Custom SDK Script Source

Source: https://context7.com/solidgate-tech/react-sdk/llms.txt

The SDK allows overriding the default script source URL using the SdkLoader, useful for testing or using custom SDK builds.

```APIDOC
## Custom SDK Script Source

The SDK allows overriding the default script source URL using the SdkLoader, useful for testing or using custom SDK builds.

### Usage

```tsx
import { SdkLoader } from '@solidgate/react-sdk'

// Override SDK script source before rendering components
SdkLoader.load('https://custom-sdk-url.example.com/sdk.js')
  .then((clientSdk) => {
    console.log('Custom SDK loaded:', clientSdk)
  })
  .catch((error) => {
    console.error('Failed to load custom SDK:', error)
  })
```
```

--------------------------------

### Supported Card Brands

Source: https://context7.com/solidgate-tech/react-sdk/llms.txt

The SDK supports extensive card brand display and detection through the formParams.cardBrands configuration.

```APIDOC
## Supported Card Brands

The SDK supports extensive card brand display and detection through the `formParams.cardBrands` configuration.

### Configuration Example

```tsx
import Payment, { InitConfig } from '@solidgate/react-sdk'

const formParams: InitConfig['formParams'] = {
  submitButtonText: 'Pay',
  cardBrands: [
    'visa',
    'mastercard',
    'amex',
    'discover',
    'jcb',
    'diners',
    'cartesBancaires',
    'rupay',
    'bcCard',
    'unionPay',
    'dankort',
    'gpnCard',
    'troy',
    'thaiPaymentNetwork',
    'mada',
    'bancontact',
    'interac',
    'bajaj',
    'Paypal' // Displays PayPal icon among card brands
  ]
}

function PaymentWithBrands() {
  return (
    <Payment
      merchantData={{
        merchant: 'your-merchant-id',
        signature: 'your-signature',
        paymentIntent: 'your-payment-intent'
      }}
      formParams={formParams}
    />
  )
}

export default PaymentWithBrands
```

### Supported Brands List

- visa
- mastercard
- amex
- discover
- jcb
- diners
- cartesBancaires
- rupay
- bcCard
- unionPay
- dankort
- gpnCard
- troy
- thaiPaymentNetwork
- mada
- bancontact
- interac
- bajaj
- Paypal
```

--------------------------------

### Implement Resign Component

Source: https://context7.com/solidgate-tech/react-sdk/llms.txt

Use the Resign component to render a form for re-signing payment agreements. Configure request details, appearance, and event handlers for mounted, success, failure, error, submit, verify, order status, instance readiness, and initialization failure events.

```tsx
import React from 'react'
import {
  Resign,
  SdkMessage,
  MessageType,
  ClientSdkInstance,
  ResignRequest,
  ResignFormConfig
} from '@solidgate/react-sdk'

const resignRequest: ResignRequest = {
  merchant: 'your-merchant-id',
  signature: 'your-signature',
  resignIntent: 'your-resign-intent'
}

const appearance: NonNullable<ResignFormConfig['appearance']> = {
  autoFocus: false,
  submitButtonText: 'Confirm Payment',
  allowSubmit: true,
  resignCvvLabel: 'Security Code (CVV)',
  resignCvvPlaceholder: 'Enter CVV',
  hideCvvNumbers: false
}

const customStyles = {
  'resign-submit-button': {
    'background-color': '#2196F3',
    'font-size': '16px',
    'font-weight': 'bold',
    ':hover': {
      'background-color': '#1976D2'
    }
  }
}

function ResignForm() {
  const handleOnMounted = (e: SdkMessage[MessageType.Mounted]) => {
    console.log('Resign form mounted:', e)
  }

  const handleOnSuccess = (e: SdkMessage[MessageType.Success]) => {
    console.log('Resign successful:', e)
  }

  const handleOnFail = (e: SdkMessage[MessageType.Fail]) => {
    console.log('Resign failed:', e)
  }

  const handleOnError = (e: SdkMessage[MessageType.Error]) => {
    console.log('Resign error:', e)
  }

  const handleOnSubmit = (e: SdkMessage[MessageType.Submit]) => {
    console.log('Resign submitted:', e)
  }

  const handleOnVerify = (e: SdkMessage[MessageType.Verify]) => {
    console.log('Verification required:', e)
  }

  const handleOrderStatus = (e: SdkMessage[MessageType.OrderStatus]) => {
    console.log('Order status:', e)
  }

  const handleOnReadyResignInstance = (form: ClientSdkInstance) => {
    console.log('Resign instance ready:', form)
  }

  const handleOnResignInitFailed = (error: Error) => {
    console.error('Resign initialization failed:', error)
  }

  return (
    <Resign
      resignRequest={resignRequest}
      appearance={appearance}
      styles={customStyles}
      onMounted={handleOnMounted}
      onSuccess={handleOnSuccess}
      onFail={handleOnFail}
      onError={handleOnError}
      onSubmit={handleOnSubmit}
      onVerify={handleOnVerify}
      onOrderStatus={handleOrderStatus}
      onReadyResignInstance={handleOnReadyResignInstance}
      onResignInitFailed={handleOnResignInitFailed}
    />
  )
}

export default ResignForm

```

--------------------------------

### Render Payment Form Component in React

Source: https://github.com/solidgate-tech/react-sdk/blob/master/README.md

Use the Payment component to render the Solidgate payment form. Ensure all required refs and merchant data are correctly configured. This component handles various payment methods and their respective button parameters.

```tsx
import React, { useRef } from 'react'
import { createRoot } from 'react-dom/client'
import Payment, { SdkMessage, MessageType, ClientSdkInstance} from "@solidgate/react-sdk"

/**
 * Configuration, as it described here
 * https://docs.solidgate.com/payments/integrate/payment-form/create-your-payment-form/
 */

const merchantData = {
  merchant: '<<--YOUR MERCHANT ID-->>',
  signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
  paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
}

const App = () => {

  const appleContainerRef = useRef(null)
  const googleContainerRef = useRef(null)
  const paypalContainerRef = useRef(null)
  const mbwayContainerRef = useRef(null)
  const pixQrContainerRef = useRef(null)

  const handleOnError = (e: SdkMessage[MessageType.Error]) => {}

  const handleOnFail = (e: SdkMessage[MessageType.Fail]) => {}

  const handleOnMounted = (e: SdkMessage[MessageType.Mounted]) => {}

  const handleOrderStatus = (e: SdkMessage[MessageType.OrderStatus]) => {}

  const handleOnResize = (e: SdkMessage[MessageType.Resize]) => {}

  const handleOnSuccess = (e: SdkMessage[MessageType.Success]) => {}

  const handleOnSubmit = (e: SdkMessage[MessageType.Submit]) => {}

  const handleOnInteraction = (e: SdkMessage[MessageType.Interaction]) => {}

  const handleOnVerify = (e: SdkMessage[MessageType.Verify]) => {}

  const handleOnRedirectMessage = (e: SdkMessage[MessageType.Redirect]) => {}

  const handleOnCustomStylesAppended = (e: SdkMessage[MessageType.CustomStylesAppended]) => {}

  const handleCard = (e: SdkMessage[MessageType.Card]) => {}

  const handleOnReadyPaymentInstance = (form: ClientSdkInstance) => {
    // eslint-disable-next-line no-console
    console.log('form', form)
  }

  return (
    <div>
      <div ref={appleContainerRef} />
      <div ref={paypalContainerRef} />
      <div ref={mbwayContainerRef} />
      <div ref={pixQrContainerRef} />
      <Payment
        googlePayButtonParams={googlePayButtonParams}
        applePayButtonParams={applePayButtonParams}
        paypalButtonParams={paypalButtonParams}
        mbwayButtonParams={mbwayButtonParams}
        pixQrButtonParams={pixQrButtonParams}
        googlePayContainerRef={googleContainerRef}
        applePayContainerRef={appleContainerRef}
        paypalContainerRef={paypalContainerRef}
        mbwayContainerRef={mbwayContainerRef}
        pixQrContainerRef={pixQrContainerRef}
        merchantData={merchantData}
        styles={customFormStyles}
        formParams={formParams}
        onError={handleOnError}
        onFail={handleOnFail}
        onCard={handleCard}
        onMounted={handleOnMounted}
        onOrderStatus={handleOrderStatus}
        onResize={handleOnResize}
        onSuccess={handleOnSuccess}
        onSubmit={handleOnSubmit}
        onInteraction={handleOnInteraction}
        onVerify={handleOnVerify}
        onFormRedirect={handleOnRedirectMessage}
        onCustomStylesAppended={handleOnCustomStylesAppended}
        onReadyPaymentInstance={handleOnReadyPaymentInstance}
      />
      <div ref={googleContainerRef} />
    </div>
  )
}

createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

```

--------------------------------

### Render Resign Payment Form Component in React

Source: https://github.com/solidgate-tech/react-sdk/blob/master/README.md

Use the Resign component to display a payment form for resignations. Configure it with your merchant ID, signature, and intent. Various event handlers are available for managing the form's lifecycle and user interactions.

```tsx
const resignRequest = {
  merchant: '<<--YOUR MERCHANT ID-->>',
  signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
  resignIntent: '<<--YOUR RESIGN INTENT-->>'
}

function App () {
  const handleOnError = (e: SdkMessage[MessageType.Error]) => {}

  const handleOnFail = (e: SdkMessage[MessageType.Fail]) => {}

  const handleOnMounted = (e: SdkMessage[MessageType.Mounted]) => {}

  const handleOrderStatus = (e: SdkMessage[MessageType.OrderStatus]) => {}

  const handleOnResize = (e: SdkMessage[MessageType.Resize]) => {}

  const handleOnSuccess = (e: SdkMessage[MessageType.Success]) => {}

  const handleOnSubmit = (e: SdkMessage[MessageType.Submit]) => {}

  const handleOnInteraction = (e: SdkMessage[MessageType.Interaction]) => {}

  const handleOnVerify = (e: SdkMessage[MessageType.Verify]) => {}

  const handleOnRedirectMessage = (e: SdkMessage[MessageType.Redirect]) => {}

  const handleOnCustomStylesAppended = (e: SdkMessage[MessageType.CustomStylesAppended]) => {}

  const handleOnReadyResignInstance = (form: ClientSdkInstance) => {
    // eslint-disable-next-line no-console
    console.log('resign form', form)
  }

  return (
    <Resign
      resignRequest={resignRequest}
      appearance={appearanceConfig}
      styles={customStyles}
      onError={handleOnError}
      onFail={handleOnFail}
      onMounted={handleOnMounted}
      onOrderStatus={handleOrderStatus}
      onResize={handleOnResize}
      onSuccess={handleOnSuccess}
      onSubmit={handleOnSubmit}
      onInteraction={handleOnInteraction}
      onVerify={handleOnVerify}
      onFormRedirect={handleOnRedirectMessage}
      onCustomStylesAppended={handleOnCustomStylesAppended}
      onReadyResignInstance={handleOnReadyResignInstance}
    />
  )
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.