React SDK
The following document describes in detail how to integrate our SDK into your React application. In the case you are building a React application, this is the recommeded approach for integration with trustshare.
#
InstallationUse your preferred method to install @trustshare/react-sdk
from npm
.
yarn add @trustshare/react-sdk
or
npm install --save @trustshare/react-sdk
#
Hooks vs ComponentsThere are two main ways of using our SDK in React applications. For each of the flows (checkout, release, topup, return), we provide both React components and hooks.
React components allow you to embed our iframe directly in your site. In this case no modal or popups will be created by the SDK. The user will be guided through their journey seamlessly, inside the iframe.
Hooks will provide developers with a function called open
that they can use in any event handlers to kick start a trustshare journey. When implementing flows this way, the user will be taken through the journey
in either a modal or a popup window.
Hooks and Components share the arguments that need to be provided at instantiation.
note
When using hooks, trustshare is able to report on each stage of the journey using the onClose
callback in case the user drops out of the journey early. You can also provide an onUpdate
callback function which will be updated each time the state of the hook changes. Finally, each hook will return it's own state as well which can be used to keep your application up to date with the status.
With Components, you can provide an onUpdate
prop which will be called each time the state is updated.
#
Modal vs. PopupWe currently recommend the use of the modal format
when instantiating a flow, however, you can opt to use the popup format
instead.
They both offer the same interface, so all parameters remain the same.
warning
In some cases, due to the nature of the web, some constrained security sandboxes will not work with the modal format
. Where we can reliably
detect this issue, we will transparently fallback to the popup format
for the user.
Checkout
and useCheckout
#
Using Import the @trustshare/react-sdk
package into your application to use the Checkout
component or the useCheckout
hook.
The hook returns a function called open
which can take parameters that will override those provided when instantiating the hook.
A full list of parameters is provided below.
import { Checkout } from '@trustshare/react-sdk';
function App() { return ( <div className="MyWrapper"> <Checkout subdomain="demo" to="[email protected]" from="[email protected]" amount="150000" depositAmount="100000" description="An example description" onComplete={({ status, token, paymentToken }) => { // see `status` table below console.log({ status, token, paymentToken }); }} onUpdate={({ status, token, paymentToken }) => { // see `status` table below console.log({ status, token, paymentToken }); }} /> </div> );}
import { useCheckout } from '@trustshare/react-sdk';
function App() { const { open } = useCheckout({ subdomain: 'demo', to: '[email protected]', from: '[email protected]', amount: 150000, depositAmount: 100000, description: 'An example description', onClose({ status, token, paymentToken }) { // see `status` table below console.log({ status, token, paymentToken }); }, // Fired each time the state is updated. onUpdate({ status, token, paymentToken }) { // see `status` table below console.log({ status, token, paymentToken }); }, });
return ( <button onClick={() => open({ description: 'A different description' })}> Checkout </button> );}
#
ParametersThe following parameters can be provided as props to the component or at the instantiation of the hook. Where applicable, parameters denoted as overridable can be provided to the open
function.
Parameter | Optional | Overridable | Component/ Hook | Default | Description |
---|---|---|---|---|---|
subdomain | no | no | both | none | Your trustshare subdomain as chosen at sign up. |
format | yes | no | both | modal | The format to display the checkout process, by default modal is selected. Available formats: modal , popup . |
to | yes | yes | both | none | The email address of the "seller". If not supplied, the checkout process will open with the ability for the user to fill in the To field manually. |
from | yes | yes | both | none | The email address of the "buyer". If supplied, the checkout process will pre-fill this for the user when they are required to sign in, resulting in better UX. |
amount | yes | yes | both | none | The amount in the lowest common denominator of the selected currency (eg. 150000 is equal to 1,500.00 ). If not supplied, the checkout process will open with the ability for the user to manually enter an Amount . If depositAmount is supplied, amount is considered to be the expected total value of the transaction. amount should be supplied and greater than depositAmount if the latter is present, otherwise depositAmount will be treated as the full amount for the transaction in a normal checkout flow using amount alone. |
depositAmount | yes | yes | both | none | The depositAmount in the lowest common denominator of the selected currency (eg. 150000 is equal to 1,500.00 ). If supplied, amount is considered to be the expected total value of the transaction, while depositAmount will be the first payment required. If depositAmount is supplied, amount should also be present and of a greater value than the deposit, otherwise depositAmount will be treated as the full amount for the transaction in a normal checkout flow using amount alone. |
description | yes | yes | both | none | A description of the reason for the transaction. If supplied, the description should be at least 15 characters in length and accurately convey the reason for the transaction. If not supplied, the checkout process will open with the ability for the user to manually enter an Description . |
currency | yes | yes | both | gbp | A currency to open the transaction account in, by default gbp is selected. Available currencies: gbp , eur . |
onClose | yes | no | hook | none | A callback function that will be called whenever the checkout process is closed, whether as the result of a payment being made or not. The function will receive an object containing the status as defined below, a token field for the transaction and a paymentToken field for the payment. In the case the checkout process is closed before an IBAN is provisioned, token and paymentToken will be null . |
onComplete | yes | no | component | none | A callback function that will be called whenever the checkout process is completed. The function will receive an object containing the status as defined below, a token field for the transaction and a paymentToken field for the payment. |
onUpdate | yes | no | both | none | A callback function that will be called whenever the state of the checkout process changes. The function will receive an object containing the status as defined below, a token field for the transaction and a paymentToken field for the payment. |
#
Being notified of the resultThe React hook takes both an optional onClose
callback function, while the component takes onComplete
. onClose
will be called whenever a process is closed, whether as the result of a completed payment or not. onComplete
will be called when the checkout process has been completed.
Both the hook and the component also take an optional onUpdate
callback function which fires each time the state of the process is updated. The onClose
, onComplete
, and onUpdate
handler will receive both a token
, a status
, and a paymentToken
, outlined below.
The hook also returns the status
, paymentToken
and token
which can be used to update your app accordingly as an alternative to using the onUpdate
callback function.
const { open, status, token, paymentToken } = useCheckout({ subdomain: 'demo', to: '[email protected]', onClose({ status, token, paymentToken }) { // see `status` table below console.log({ status, token, paymentToken }); }, // Fired each time the state is updated. onUpdate({ status, token, paymentToken }) { // see `status` table below console.log({ status, token, paymentToken }); },});
#
TokenThe token
is the unique identifier that relates to a specific transaction. A transaction is composed of multiple payments, inbound and outbound, and also denotes the provisioning of a dedicated IBAN the "buyer" can use to manually make payments.
It is recommended to use the value of the token
as the correlation between your own system and trustshare if needed. All Webhooks relating to transactions will also include the token
.
note
In the case token
is returned as null
, no IBAN was provisioned and the process is considered void.
#
Payment TokenThe paymentToken
is the unique identifier that relates to one of multiple payments that comprises a transaction.
It is recommended to use the value of the token
as the correlation between your own system and trustshare if needed. All Webhooks relating to payments will also include the paymentToken
.
note
In the case paymentToken
is returned as null
, either the checkout process has been terminated without any payment action from the user, or they have chosen to settle via a manual bank transfer, indicating that a payment was made.
In the case of early termination, both token
and paymentToken
will be null
. While with an indicated manual transfer, the transaction token
will be defined, but paymentToken
will be returned as null
still.
#
StatusThe following statuses can be returned to the onClose
callback handler. Where applicable, the value for token
will be null
.
Status | Meaning |
---|---|
checkout_not_initiated | The checkout process was opened, however the user never continued the process. token will be null . |
login_not_initiated | The user clicked on the "Pay Now" button in the checkout flow, but did not log in to trustshare. token will be null . |
second_factor_not_provided | The user clicked on the "Pay Now" button in the checkout flow, signed up or logged in, but did not verify their email with a one-time password. token will be null . |
transaction_initiated | A dedicated IBAN was provisioned for the transaction however the user closed the checkout before indicating a payment was made. IBANs are reserved for 2 weeks before a transaction is considered abandoned if no payments are made into the account. token will be defined. |
manual_payment_indicated | A user made their way through the complete checkout flow and indicated that they had made a manual payment into the dedicated account. token will be defined. |
payment_made | A user made their way through the complete checkout flow and a payment was made into the dedicated account via Open Banking. token will be defined. |
#
Deposit flowFor transactions where the initial payment of a deposit is required, either as part of a payment schedule or as a one off, we provide the depositAmount
field for our checkout SDKs.
If provided as an argument to the useCheckout
hook, we will consider amount
to be the expected total value of the transaction, while depositAmount
will be the first payment required. Fee calculations will be based on the indicated total value i.e. amount
.
If depositAmount
is supplied, amount
should also be present in the arguments and of a greater value than the deposit, otherwise depositAmount
will be treated as the full amount for the transaction in a normal checkout flow using amount
alone.
Release
and useRelease
#
Using Import the @trustshare/react-sdk
package into your application to use the Release
component or the useRelease
hook.
The hook returns a function called open
which can take parameters that will override those provided when instantiating the hook.
A full list of parameters is provided below.
import { Release } from '@trustshare/react-sdk';
function App() { return ( <div className="MyWrapper"> <Release subdomain="demo" token="cIe58WCUo6L4gx0B" amount="150000" onComplete={({ status, token, paymentToken }) => { // see `status` table below console.log({ status, token, paymentToken }); }} onUpdate={({ status, token, paymentToken }) => { // see `status` table below console.log({ status, token, paymentToken }); }} /> </div> );}
import { useRelease } from '@trustshare/react-sdk';
function App() { const { open } = useRelease({ subdomain: 'demo', onClose({ status, amount, token, paymentToken }) { // see `status` table below console.log({ status, amount, token, paymentToken }); }, // Fired each time the state is updated. onUpdate({ status, amount, token, paymentToken }) { // see `status` table below console.log({ status, amount, token, paymentToken }); }, });
return ( <button onClick={() => open({ amount: 1000, token: 'cIe58WCUo6L4gx0B' })}> Release funds </button> );}
#
ParametersThe following parameters can be provided as props to the component or at the instantiation of the hook. Where applicable, parameters denoted as overridable can be provided to the open
function.
Parameter | Optional | Overridable | Component / Hook | Default | Description |
---|---|---|---|---|---|
subdomain | no | no | both | none | Your trustshare subdomain as chosen at sign up. |
format | yes | no | both | modal | The format to display the release process, by default modal is selected. Available formats: modal , popup . |
token | yes | yes | both | none | The transaction token. A token must be provided in either the instantiation of the hook or the open function |
amount | yes | yes | both | none | The amount in the lowest common denominator of the selected currency (eg. 150000 is equal to 1,500.00 ). If not supplied, the release funds process will open with the ability for the user to manually enter an Amount . |
onClose | yes | no | hook | none | A callback function that will be called whenever the release process is closed, whether as the result of a payment being made or not. The function will receive an object containing the status as defined below, a token field for the transaction, a paymentToken field for the payment and an amount field denoting the amount of money released. In the case the release process is closed before completion paymentToken will be null . |
onComplete | yes | no | component | none | A callback function that will be called whenever the release process is completed. The function will receive an object containing the status as defined below, a token field for the transaction, a paymentToken field for the payment and an amount field denoting the amount of money released. |
onUpdate | yes | no | both | none | A callback function that will be called whenever the state of the release is changed. The function will receive an object containing the status as defined below, a token field for the transaction, a paymentToken field for the payment and an amount field denoting the amount of money released. |
#
Being notified of the resultThe React hook takes an optional onClose
callback function as described above, while the component takes onComplete
. onClose
will be called whenever a process is closed, whether as the result of a completed payment or not.
Both the hook and the component also take an optional onUpdate
callback function which fires each time the state of the process is updated.
The onClose
,onComplete
and onUpdate
handler will receive an object containing keys of token
, paymentToken
, status
and amount
, outlined below.
The hook also returns the status
, paymentToken
, token
and amount
which can be used to update your app accordingly as an alternative to using the onUpdate
callback function.
const { open, status, token, paymentToken, amount } = useRelease({ subdomain: 'demo', token: 'cIe58WCUo6L4gx0B', onClose({ status, token, paymentToken, amount }) { console.log({ status, token, paymentToken, amount }); }, // Fired each time the state is updated. onUpdate({ status, token, paymentToken, amount }) { // see `status` table below console.log({ status, token, paymentToken, amount }); },});
#
Payment TokenThe paymentToken
is the unique identifier that relates to one of multiple payments that comprises a transaction.
It is recommended to use the value of the token
as the correlation between your own system and trustshare if needed. All Webhooks relating to payments will also include the paymentToken
.
note
In the case paymentToken
is returned as null
, no release was made, and the process is considered void.
#
StatusThe following statuses can be returned to the onClose
callback handler. Where applicable, the value for paymentToken
will be null
.
Status | Meaning |
---|---|
release_not_initiated | The release process was opened, however the user never continued the process. paymentToken will be null . |
login_not_initiated | The user initiated the release funds flow, but did not log in to trustshare. paymentToken will be null . |
second_factor_not_provided | The user initiated the release funds flow, signed up or logged in, but did not verify their email with a one-time password. paymentToken will be null . |
release_made | A user made their way through the complete release flow and a payment was made to the nominated account. At this point the specified amount of money is no longer in escrow. paymentToken will be defined. |
Return
and useReturn
#
Using Import the @trustshare/react-sdk
package into your application to use the Return
component or the useReturn
hook.
The hook returns a function called open
which can take parameters that will override those provided when instantiating the hook.
A full list of parameters is provided below.
import { Return } from '@trustshare/react-sdk';
function App() { return ( <div className="MyWrapper"> <Return subdomain="demo" token="cIe58WCUo6L4gx0B" amount="150000" onComplete={({ status, token, paymentToken }) => { // see `status` table below console.log({ status, token, paymentToken }); }} onUpdate={({ status, token, paymentToken }) => { // see `status` table below console.log({ status, token, paymentToken }); }} /> </div> );}
import { useReturn } from '@trustshare/react-sdk';
function App() { const { open } = useReturn({ subdomain: 'demo', onClose({ status, amount, token, paymentToken }) { // see `status` table below console.log({ status, amount, token, paymentToken }); }, // Fired each time the state is updated. onUpdate({ status, amount, token, paymentToken }) { // see `status` table below console.log({ status, amount, token, paymentToken }); }, });
return ( <button onClick={() => open({ amount: 1000, token: 'cIe58WCUo6L4gx0B' })}> Return funds </button> );}
#
ParametersThe following parameters can be provided as props to the component or at the instantiation of the hook. Where applicable, parameters denoted as overridable can be provided to the open
function.
Parameter | Optional | Overridable | Component / Hook | Default | Description |
---|---|---|---|---|---|
subdomain | no | no | both | none | Your trustshare subdomain as chosen at sign up. |
format | yes | no | both | modal | The format to display the return process, by default modal is selected. Available formats: modal , popup . |
token | yes | yes | both | none | The transaction token. A token must be provided in either the instantiation of the hook or the open function |
amount | yes | yes | both | none | The amount in the lowest common denominator of the selected currency (eg. 150000 is equal to 1,500.00 ). If not supplied, the return funds process will open with the ability for the user to manually enter an Amount . |
onClose | yes | no | hook | none | A callback function that will be called whenever the return process is closed, whether as the result of a payment being made or not. The function will receive an object containing the status as defined below, a token field for the transaction, a paymentToken field for the payment and an amount field denoting the amount of money returned. In the case the return process is closed before completion paymentToken will be null . |
onComplete | yes | no | component | none | A callback function that will be called whenever the return process is completed. The function will receive an object containing the status as defined below, a token field for the transaction, a paymentToken field for the payment and an amount field denoting the amount of money returned |
onUpdate | yes | no | both | none | A callback function that will be called whenever the state of the return process is changed. The function will receive an object containing the status as defined below, a token field for the transaction, a paymentToken field for the payment and an amount field denoting the amount of money returned. |
#
Being notified of the resultThe React hook takes an optional onClose
callback function as described above, while the component takes onComplete
. onClose
will be called whenever a process is closed, whether as the result of a completed payment or not.
Both the hook and the component also take an optional onUpdate
callback function which fires each time the state of the process is updated. The onClose
, onComplete
, and onUpdate
handler will receive an object containing keys of token
, paymentToken
, status
and amount
, outlined below.
The hook also returns the status
, amount
, paymentToken
and token
which can be used to update your app accordingly as an alternative to using the onUpdate
callback function.
const { open, status, token, paymentToken, amount } = useReturn({ subdomain: 'demo', token: 'cIe58WCUo6L4gx0B', onClose({ status, token, paymentToken, amount }) { console.log({ status, token, paymentToken, amount }); }, // Fired each time the state is updated. onUpdate({ status, amount, token, paymentToken }) { // see `status` table below console.log({ status, amount, token, paymentToken }); },});
#
Payment TokenThe paymentToken
is the unique identifier that relates to one of multiple payments that comprises a transaction.
It is recommended to use the value of the token
as the correlation between your own system and trustshare if needed. All Webhooks relating to payments will also include the paymentToken
.
note
In the case paymentToken
is returned as null
, no return was made and the process is considered void.
#
StatusThe following statuses can be returned to the onClose
callback handler. Where applicable, the value for paymentToken
will be null
.
Status | Meaning |
---|---|
return_not_initiated | The return process was opened, however the user never continued the process. paymentToken will be null . |
login_not_initiated | The user initiated the return funds flow, but did not log in to trustshare. paymentToken will be null . |
second_factor_not_provided | The user initiated the return funds flow, signed up or logged in, but did not verify their email with a one-time password. paymentToken will be null . |
return_made | A user made their way through the complete return flow and a payment was made to the nominated account. At this point the specified amount of money is no longer in escrow. paymentToken will be defined. |
Topup
and useTopup
#
Using Import the @trustshare/react-sdk
package into your application to use the Topup
component or the useTopup
hook.
The hook returns a function called open
which can take parameters that will override those provided when instantiating the hook.
A full list of parameters is provided below.
import { Topup } from '@trustshare/react-sdk';
function App() { return ( <div className="MyWrapper"> <Topup subdomain="demo" token="cIe58WCUo6L4gx0B" amount="150000" onComplete={({ status, token, paymentToken }) => { // see `status` table below console.log({ status, token, paymentToken }); }} onUpdate={({ status, token, paymentToken }) => { // see `status` table below console.log({ status, token, paymentToken }); }} /> </div> );}
import { useTopup } from '@trustshare/react-sdk';
function App() { const { open } = useTopup({ subdomain: 'demo', onClose({ status, amount, token, paymentToken }) { // see `status` table below console.log({ status, amount, token, paymentToken }); }, // Fired each time the state is updated. onUpdate({ status, amount, token, paymentToken }) { // see `status` table below console.log({ status, amount, token, paymentToken }); }, });
return ( <button onClick={() => open({ amount: 1000, token: 'cIe58WCUo6L4gx0B' })}> Topup </button> );}
#
ParametersThe following parameters can be provided as props to the component or at the instantiation of the hook. Where applicable, parameters denoted as overridable can be provided to the open
function.
Parameter | Optional | Overridable | Component / Hook | Default | Description |
---|---|---|---|---|---|
subdomain | no | no | both | none | Your trustshare subdomain as chosen at sign up. |
format | yes | no | both | modal | The format to display the topup process, by default modal is selected. Available formats: modal , popup . |
token | yes | yes | both | none | The transaction token. A token must be provided in either the instantiation of the hook or the open function |
amount | yes | yes | both | none | The amount in the lowest common denominator of the selected currency (eg. 150000 is equal to 1,500.00 ). If not supplied, the topup funds process will open with the ability for the user to manually enter an Amount . |
onClose | yes | no | hook | none | A callback function that will be called whenever the topup process is closed, whether as the result of a payment being made or not. The function will receive an object containing the status as defined below, a token field for the transaction, a paymentToken field for the payment and an amount field denoting the amount of money paid in. In the case the topup process is closed before completion paymentToken will be null . |
onComplete | yes | no | component | none | A callback function that will be called whenever the topup process is completed. The function will receive an object containing the status as defined below, a token field for the transaction, a paymentToken field for the payment and an amount field denoting the amount of money paid in |
onUpdate | yes | no | both | none | A callback function that will be called whenever the state of the topup process is changed. The function will receive an object containing the status as defined below, a token field for the transaction, a paymentToken field for the payment and an amount field denoting the amount of money paid in. |
#
Being notified of the resultThe React hook takes an optional onClose
callback function as described above, while the component takes onComplete
. onClose
will be called whenever a process is closed, whether as the result of a completed payment or not.
Both the hook and the component also take an optional onUpdate
callback function which fires each time the state of the process is updated.
The onClose
, onComplete
, and onUpdate
handler will receive an object containing keys of token
, paymentToken
, status
and amount
, outlined below.
The hook also returns the status
, amount
, paymentToken
and token
which can be used to update your app accordingly as an alternative to using the onUpdate
callback function.
const { open, status, token, paymentToken, amount } = useTopup({ subdomain: 'demo', token: 'cIe58WCUo6L4gx0B', onClose({ status, token, paymentToken, amount }) { console.log({ status, token, paymentToken, amount }); }, // Fired each time the state is updated. onUpdate({ status, amount, token, paymentToken }) { // see `status` table below console.log({ status, amount, token, paymentToken }); },});
#
Payment TokenThe paymentToken
is the unique identifier that relates to one of multiple payments that comprises a transaction.
It is recommended to use the value of the token
as the correlation between your own system and trustshare if needed. All Webhooks relating to payments will also include the paymentToken
.
note
In the case paymentToken
is returned as null
, either the topup process has been terminated without any payment action from the user, or they have chosen to settle via a manual bank transfer, indicating that a payment was made.
In the case of early termination, both token
and paymentToken
will be null
. While with an indicated manual transfer, the transaction token
will be defined, but paymentToken
will be returned as null
still.
#
StatusThe following statuses can be returned to the onClose
callback handler. Where applicable, the value for paymentToken
will be null
.
Status | Meaning |
---|---|
topup_not_initiated | The topup process was opened, however the user never continued the process. paymentToken will be null . |
login_not_initiated | The user initiated the topup flow, but did not log in to trustshare. paymentToken will be null . |
second_factor_not_provided | The user initiated the topup flow, signed up or logged in, but did not verify their email with a one-time password. paymentToken will be null . |
manual_payment_indicated | A user made their way through the complete topup flow and indicated that they had made a manual payment into the dedicated account. token will be defined and paymentToken will be null . |
payment_made | A user made their way through the complete topup flow and a payment was made to the nominated account. At this point the specified amount of money is now in escrow. paymentToken will be defined. |
Dispute
and useDispute
#
Using Import the @trustshare/react-sdk
package into your application to use the Dispute
component or the useDispute
hook.
The hook returns a function called open
which can take parameters that will override those provided when instantiating the hook.
A full list of parameters are provided below.
import { Dispute } from '@trustshare/react-sdk';
function App() { return ( <div className="MyWrapper"> <Dispute subdomain="demo" token="cIe58WCUo6L4gx0B" onComplete={({ status, token, reason }) => { // see `status` table below console.log({ status, token, reason }); }} onUpdate={({ status, token, reason }) => { // see `status` table below console.log({ status, token, reason }); }} /> </div> );}
import { useDispute } from '@trustshare/react-sdk';
function App() { const { open } = useDispute({ subdomain: 'demo', onClose({ status, token, reason }) { // see `status` table below console.log({ status, token, reason }); }, // Fired each time the state is updated. onUpdate({ status, token, reason }) { // see `status` table below console.log({ status, token, reason }); }, });
return ( <button onClick={() => open({ token: 'cIe58WCUo6L4gx0B' })}> Dispute a transaction funds </button> );}
#
ParametersThe following parameters can be provided as props to the component or at the instantiation of the hook. Where applicable, parameters denoted as overridable can be provided to the open
function.
Parameter | Optional | Overridable | Component / Hook | Default | Description |
---|---|---|---|---|---|
subdomain | no | no | both | none | Your trustshare subdomain as chosen at sign up. |
token | yes | yes | both | none | The transaction token. A token must be provided in either the instantiation of the hook or the open function |
onClose | yes | no | hook | none | A callback function that will be called whenever the dispute process is closed, whether as the result of a payment being made or not. The function will receive an object containing the status as defined below, a token field for the transaction and a reason as defined below. |
onComplete | yes | no | component | none | A callback function that will be called whenever the dispute process is completed. The function will receive an object containing the status as defined below, a token field for the transaction, and a reason as defined below |
onUpdate | yes | no | both | none | A callback function that will be called whenever the state of the dispute process changes. The function will receive an object containing the status as defined below, a token field for the transaction, and a reason as defined below |
#
Being notified of the resultThe React hook takes an optional onClose
callback function as described above, while the component takes onComplete
. onClose
will be called whenever a process is closed, whether as the result of a completed dispute or not.
Both the hook and the component also take an optional onUpdate
callback function which fires each time the state of the process is updated.
The onClose
,onComplete
and onUpdate
handler will receive an object containing keys of token
, status
, reason
, outlined below.
const { open , status, token, reason } = useDispute({ subdomain: 'demo', token: 'cIe58WCUo6L4gx0B', onClose({ status, token, reason }) { // see `status` table below console.log({ status, token, reason }); }, // Fired each time the state is updated. onUpdate({ status, token, reason }) { // see `status` table below console.log({ status, token, reason }); },});
#
TokenThe token
is the unique identifier that relates to a specific transaction.
It is recommended to use the value of the token
as the correlation between your own system and trustshare if needed. All Webhooks relating to transactions will also include the token
.
#
ReasonThe reason
is the reason given for the dispute process. Currently, these values can be either seller_unresponsive
or other
. If the dispute flow is initiated but not completed, the reason will be null
.
#
StatusThe following statuses can be returned to the onClose
callback handler.
Status | Meaning |
---|---|
dispute_not_initiated | The dispute process was opened, however the user never continued the process. |
login_not_initiated | The user initiated the dispute flow, but did not log in to trustshare. |
second_factor_not_provided | The user initiated the dispute flow, signed up or logged in, but did not verify their email with a one-time password. |
dispute_raised | A user completed the dispute flow. At this point the transaction is effectively paused and no actions can be taken by either party until the dispute has been resolved. |