Fiat to Crypto withdrawal flow
Acquiring an access token
Please refer to https://docs.zerohash.com/reference/post_client-auth-token, where we explain how to require for the access token for the "Fund withdrawals" flow. Note that the withdrawal_details param is required for this flow to work properly.
Web Application
Example using React:
import React, { useMemo } from 'react';
import ZeroHashSDK, { AppIdentifier } from 'zh-web-sdk';
const App = () => {
// Create SDK instance once - not on every render
const sdk = useMemo(() => new ZeroHashSDK({
zeroHashAppsURL: "https://sdk-cdn.zerohash.com",
env: "prod",
theme: "light"
}), []);
const handleOpen = () => {
sdk.openModal({
appIdentifier: AppIdentifier.CRYPTO_WITHDRAWALS, // "crypto-withdrawals"
jwt: "<JWT_TOKEN_HERE>"
});
};
return (
<button onClick={handleOpen}>
Withdrawal funds
</button>
);
};
export default App;Sample Fund Withdrawal decoded JWT
{
"application_id": "",
"device_id": "",
"exp": 1793997696,
"iat": 1793997096,
"iss": "dbd52e28-fd25-43a2-ab02-351b33a9b7a1",
"jti": "409fa5f0-2e4b-4228-88fb-ce72c3eff710",
"participant_code": "PART01",
"payload": {
"attestation_enabled": true,
"auth_configuration": {
"enable_travel_rule_account_matching": false
},
"auth_policy_enabled": true,
"classic_transfer_enabled": true,
"participant_code": "PART01",
"payment_id": "57b6df86-e501-4b0f-9f92-bfcb4c6d4519",
"platform_name": "FWC",
"reference_id": "25cecf9b-8c01-45b1-89f0-89345ee2a75f",
"region": "us",
"use_new_sdk": true,
"withdrawal_details": {
"quoted_asset": "USD",
"withdrawal_request_amount": "10"
}
},
"permissions": [
"crypto-withdrawals"
],
"platform_code": "PLAT01",
"sid": "5b4baa77-9f3e-441c-8aa5-58287d7189e4"
}Events
We forward events from the iframe to the origin using the postMessage API. You can handle these events as needed by adding an eventListener to the page that instantiated the SDK . These events are informational only and are not required to be consumed for the product to work. Currently, these are the events we have for Fund Withdrawals:
| Message | Meaning |
|---|---|
| SDK_MOBILE_READY (deprecated) | The SDK is ready to receive postMessage events (e.g OPEN_MODAL) |
| CRYPTO_WITHDRAWALS_APP_LOADED | The SDK is loaded and is visible to the user. |
| CRYPTO_WITHDRAWALS_CLOSE_BUTTON_CLICKED | The close (X) button was clicked in the top right corner of the UI. This action hides the modal while preserving the UI state. When reopened in the same instance, the UI will display with the state it had when it was closed if destroyOnClose is false . Defaults to false |
| CRYPTO_WITHDRAWALS_COMPLETED | The flow was completed successfully and the Success page was displayed. This does not mean that the withdrawal in question was fulfilled. |
| CRYPTO_WITHDRAWALS_FAILED | The customer encountered an error that cannot be rectified in their current session and his only option is to close the App. |
Native Mobile Integration
If you're integrating with Mobile Apps please refer to our mobile SDK integrations page.
Webview integration (deprecated)
If you are using our legacy WebView integration, you can send messages using the postMessage API after receiving SDK_MOBILE_READY from WebView. Currently, the accepted messages are:
Open Modal
Opens the modal with the JWT provided for identifier provided.
{type: "OPEN_MODAL", payload: {jwt: "<JWT_HERE>", appIdentifier: "crypto-withdrawals"}}Close Modal
Hides the modal while preserving its current state. When the modal is reopened in the same instance, the state will be maintained.
{type: "CLOSE_MODAL", payload:{appIdentifier: "crypto-withdrawals"}}
Opening/closing the modal can be interpreted as pausing/resuming, since the UI will retain the state it had when it was closed. To restart the UI flow, a new modal instance must be created or destroyOnClose set totrue.
For more details on how to use our SDK with WebViews, please refer to Integration with Mobile Apps