Solidgate react-sdk

This repository is a React wrapper for the Solidgate Client Software Development Kit (SDK).

It supports rendering payment forms and resign forms, including custom container elements for Google Pay, Apple Pay, or alternative payment method (APM) buttons.

Check our
* Payment guide to understand business value better
* API Reference to find more examples of usage

Structure

SDK for React contains	Table of contents
`src` – main source code `public` – assets folder `playground` – example app `package.json` – project metadata and dependency definitions	Installation Usage Development server Build

Installation

Run the following command in your React project:

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

`Usage`

`$3`

Render a payment form component in your React project.

`tsx import React from 'react' import ReactDOM from 'react-dom'; 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 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 (


                googlePayButtonParams={googlePayButtonParams}
          applePayButtonParams={applePayButtonParams}
          paypalButtonParams={paypalButtonParams}
          googlePayContainerRef={googleContainerRef}
          applePayContainerRef={appleContainerRef}
          paypalContainerRef={paypalContainerRef}
          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}
      />
      
    

  )
}
  
ReactDOM.render(, document.body);

`$3`

Render a resign payment form component in your React project.

`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]) => {}