{"id":15119332,"url":"https://github.com/DePayFi/widgets","last_synced_at":"2025-09-28T02:30:58.668Z","repository":{"id":37823229,"uuid":"299589318","full_name":"DePayFi/widgets","owner":"DePayFi","description":"💸 Crypto Payments straight to your wallet. DePay simplifies Web3 integration for developers, harnessing DeFi to accept any token effortlessly. Integrate frictionless, real-time token conversion with sleek, customizable widgets designed for seamless user experience.","archived":false,"fork":false,"pushed_at":"2025-09-06T06:09:09.000Z","size":281813,"stargazers_count":104,"open_issues_count":0,"forks_count":40,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-09-06T06:41:12.372Z","etag":null,"topics":["blockchain","crypto","cryptocurrencies","dapp","defi","payment","react","stablecoins","wallet","web3","widgets"],"latest_commit_sha":null,"homepage":"https://depay.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DePayFi.png","metadata":{"files":{"readme":"README.html","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"custom":"https://link.depay.com/6KFBECVsokSt0UKOAug8CI"}},"created_at":"2020-09-29T10:59:27.000Z","updated_at":"2025-09-06T06:09:13.000Z","dependencies_parsed_at":"2023-02-17T19:45:53.433Z","dependency_job_id":"7148b7a3-b2df-40ee-ad7f-cf216b390fb3","html_url":"https://github.com/DePayFi/widgets","commit_stats":{"total_commits":678,"total_committers":6,"mean_commits":113.0,"dds":0.2359882005899705,"last_synced_commit":"49daaabbd82115946fe4489db734f93527768b99"},"previous_names":["depayfi/depay-widgets"],"tags_count":377,"template":false,"template_full_name":null,"purl":"pkg:github/DePayFi/widgets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DePayFi%2Fwidgets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DePayFi%2Fwidgets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DePayFi%2Fwidgets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DePayFi%2Fwidgets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DePayFi","download_url":"https://codeload.github.com/DePayFi/widgets/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DePayFi%2Fwidgets/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277315665,"owners_count":25797675,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-28T02:00:08.834Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blockchain","crypto","cryptocurrencies","dapp","defi","payment","react","stablecoins","wallet","web3","widgets"],"created_at":"2024-09-26T01:53:51.076Z","updated_at":"2025-09-28T02:30:58.660Z","avatar_url":"https://github.com/DePayFi.png","language":"JavaScript","funding_links":["https://link.depay.com/6KFBECVsokSt0UKOAug8CI"],"categories":["Output Example"],"sub_categories":[],"readme":"\u003c!DOCTYPE html\u003e\u003chtml\u003e\u003chead\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\u003cstyle\u003ebody {\n  max-width: 980px;\n  margin: 16px auto;\n}\n\nbody .markdown-body\n{\n  padding: 45px;\n}\n\n@font-face {\n  font-family: fontawesome-mini;\n  src: url(data:font/woff;charset=utf-8;base64,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) format('woff');\n}\n\n.markdown-body {\n  font-family: sans-serif;\n  -ms-text-size-adjust: 100%;\n  -webkit-text-size-adjust: 100%;\n  color: #333333;\n  overflow: hidden;\n  font-family: \"Helvetica Neue\", Helvetica, \"Segoe UI\", Arial, freesans, sans-serif;\n  font-size: 16px;\n  line-height: 1.6;\n  word-wrap: break-word;\n}\n\n.markdown-body a {\n  background: transparent;\n}\n\n.markdown-body a:active,\n.markdown-body a:hover {\n  outline: 0;\n}\n\n.markdown-body b,\n.markdown-body strong {\n  font-weight: bold;\n}\n\n.markdown-body mark {\n  background: #ff0;\n  color: #000;\n  font-style: italic;\n  font-weight: bold;\n}\n\n.markdown-body sub,\n.markdown-body sup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n.markdown-body sup {\n  top: -0.5em;\n}\n.markdown-body sub {\n  bottom: -0.25em;\n}\n\n.markdown-body h1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n.markdown-body img {\n  border: 0;\n}\n\n.markdown-body hr {\n  -moz-box-sizing: content-box;\n  box-sizing: content-box;\n  height: 0;\n}\n\n.markdown-body pre {\n  overflow: auto;\n}\n\n.markdown-body code,\n.markdown-body kbd,\n.markdown-body pre,\n.markdown-body samp {\n  font-family: monospace, monospace;\n  font-size: 1em;\n}\n\n.markdown-body input {\n  color: inherit;\n  font: inherit;\n  margin: 0;\n}\n\n.markdown-body html input[disabled] {\n  cursor: default;\n}\n\n.markdown-body input {\n  line-height: normal;\n}\n\n.markdown-body input[type=\"checkbox\"] {\n  box-sizing: border-box;\n  padding: 0;\n}\n\n.markdown-body table {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n.markdown-body td,\n.markdown-body th {\n  padding: 0;\n}\n\n.markdown-body .codehilitetable,\n.markdown-body .highlighttable {\n  border: 0;\n  border-spacing: 0;\n}\n\n.markdown-body .codehilitetable tr,\n.markdown-body .highlighttable {\n  border: 0;\n}\n\n.markdown-body .codehilitetable pre,\n.markdown-body .codehilitetable div.codehilite,\n.markdown-body .highlighttable pre,\n.markdown-body .highlighttable div.highlight {\n  margin: 0;\n}\n\n.markdown-body .linenos,\n.markdown-body .code,\n.markdown-body .codehilitetable td,\n.markdown-body .highlighttable td {\n  border: 0;\n  padding: 0;\n}\n\n.markdown-body td:not(.linenos) .linenodiv {\n  padding: 0 !important;\n}\n\n.markdown-body .code {\n  width: 100%;\n}\n\n.markdown-body .linenos div pre,\n.markdown-body .linenodiv pre,\n.markdown-body .linenodiv {\n  border: 0;\n  -webkit-border-radius: 0;\n  -moz-border-radius: 0;\n  border-radius: 0;\n  -webkit-border-top-left-radius: 3px;\n  -webkit-border-bottom-left-radius: 3px;\n  -moz-border-radius-topleft: 3px;\n  -moz-border-radius-bottomleft: 3px;\n  border-top-left-radius: 3px;\n  border-bottom-left-radius: 3px;\n}\n\n.markdown-body .code div pre,\n.markdown-body .code div {\n  border: 0;\n  -webkit-border-radius: 0;\n  -moz-border-radius: 0;\n  border-radius: 0;\n  -webkit-border-top-right-radius: 3px;\n  -webkit-border-bottom-right-radius: 3px;\n  -moz-border-radius-topright: 3px;\n  -moz-border-radius-bottomright: 3px;\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n}\n\n.markdown-body * {\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n}\n\n.markdown-body input {\n  font: 13px Helvetica, arial, freesans, clean, sans-serif, \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  line-height: 1.4;\n}\n\n.markdown-body a {\n  color: #4183c4;\n  text-decoration: none;\n}\n\n.markdown-body a:hover,\n.markdown-body a:focus,\n.markdown-body a:active {\n  text-decoration: underline;\n}\n\n.markdown-body hr {\n  height: 0;\n  margin: 15px 0;\n  overflow: hidden;\n  background: transparent;\n  border: 0;\n  border-bottom: 1px solid #ddd;\n}\n\n.markdown-body hr:before,\n.markdown-body hr:after {\n  display: table;\n  content: \" \";\n}\n\n.markdown-body hr:after {\n  clear: both;\n}\n\n.markdown-body h1,\n.markdown-body h2,\n.markdown-body h3,\n.markdown-body h4,\n.markdown-body h5,\n.markdown-body h6 {\n  margin-top: 15px;\n  margin-bottom: 15px;\n  line-height: 1.1;\n}\n\n.markdown-body h1 {\n  font-size: 30px;\n}\n\n.markdown-body h2 {\n  font-size: 21px;\n}\n\n.markdown-body h3 {\n  font-size: 16px;\n}\n\n.markdown-body h4 {\n  font-size: 14px;\n}\n\n.markdown-body h5 {\n  font-size: 12px;\n}\n\n.markdown-body h6 {\n  font-size: 11px;\n}\n\n.markdown-body blockquote {\n  margin: 0;\n}\n\n.markdown-body ul,\n.markdown-body ol {\n  padding: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.markdown-body ol ol,\n.markdown-body ul ol {\n  list-style-type: lower-roman;\n}\n\n.markdown-body ul ul ol,\n.markdown-body ul ol ol,\n.markdown-body ol ul ol,\n.markdown-body ol ol ol {\n  list-style-type: lower-alpha;\n}\n\n.markdown-body dd {\n  margin-left: 0;\n}\n\n.markdown-body code,\n.markdown-body pre,\n.markdown-body samp {\n  font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace;\n  font-size: 12px;\n}\n\n.markdown-body pre {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.markdown-body kbd {\n  background-color: #e7e7e7;\n  background-image: -moz-linear-gradient(#fefefe, #e7e7e7);\n  background-image: -webkit-linear-gradient(#fefefe, #e7e7e7);\n  background-image: linear-gradient(#fefefe, #e7e7e7);\n  background-repeat: repeat-x;\n  border-radius: 2px;\n  border: 1px solid #cfcfcf;\n  color: #000;\n  padding: 3px 5px;\n  line-height: 10px;\n  font: 11px Consolas, \"Liberation Mono\", Menlo, Courier, monospace;\n  display: inline-block;\n}\n\n.markdown-body\u003e*:first-child {\n  margin-top: 0 !important;\n}\n\n.markdown-body\u003e*:last-child {\n  margin-bottom: 0 !important;\n}\n\n.markdown-body .headerlink {\n  font: normal 400 16px fontawesome-mini;\n  vertical-align: middle;\n  margin-left: -16px;\n  float: left;\n  display: inline-block;\n  text-decoration: none;\n  opacity: 0;\n  color: #333;\n}\n\n.markdown-body .headerlink:focus {\n  outline: none;\n}\n\n.markdown-body h1 .headerlink {\n  margin-top: 0.8rem;\n}\n\n.markdown-body h2 .headerlink,\n.markdown-body h3 .headerlink {\n  margin-top: 0.6rem;\n}\n\n.markdown-body h4 .headerlink {\n  margin-top: 0.2rem;\n}\n\n.markdown-body h5 .headerlink,\n.markdown-body h6 .headerlink {\n  margin-top: 0;\n}\n\n.markdown-body .headerlink:hover,\n.markdown-body h1:hover .headerlink,\n.markdown-body h2:hover .headerlink,\n.markdown-body h3:hover .headerlink,\n.markdown-body h4:hover .headerlink,\n.markdown-body h5:hover .headerlink,\n.markdown-body h6:hover .headerlink {\n  opacity: 1;\n  text-decoration: none;\n}\n\n.markdown-body h1 {\n  padding-bottom: 0.3em;\n  font-size: 2.25em;\n  line-height: 1.2;\n  border-bottom: 1px solid #eee;\n}\n\n.markdown-body h2 {\n  padding-bottom: 0.3em;\n  font-size: 1.75em;\n  line-height: 1.225;\n  border-bottom: 1px solid #eee;\n}\n\n.markdown-body h3 {\n  font-size: 1.5em;\n  line-height: 1.43;\n}\n\n.markdown-body h4 {\n  font-size: 1.25em;\n}\n\n.markdown-body h5 {\n  font-size: 1em;\n}\n\n.markdown-body h6 {\n  font-size: 1em;\n  color: #777;\n}\n\n.markdown-body p,\n.markdown-body blockquote,\n.markdown-body ul,\n.markdown-body ol,\n.markdown-body dl,\n.markdown-body table,\n.markdown-body pre,\n.markdown-body .admonition {\n  margin-top: 0;\n  margin-bottom: 16px;\n}\n\n.markdown-body hr {\n  height: 4px;\n  padding: 0;\n  margin: 16px 0;\n  background-color: #e7e7e7;\n  border: 0 none;\n}\n\n.markdown-body ul,\n.markdown-body ol {\n  padding-left: 2em;\n}\n\n.markdown-body ul ul,\n.markdown-body ul ol,\n.markdown-body ol ol,\n.markdown-body ol ul {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.markdown-body li\u003ep {\n  margin-top: 16px;\n}\n\n.markdown-body dl {\n  padding: 0;\n}\n\n.markdown-body dl dt {\n  padding: 0;\n  margin-top: 16px;\n  font-size: 1em;\n  font-style: italic;\n  font-weight: bold;\n}\n\n.markdown-body dl dd {\n  padding: 0 16px;\n  margin-bottom: 16px;\n}\n\n.markdown-body blockquote {\n  padding: 0 15px;\n  color: #777;\n  border-left: 4px solid #ddd;\n}\n\n.markdown-body blockquote\u003e:first-child {\n  margin-top: 0;\n}\n\n.markdown-body blockquote\u003e:last-child {\n  margin-bottom: 0;\n}\n\n.markdown-body table {\n  display: block;\n  width: 100%;\n  overflow: auto;\n  word-break: normal;\n  word-break: keep-all;\n}\n\n.markdown-body table th {\n  font-weight: bold;\n}\n\n.markdown-body table th,\n.markdown-body table td {\n  padding: 6px 13px;\n  border: 1px solid #ddd;\n}\n\n.markdown-body table tr {\n  background-color: #fff;\n  border-top: 1px solid #ccc;\n}\n\n.markdown-body table tr:nth-child(2n) {\n  background-color: #f8f8f8;\n}\n\n.markdown-body img {\n  max-width: 100%;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n}\n\n.markdown-body code,\n.markdown-body samp {\n  padding: 0;\n  padding-top: 0.2em;\n  padding-bottom: 0.2em;\n  margin: 0;\n  font-size: 85%;\n  border-radius: 3px;\n}\n\n.markdown-body code:not(.highlight):not(.codehilite), .markdown-body samp {\n  background-color: rgba(0,0,0,0.04);\n}\n\n.markdown-body code:before,\n.markdown-body code:after {\n  letter-spacing: -0.2em;\n  content: \"\\00a0\";\n}\n\n.markdown-body pre\u003ecode {\n  padding: 0;\n  margin: 0;\n  font-size: 100%;\n  word-break: normal;\n  white-space: pre;\n  background: transparent;\n  border: 0;\n}\n\n.markdown-body .codehilite,\n.markdown-body .highlight {\n  margin-bottom: 16px;\n}\n\n.markdown-body .codehilite pre,\n.markdown-body .highlight pre,\n.markdown-body pre {\n  padding: 16px;\n  overflow: auto;\n  font-size: 85%;\n  line-height: 1.45;\n}\n\n.markdown-body .codehilite,\n.markdown-body .highlight,\n.markdown-body pre {\n  border-radius: 3px;\n}\n\n.markdown-body :not(.highlight) \u003e pre {\n  background-color: #f7f7f7;\n}\n\n.markdown-body .codehilite pre,\n.markdown-body .highlight pre {\n  margin-bottom: 0;\n  word-break: normal;\n}\n\n.markdown-body pre {\n  word-wrap: normal;\n}\n\n.markdown-body pre code {\n  display: inline;\n  max-width: initial;\n  padding: 0;\n  margin: 0;\n  overflow: initial;\n  line-height: inherit;\n  word-wrap: normal;\n  background-color: transparent;\n  border: 0;\n}\n\n.markdown-body pre code:before,\n.markdown-body pre code:after {\n  content: normal;\n}\n\n/* Admonition */\n.markdown-body .admonition {\n  -webkit-border-radius: 3px;\n  -moz-border-radius: 3px;\n  position: relative;\n  border-radius: 3px;\n  border: 1px solid #e0e0e0;\n  border-left: 6px solid #333;\n  padding: 10px 10px 10px 30px;\n}\n\n.markdown-body .admonition table {\n  color: #333;\n}\n\n.markdown-body .admonition p {\n  padding: 0;\n}\n\n.markdown-body .admonition-title {\n  font-weight: bold;\n  margin: 0;\n}\n\n.markdown-body .admonition\u003e.admonition-title {\n  color: #333;\n}\n\n.markdown-body .attention\u003e.admonition-title {\n  color: #a6d796;\n}\n\n.markdown-body .caution\u003e.admonition-title {\n  color: #d7a796;\n}\n\n.markdown-body .hint\u003e.admonition-title {\n  color: #96c6d7;\n}\n\n.markdown-body .danger\u003e.admonition-title {\n  color: #c25f77;\n}\n\n.markdown-body .question\u003e.admonition-title {\n  color: #96a6d7;\n}\n\n.markdown-body .note\u003e.admonition-title {\n  color: #d7c896;\n}\n\n.markdown-body .admonition:before,\n.markdown-body .attention:before,\n.markdown-body .caution:before,\n.markdown-body .hint:before,\n.markdown-body .danger:before,\n.markdown-body .question:before,\n.markdown-body .note:before {\n  font: normal normal 16px fontawesome-mini;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  line-height: 1.5;\n  color: #333;\n  position: absolute;\n  left: 0;\n  top: 0;\n  padding-top: 10px;\n  padding-left: 10px;\n}\n\n.markdown-body .admonition:before {\n  content: \"\\f056\\00a0\";\n  color: 333;\n}\n\n.markdown-body .attention:before {\n  content: \"\\f058\\00a0\";\n  color: #a6d796;\n}\n\n.markdown-body .caution:before {\n  content: \"\\f06a\\00a0\";\n  color: #d7a796;\n}\n\n.markdown-body .hint:before {\n  content: \"\\f05a\\00a0\";\n  color: #96c6d7;\n}\n\n.markdown-body .danger:before {\n  content: \"\\f057\\00a0\";\n  color: #c25f77;\n}\n\n.markdown-body .question:before {\n  content: \"\\f059\\00a0\";\n  color: #96a6d7;\n}\n\n.markdown-body .note:before {\n  content: \"\\f040\\00a0\";\n  color: #d7c896;\n}\n\n.markdown-body .admonition::after {\n  content: normal;\n}\n\n.markdown-body .attention {\n  border-left: 6px solid #a6d796;\n}\n\n.markdown-body .caution {\n  border-left: 6px solid #d7a796;\n}\n\n.markdown-body .hint {\n  border-left: 6px solid #96c6d7;\n}\n\n.markdown-body .danger {\n  border-left: 6px solid #c25f77;\n}\n\n.markdown-body .question {\n  border-left: 6px solid #96a6d7;\n}\n\n.markdown-body .note {\n  border-left: 6px solid #d7c896;\n}\n\n.markdown-body .admonition\u003e*:first-child {\n  margin-top: 0 !important;\n}\n\n.markdown-body .admonition\u003e*:last-child {\n  margin-bottom: 0 !important;\n}\n\n/* progress bar*/\n.markdown-body .progress {\n  display: block;\n  width: 300px;\n  margin: 10px 0;\n  height: 24px;\n  -webkit-border-radius: 3px;\n  -moz-border-radius: 3px;\n  border-radius: 3px;\n  background-color: #ededed;\n  position: relative;\n  box-shadow: inset -1px 1px 3px rgba(0, 0, 0, .1);\n}\n\n.markdown-body .progress-label {\n  position: absolute;\n  text-align: center;\n  font-weight: bold;\n  width: 100%; margin: 0;\n  line-height: 24px;\n  color: #333;\n  text-shadow: 1px 1px 0 #fefefe, -1px -1px 0 #fefefe, -1px 1px 0 #fefefe, 1px -1px 0 #fefefe, 0 1px 0 #fefefe, 0 -1px 0 #fefefe, 1px 0 0 #fefefe, -1px 0 0 #fefefe, 1px 1px 2px #000;\n  -webkit-font-smoothing: antialiased !important;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.markdown-body .progress-bar {\n  height: 24px;\n  float: left;\n  -webkit-border-radius: 3px;\n  -moz-border-radius: 3px;\n  border-radius: 3px;\n  background-color: #96c6d7;\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .1);\n  background-size: 30px 30px;\n  background-image: -webkit-linear-gradient(\n    135deg, rgba(255, 255, 255, .4) 27%,\n    transparent 27%,\n    transparent 52%, rgba(255, 255, 255, .4) 52%,\n    rgba(255, 255, 255, .4) 77%,\n    transparent 77%, transparent\n  );\n  background-image: -moz-linear-gradient(\n    135deg,\n    rgba(255, 255, 255, .4) 27%, transparent 27%,\n    transparent 52%, rgba(255, 255, 255, .4) 52%,\n    rgba(255, 255, 255, .4) 77%, transparent 77%,\n    transparent\n  );\n  background-image: -ms-linear-gradient(\n    135deg,\n    rgba(255, 255, 255, .4) 27%, transparent 27%,\n    transparent 52%, rgba(255, 255, 255, .4) 52%,\n    rgba(255, 255, 255, .4) 77%, transparent 77%,\n    transparent\n  );\n  background-image: -o-linear-gradient(\n    135deg,\n    rgba(255, 255, 255, .4) 27%, transparent 27%,\n    transparent 52%, rgba(255, 255, 255, .4) 52%,\n    rgba(255, 255, 255, .4) 77%, transparent 77%,\n    transparent\n  );\n  background-image: linear-gradient(\n    135deg,\n    rgba(255, 255, 255, .4) 27%, transparent 27%,\n    transparent 52%, rgba(255, 255, 255, .4) 52%,\n    rgba(255, 255, 255, .4) 77%, transparent 77%,\n    transparent\n  );\n}\n\n.markdown-body .progress-100plus .progress-bar {\n  background-color: #a6d796;\n}\n\n.markdown-body .progress-80plus .progress-bar {\n  background-color: #c6d796;\n}\n\n.markdown-body .progress-60plus .progress-bar {\n  background-color: #d7c896;\n}\n\n.markdown-body .progress-40plus .progress-bar {\n  background-color: #d7a796;\n}\n\n.markdown-body .progress-20plus .progress-bar {\n  background-color: #d796a6;\n}\n\n.markdown-body .progress-0plus .progress-bar {\n  background-color: #c25f77;\n}\n\n.markdown-body .candystripe-animate .progress-bar{\n  -webkit-animation: animate-stripes 3s linear infinite;\n  -moz-animation: animate-stripes 3s linear infinite;\n  animation: animate-stripes 3s linear infinite;\n}\n\n@-webkit-keyframes animate-stripes {\n  0% {\n    background-position: 0 0;\n  }\n\n  100% {\n    background-position: 60px 0;\n  }\n}\n\n@-moz-keyframes animate-stripes {\n  0% {\n    background-position: 0 0;\n  }\n\n  100% {\n    background-position: 60px 0;\n  }\n}\n\n@keyframes animate-stripes {\n  0% {\n    background-position: 0 0;\n  }\n\n  100% {\n    background-position: 60px 0;\n  }\n}\n\n.markdown-body .gloss .progress-bar {\n  box-shadow:\n    inset 0 4px 12px rgba(255, 255, 255, .7),\n    inset 0 -12px 0 rgba(0, 0, 0, .05);\n}\n\n/* MultiMarkdown Critic Blocks */\n.markdown-body .critic_mark {\n  background: #ff0;\n}\n\n.markdown-body .critic_delete {\n  color: #c82829;\n  text-decoration: line-through;\n}\n\n.markdown-body .critic_insert {\n  color: #718c00 ;\n  text-decoration: underline;\n}\n\n.markdown-body .critic_comment {\n  color: #8e908c;\n  font-style: italic;\n}\n\n.markdown-body .headeranchor {\n  font: normal normal 16px fontawesome-mini;\n  line-height: 1;\n  display: inline-block;\n  text-decoration: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.headeranchor:before {\n  content: '\\e157';\n}\n\n.markdown-body .task-list-item {\n  list-style-type: none;\n}\n\n.markdown-body .task-list-item+.task-list-item {\n  margin-top: 3px;\n}\n\n.markdown-body .task-list-item input {\n  margin: 0 4px 0.25em -20px;\n  vertical-align: middle;\n}\n\n.markdown-body diagram-div, .markdown-body div.uml-sequence-diagram, .markdown-body, div.uml-flowchart {\n  overflow: auto;\n}\n\n/* Media */\n@media only screen and (min-width: 480px) {\n  .markdown-body {\n    font-size:14px;\n  }\n}\n\n@media only screen and (min-width: 768px) {\n  .markdown-body {\n    font-size:16px;\n  }\n}\n\n@media print {\n  .markdown-body * {\n    background: transparent !important;\n    color: black !important;\n    filter:none !important;\n    -ms-filter: none !important;\n  }\n\n  .markdown-body {\n    font-size:12pt;\n    max-width:100%;\n    outline:none;\n    border: 0;\n  }\n\n  .markdown-body a,\n  .markdown-body a:visited {\n    text-decoration: underline;\n  }\n\n  .markdown-body .headeranchor-link {\n    display: none;\n  }\n\n  .markdown-body a[href]:after {\n    content: \" (\" attr(href) \")\";\n  }\n\n  .markdown-body abbr[title]:after {\n    content: \" (\" attr(title) \")\";\n  }\n\n  .markdown-body .ir a:after,\n  .markdown-body a[href^=\"javascript:\"]:after,\n  .markdown-body a[href^=\"#\"]:after {\n    content: \"\";\n  }\n\n  .markdown-body pre {\n    white-space: pre;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  }\n\n  .markdown-body pre,\n  .markdown-body blockquote {\n    border: 1px solid #999;\n    padding-right: 1em;\n    page-break-inside: avoid;\n  }\n\n  .markdown-body .progress,\n  .markdown-body .progress-bar {\n    -moz-box-shadow: none;\n    -webkit-box-shadow: none;\n    box-shadow: none;\n  }\n\n  .markdown-body .progress {\n    border: 1px solid #ddd;\n  }\n\n  .markdown-body .progress-bar {\n    height: 22px;\n    border-right: 1px solid #ddd;\n  }\n\n  .markdown-body tr,\n  .markdown-body img {\n    page-break-inside: avoid;\n  }\n\n  .markdown-body img {\n    max-width: 100% !important;\n  }\n\n  .markdown-body p,\n  .markdown-body h2,\n  .markdown-body h3 {\n    orphans: 3;\n    widows: 3;\n  }\n\n  .markdown-body h2,\n  .markdown-body h3 {\n    page-break-after: avoid;\n  }\n}\n\u003c/style\u003e\u003cstyle\u003e/*GitHub*/\n.highlight {background-color:#f7f7f7;color:#333333;}\n.highlight .hll {background-color:#ffffcc;}\n.highlight .c{color:#999988;font-style:italic}\n.highlight .err{color:#a61717;background-color:#e3d2d2}\n.highlight .k{font-weight:bold}\n.highlight .o{font-weight:bold}\n.highlight .cm{color:#999988;font-style:italic}\n.highlight .cp{color:#999999;font-weight:bold}\n.highlight .c1{color:#999988;font-style:italic}\n.highlight .cs{color:#999999;font-weight:bold;font-style:italic}\n.highlight .gd{color:#000000;background-color:#ffdddd}\n.highlight .ge{font-style:italic}\n.highlight .gr{color:#aa0000}\n.highlight .gh{color:#999999}\n.highlight .gi{color:#000000;background-color:#ddffdd}\n.highlight .go{color:#888888}\n.highlight .gp{color:#555555}\n.highlight .gs{font-weight:bold}\n.highlight .gu{color:#800080;font-weight:bold}\n.highlight .gt{color:#aa0000}\n.highlight .kc{font-weight:bold}\n.highlight .kd{font-weight:bold}\n.highlight .kn{font-weight:bold}\n.highlight .kp{font-weight:bold}\n.highlight .kr{font-weight:bold}\n.highlight .kt{color:#445588;font-weight:bold}\n.highlight .m{color:#009999}\n.highlight .s{color:#dd1144}\n.highlight .n{color:#333333}\n.highlight .na{color:teal}\n.highlight .nb{color:#0086b3}\n.highlight .nc{color:#445588;font-weight:bold}\n.highlight .no{color:teal}\n.highlight .ni{color:purple}\n.highlight .ne{color:#990000;font-weight:bold}\n.highlight .nf{color:#990000;font-weight:bold}\n.highlight .nn{color:#555555}\n.highlight .nt{color:navy}\n.highlight .nv{color:teal}\n.highlight .ow{font-weight:bold}\n.highlight .w{color:#bbbbbb}\n.highlight .mf{color:#009999}\n.highlight .mh{color:#009999}\n.highlight .mi{color:#009999}\n.highlight .mo{color:#009999}\n.highlight .sb{color:#dd1144}\n.highlight .sc{color:#dd1144}\n.highlight .sd{color:#dd1144}\n.highlight .s2{color:#dd1144}\n.highlight .se{color:#dd1144}\n.highlight .sh{color:#dd1144}\n.highlight .si{color:#dd1144}\n.highlight .sx{color:#dd1144}\n.highlight .sr{color:#009926}\n.highlight .s1{color:#dd1144}\n.highlight .ss{color:#990073}\n.highlight .bp{color:#999999}\n.highlight .vc{color:teal}\n.highlight .vg{color:teal}\n.highlight .vi{color:teal}\n.highlight .il{color:#009999}\n.highlight .gc{color:#999;background-color:#EAF2F5}\n\u003c/style\u003e\u003ctitle\u003eREADME\u003c/title\u003e\u003c/head\u003e\u003cbody\u003e\u003carticle class=\"markdown-body\"\u003e\u003ch2 id=\"installation\"\u003e📦 Installation\u003ca class=\"headerlink\" href=\"#installation\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h2\u003e\n\u003ch3 id=\"via-cdn\"\u003evia CDN\u003ca class=\"headerlink\" href=\"#via-cdn\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u0026lt;script defer async src=\u0026quot;https://integrate.depay.com/widgets/v13.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch3 id=\"via-package-manager-recommended\"\u003evia Package Manager (recommended)\u003ca class=\"headerlink\" href=\"#via-package-manager-recommended\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003eyarn add @depay/widgets ethers react react-dom\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eor\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003enpm install @depay/widgets ethers react react-dom --save\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003e[!IMPORTANT]\nEnsure the peer dependencies (ethers, react, and react-dom) are installed if not already present.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003ch2 id=\"import-in-your-javascript-files\"\u003eImport in your JavaScript files\u003ca class=\"headerlink\" href=\"#import-in-your-javascript-files\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003eimport DePayWidgets from \u0026#39;@depay/widgets\u0026#39;\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch2 id=\"server-side-rendering-ssr\"\u003eServer-Side Rendering (SSR)\u003ca class=\"headerlink\" href=\"#server-side-rendering-ssr\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h2\u003e\n\u003cp\u003eIf you\u0026rsquo;re using SSR frameworks like Next.js, make sure to only load DePay Widgets on the client side.\u003c/p\u003e\n\u003cp\u003eGuide: \u003ca href=\"https://dev.to/elisabethleonhardt/how-to-use-client-side-only-packages-with-ssr-in-gatsby-and-nextjs-3pfa\"\u003ehttps://dev.to/elisabethleonhardt/how-to-use-client-side-only-packages-with-ssr-in-gatsby-and-nextjs-3pfa\u003c/a\u003e\u003c/p\u003e\n\u003ch2 id=\"demos\"\u003eDemos\u003ca class=\"headerlink\" href=\"#demos\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h2\u003e\n\u003cp\u003eConfigurator UI: \u003ca href=\"https://app.depay.com/integrations/new\"\u003ehttps://app.depay.com/integrations/new\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eTechnical Demo: \u003ca href=\"https://depayfi.github.io/widgets/demo.bundle.html\"\u003ehttps://depayfi.github.io/widgets/demo.bundle.html\u003c/a\u003e\u003c/p\u003e\n\u003ch2 id=\"support\"\u003eSupport\u003ca class=\"headerlink\" href=\"#support\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h2\u003e\n\u003ch3 id=\"platforms\"\u003ePlatforms\u003ca class=\"headerlink\" href=\"#platforms\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eEthereum Virtual Machine (EVM)\u003c/li\u003e\n\u003cli\u003eSolana Virtual Machine (SVM)\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch4 id=\"platform-specific-packaging\"\u003ePlatform specific packaging\u003ca class=\"headerlink\" href=\"#platform-specific-packaging\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003eIf only specific platform packaging is needed:\u003c/p\u003e\n\u003ch5 id=\"evm-ethereum-virtual-machine\"\u003eEVM (Ethereum Virtual Machine)\u003ca class=\"headerlink\" href=\"#evm-ethereum-virtual-machine\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h5\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003eyarn add @depay/widgets-evm\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"kr\"\u003eimport\u003c/span\u003e \u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e \u003cspan class=\"nx\"\u003efrom\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;@depay/widgets-evm\u0026#39;\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch5 id=\"svm-solana-virtual-machine\"\u003eSVM (Solana Virtual Machine)\u003ca class=\"headerlink\" href=\"#svm-solana-virtual-machine\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h5\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003eyarn add @depay/widgets-svm\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eor\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003enpm install @depay/widgets-svm --save\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"kr\"\u003eimport\u003c/span\u003e \u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e \u003cspan class=\"nx\"\u003efrom\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;@depay/widgets-svm\u0026#39;\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch3 id=\"blockchains\"\u003eBlockchains\u003ca class=\"headerlink\" href=\"#blockchains\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://ethereum.org\"\u003eEthereum\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.binance.org/smartChain\"\u003eBNB Smart Chain\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://polygon.technology\"\u003ePolygon\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://solana.com\"\u003eSolana\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.optimism.io\"\u003eOptimism\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://arbitrum.io\"\u003eArbitrum\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.avax.network\"\u003eAvalanche\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://gnosis.io\"\u003eGnosis\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://base.org\"\u003eBase\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://world.org/world-chain\"\u003eWorldchain\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"wallets\"\u003eWallets\u003ca class=\"headerlink\" href=\"#wallets\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eDePay supports \u003ca href=\"https://depay.com/wallets\"\u003emost crypto wallets\u003c/a\u003e.\u003c/p\u003e\n\u003ch2 id=\"payment-widget\"\u003ePayment Widget\u003ca class=\"headerlink\" href=\"#payment-widget\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h2\u003e\n\u003cp\u003eDePay Payments allows you to accept and perform seamless crypto payments.\u003c/p\u003e\n\u003ch3 id=\"integration\"\u003eIntegration\u003ca class=\"headerlink\" href=\"#integration\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003e\u003ccode\u003eintegration\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eConnects the widget to a DePay integration managed via \u003ca href=\"https://app.depay.com\"\u003ehttps://app.depay.com\u003c/a\u003e:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003eintegration\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;fe690fbc-1740-4894-b12c-23a72abec54d\u0026#39;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eThe configuration of the integration managed via \u003ca href=\"https://app.depay.com\"\u003ehttps://app.depay.com\u003c/a\u003e will be fetched and applied before applying any additional local configurations.\u003c/p\u003e\n\u003cp\u003eYou can fully manage an integration via \u003ca href=\"https://app.depay.com\"\u003ehttps://app.depay.com\u003c/a\u003e. Passing any additional configuration is not necessary.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e[!IMPORTANT]\nLocally applied configurations overwrite remotely stored configurations.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp\u003eIf your integration relies on processing dynamic from your backend (e.g. pricing), and you are not managing a fixed configuration via \u003ca href=\"https://app.depay.com\"\u003ehttps://app.depay.com\u003c/a\u003e,\nyou need to pass the data that is supposed to be forwarded to your backend for dynamic configurations to the widget:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003eintegration\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;fe690fbc-1740-4894-b12c-23a72abec54d\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003epayload\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003ewhatever\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;you want to forward to your backend for dynamic configurations\u0026#39;\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eThis will forward:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e{\n  whatever: \u0026#39;you want to forward to your backend for dynamic configurations\u0026#39;\n}\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eto your backend in order to receive a payment configuration for the widget.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e[!CAUTION]\nYou have the option to utilize managed integrations along with the \u003ccode\u003eintegration\u003c/code\u003e attribute for payment validations (refer to the previous section). Alternatively, if payment validations are not necessary, you may opt for basic configurations using \u003ccode\u003eaccept\u003c/code\u003e (see next section). However, it\u0026rsquo;s important to note that \u003ccode\u003eintegration\u003c/code\u003e and \u003ccode\u003eaccept\u003c/code\u003e cannot be used simultaneously.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003ch3 id=\"configuration\"\u003eConfiguration\u003ca class=\"headerlink\" href=\"#configuration\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cblockquote\u003e\n\u003cp\u003e[!CAUTION]\nTo manage your payment integration via app.depay.com, do not pass payment configuration locally. Instead, use app.depay.com exclusively to configure all payment-related settings.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003eaccept\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e[{\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003eblockchain\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;ethereum\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003eamount\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e20\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003etoken\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003ereceiver\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02\u0026#39;\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}]\u003c/span\u003e\n\u003cspan class=\"p\"\u003e});\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eYou can also accept multiple payments on multiple blockchains:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003eaccept\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003cspan class=\"c1\"\u003e// 20 USDT on ethereum\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eblockchain\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;ethereum\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eamount\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e20\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003etoken\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;0xdac17f958d2ee523a2206206994597c13d831ec7\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003ereceiver\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02\u0026#39;\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e},{\u003c/span\u003e \u003cspan class=\"c1\"\u003e// 20 BUSD on bsc\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eblockchain\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;bsc\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eamount\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e20\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003etoken\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;0xe9e7cea3dedca5984780bafc599bd69add087d56\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003ereceiver\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;0x552C2a5a774CcaEeC036d41c983808E3c76477e6\u0026#39;\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e},{\u003c/span\u003e \u003cspan class=\"c1\"\u003e// 20 USDC on polygon\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eblockchain\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;polygon\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eamount\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e20\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003etoken\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;0x2791bca1f2de4661ed88a30c99a7a9449aa84174\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003ereceiver\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;0x552C2a5a774CcaEeC036d41c983808E3c76477e6\u0026#39;\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e]\u003c/span\u003e\n\u003cspan class=\"p\"\u003e});\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch4 id=\"accept\"\u003eaccept\u003ca class=\"headerlink\" href=\"#accept\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003e\u003ccode\u003eblockchain\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eThe blockchain you want to receive the payment on.\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003etoken\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eThe address of the token you want to receive.\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003eamount\u003c/code\u003e (Optional)\u003c/p\u003e\n\u003cp\u003eThe amount of tokens you want to receive. Needs to be passed as a human readable number e.g. \u003ccode\u003e20\u003c/code\u003e.\u003c/p\u003e\n\u003cp\u003eThe \u003ccode\u003eBigNumber\u003c/code\u003e of that amount will be calculated internally including finding the right amount of decimals for the given token.\nSo please just pass the amount in a human readable form as Number/Decimal: e.g. \u003ccode\u003e20\u003c/code\u003e for 20 USDT or \u003ccode\u003e20.25\u003c/code\u003e etc.\u003c/p\u003e\n\u003cp\u003eIf you do not pass an amount, the user will be able to select an amount within the widget.\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003ereceiver\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eThe address receiving the payment. Always double check that you\u0026rsquo;ve set the right address.\u003c/p\u003e\n\u003ch4 id=\"amount\"\u003eamount\u003ca class=\"headerlink\" href=\"#amount\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n\u003ch5 id=\"fixed-currency-amounts\"\u003efixed currency amounts\u003ca class=\"headerlink\" href=\"#fixed-currency-amounts\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h5\u003e\n\u003cp\u003eIf you want the widget to fix a payment amount in a currency, use \u003ccode\u003ecurrency\u003c/code\u003e and \u003ccode\u003efix\u003c/code\u003e:\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003ecurrency\u003c/code\u003e: \u003c/p\u003e\n\u003cp\u003eExample (charge US$5.20):\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e{\n  amount: {\n    currency: \u0026#39;USD\u0026#39;,\n    fix: 5.20\n  }\n}\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eMake sure to not pass any amounts to \u003ccode\u003eaccept\u003c/code\u003e if you use fix currency amounts.\u003c/p\u003e\n\u003cp\u003eThe widget will still display local currency conversions to users. If you want to change this see \u003ccode\u003ecurrency\u003c/code\u003e configuration.\u003c/p\u003e\n\u003ch5 id=\"amount-selection-changeable-amounts\"\u003eamount selection (changeable amounts)\u003ca class=\"headerlink\" href=\"#amount-selection-changeable-amounts\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h5\u003e\n\u003cp\u003eWhen you want to control how the amount selection behaves, pass the \u003ccode\u003eamount\u003c/code\u003e configuration object,\nalongside values for \u003ccode\u003estart\u003c/code\u003e, \u003ccode\u003emin\u003c/code\u003e and \u003ccode\u003estep\u003c/code\u003e.\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003estart\u003c/code\u003e: The amount that is initially selected.\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003emin\u003c/code\u003e: The minimum amount selectable.\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003estep\u003c/code\u003e: The number by which to increment/decrement changes to the amount.\u003c/p\u003e\n\u003ch4 id=\"fee\"\u003efee\u003ca class=\"headerlink\" href=\"#fee\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003eYou can configure a fee which will be applied to every payment with its own dedicated fee receiver address.\u003c/p\u003e\n\u003cp\u003eThe fee will be taken from the target token and target amount (after swap, depending on your \u003ccode\u003eaccept\u003c/code\u003e configuration).\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003eamount\u003c/code\u003e: Either percentage (e.g. \u003ccode\u003e5%\u003c/code\u003e, or absolute amount as BigNumber string (\u0026lsquo;100000000000000000\u0026rsquo;) or pure number (2.5)\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003ereceiver\u003c/code\u003e: The address that is supposed to receive the fee.\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003eaccept\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e{...\u003c/span\u003e\n\n      \u003cspan class=\"nx\"\u003efee\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eamount\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;3%\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003ereceiver\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02\u0026#39;\u003c/span\u003e\n      \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e],\u003c/span\u003e\n\u003cspan class=\"p\"\u003e});\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch5 id=\"fee2\"\u003efee2\u003ca class=\"headerlink\" href=\"#fee2\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h5\u003e\n\u003cp\u003eYou can configure up to 2 fees that will be paid out as part of the payment:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003eaccept\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e{...\u003c/span\u003e\n\n      \u003cspan class=\"nx\"\u003efee\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e{...},\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003efee2\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e{,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eamount\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;5%\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003ereceiver\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;0x08B277154218CCF3380CAE48d630DA13462E3950\u0026#39;\u003c/span\u003e\n      \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e],\u003c/span\u003e\n\u003cspan class=\"p\"\u003e});\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch5 id=\"protocolfee\"\u003eprotocolFee\u003ca class=\"headerlink\" href=\"#protocolfee\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h5\u003e\n\u003cp\u003eThe fee paid to the protocol:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n\n  \u003cspan class=\"nx\"\u003eprotocolFee\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;1.5%\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n\n\u003cspan class=\"p\"\u003e});\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch4 id=\"title\"\u003etitle\u003ca class=\"headerlink\" href=\"#title\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003e\u003ccode\u003etitle\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eAllows you to change the title of the widget:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n\n  \u003cspan class=\"nx\"\u003etitle\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;Donation\u0026#39;\u003c/span\u003e\n\n  \u003cspan class=\"c1\"\u003e//...\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch4 id=\"wallets_1\"\u003ewallets\u003ca class=\"headerlink\" href=\"#wallets_1\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003eYou can sort and allow (list) wallets displayed during the initial wallet selection step as follows:\u003c/p\u003e\n\u003ch5 id=\"walletssort\"\u003ewallets.sort\u003ca class=\"headerlink\" href=\"#walletssort\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h5\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e{\n  wallets: {\n    sort: [\n      \u0026#39;Uniswap\u0026#39;,\n      \u0026#39;Coinbase\u0026#39;\n    ]\n  }\n}\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eThis configuration would display Uniswap and Coinbase first, then would list all the others.\u003c/p\u003e\n\u003ch5 id=\"walletsallow\"\u003ewallets.allow\u003ca class=\"headerlink\" href=\"#walletsallow\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h5\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e{\n  wallets: {\n    allow: [\n      \u0026#39;Uniswap\u0026#39;,\n      \u0026#39;Coinbase\u0026#39;,\n      \u0026#39;Rainbow\u0026#39;\n    ]\n  }\n}\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eThis configuration would only display Uniswap, Coinbase and Rainbow. No other options/wallets are displayed.\u003c/p\u003e\n\u003ch4 id=\"wallet\"\u003ewallet\u003ca class=\"headerlink\" href=\"#wallet\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003e\u003ccode\u003ewallet\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eAllows to pass an already connected wallet instance (to skip the \u0026ldquo;Connect Wallet\u0026rdquo; flow):\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003cspan class=\"nx\"\u003ewallet\u003c/span\u003e \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eConnect\u003c/span\u003e\u003cspan class=\"p\"\u003e({})\u003c/span\u003e\n\n\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n\n  \u003cspan class=\"nx\"\u003ewallet\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003ewallet\u003c/span\u003e\n\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch4 id=\"providers\"\u003eproviders\u003ca class=\"headerlink\" href=\"#providers\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003eAllows to set providers to be used for making RPC calls to the individual blockchains:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n\n  \u003cspan class=\"nx\"\u003eproviders\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003eethereum\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;http://localhost:8545\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003ebsc\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;http://localhost:8545\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003epolygon\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;http://localhost:8545\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e]\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch4 id=\"currency\"\u003ecurrency\u003ca class=\"headerlink\" href=\"#currency\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003eAllows you to enforce displayed local currency (instead of automatically detecting it):\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n\n  \u003cspan class=\"nx\"\u003ecurrency\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;USD\u0026#39;\u003c/span\u003e\n\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch4 id=\"allow-list\"\u003eallow (list)\u003ca class=\"headerlink\" href=\"#allow-list\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003eAllows only the configured tokens to be eligible as means of payment:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003eDePayWidgets.Payment({\n\n  allow: {\n    ethereum: [\n      \u0026#39;0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE\u0026#39;, // ETH\n      \u0026#39;0xdac17f958d2ee523a2206206994597c13d831ec7\u0026#39;, // USDT\n      \u0026#39;0x6b175474e89094c44da98b954eedeac495271d0f\u0026#39;  // DAI\n    ],\n    bsc: [\n      \u0026#39;0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE\u0026#39;, // BNB\n      \u0026#39;0xe9e7cea3dedca5984780bafc599bd69add087d56\u0026#39;, // BUSD\n      \u0026#39;0x55d398326f99059ff775485246999027b3197955\u0026#39;  // BSC-USD\n    ],\n    polygon: [\n      \u0026#39;0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE\u0026#39;, // MATIC\n      \u0026#39;0x2791bca1f2de4661ed88a30c99a7a9449aa84174\u0026#39;, // USDC\n    ]\n  }\n\n})\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch4 id=\"deny\"\u003edeny\u003ca class=\"headerlink\" href=\"#deny\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003eAllows to deny tokens so that they will not be suggested as means of payment:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003eDePayWidgets.Payment({\n\n  deny: {\n    ethereum: [\n      \u0026#39;0x82dfDB2ec1aa6003Ed4aCBa663403D7c2127Ff67\u0026#39;,  // akSwap\n      \u0026#39;0x1368452Bfb5Cd127971C8DE22C58fBE89D35A6BF\u0026#39;,  // JNTR/e\n      \u0026#39;0xC12D1c73eE7DC3615BA4e37E4ABFdbDDFA38907E\u0026#39;,  // KICK\n    ],\n    bsc: [\n      \u0026#39;0x119e2ad8f0c85c6f61afdf0df69693028cdc10be\u0026#39;, // Zepe\n      \u0026#39;0xb0557906c617f0048a700758606f64b33d0c41a6\u0026#39;, // Zepe\n      \u0026#39;0x5190b01965b6e3d786706fd4a999978626c19880\u0026#39;, // TheEver\n      \u0026#39;0x68d1569d1a6968f194b4d93f8d0b416c123a599f\u0026#39;, // AABek\n      \u0026#39;0xa2295477a3433f1d06ba349cde9f89a8b24e7f8d\u0026#39;, // AAX\n      \u0026#39;0xbc6675de91e3da8eac51293ecb87c359019621cf\u0026#39;, // AIR\n      \u0026#39;0x5558447b06867ffebd87dd63426d61c868c45904\u0026#39;, // BNBW\n      \u0026#39;0x569b2cf0b745ef7fad04e8ae226251814b3395f9\u0026#39;, // BSCTOKEN\n      \u0026#39;0x373233a38ae21cf0c4f9de11570e7d5aa6824a1e\u0026#39;, // ALPACA\n      \u0026#39;0x7269163f2b060fb90101f58cf724737a2759f0bb\u0026#39;, // PUPDOGE\n      \u0026#39;0xb16600c510b0f323dee2cb212924d90e58864421\u0026#39;, // FLUX\n      \u0026#39;0x2df0b14ee90671021b016dab59f2300fb08681fa\u0026#39;, // SAFEMOON.is\n      \u0026#39;0xd22202d23fe7de9e3dbe11a2a88f42f4cb9507cf\u0026#39;, // MNEB\n      \u0026#39;0xfc646d0b564bf191b3d3adf2b620a792e485e6da\u0026#39;, // PIZA\n      \u0026#39;0xa58950f05fea2277d2608748412bf9f802ea4901\u0026#39;, // WSG\n      \u0026#39;0x12e34cdf6a031a10fe241864c32fb03a4fdad739\u0026#39; // FREE\n    ]\n  }\n})\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch4 id=\"container\"\u003econtainer\u003ca class=\"headerlink\" href=\"#container\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003e\u003ccode\u003econtainer\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eAllows you to pass a container element that is supposed to contain the widget:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003econtainer\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nb\"\u003edocument\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egetElementById\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;my-container\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eMake sure to set the css value \u003ccode\u003eposition: relative;\u003c/code\u003e for the container element. Otherwise it can not contain the widget.\u003c/p\u003e\n\u003cp\u003eReact example:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003eCustomComponentWithWidget\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eprops\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003econtainer\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003euseRef\u003c/span\u003e\u003cspan class=\"p\"\u003e()\u003c/span\u003e\n\n    \u003cspan class=\"nx\"\u003euseEffect\u003c/span\u003e\u003cspan class=\"p\"\u003e(()\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\n      \u003cspan class=\"k\"\u003eif\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003econtainer\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ecurrent\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e \u003cspan class=\"p\"\u003e...\u003c/span\u003e\u003cspan class=\"nx\"\u003edefaultArguments\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nb\"\u003edocument\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n          \u003cspan class=\"nx\"\u003econtainer\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003econtainer\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ecurrent\u003c/span\u003e\n        \u003cspan class=\"p\"\u003e})\u003c/span\u003e\n      \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e},\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"nx\"\u003econtainer\u003c/span\u003e\u003cspan class=\"p\"\u003e])\u003c/span\u003e\n\n    \u003cspan class=\"k\"\u003ereturn\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\n      \u003cspan class=\"o\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nx\"\u003ediv\u003c/span\u003e \u003cspan class=\"nx\"\u003eref\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\u003cspan class=\"nx\"\u003econtainer\u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"nx\"\u003estyle\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"p\"\u003e{{\u003c/span\u003e \u003cspan class=\"nx\"\u003eposition\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;relative\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003eborder\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;1px solid black\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003ewidth\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s2\"\u003e\u0026quot;600px\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003eheight\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s2\"\u003e\u0026quot;600px\u0026quot;\u003c/span\u003e \u003cspan class=\"p\"\u003e}}\u003c/span\u003e\u003cspan class=\"o\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\"err\"\u003e/div\u0026gt;\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e)\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch4 id=\"style\"\u003estyle\u003ca class=\"headerlink\" href=\"#style\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003e\u003ccode\u003estyle\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eAllows you to change the style of the widget.\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003estyle\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003ecolors\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eprimary\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#ffd265\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003etext\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#e1b64a\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003ebuttonText\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#000000\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e},\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003efontFamily\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;\u0026quot;Cardo\u0026quot;, serif !important\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003ecss\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"err\"\u003e`\u003c/span\u003e\n      \u003cspan class=\"err\"\u003e@\u003c/span\u003e\u003cspan class=\"kr\"\u003eimport\u003c/span\u003e \u003cspan class=\"nx\"\u003eurl\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s2\"\u003e\u0026quot;https://fonts.googleapis.com/css2?family=Cardo:wght@400;700\u0026amp;display=swap\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\n      \u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eReactDialogBackground\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003ebackground\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003ergba\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"mf\"\u003e0.8\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n      \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n    \u003cspan class=\"err\"\u003e`\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch5 id=\"colors\"\u003ecolors\u003ca class=\"headerlink\" href=\"#colors\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h5\u003e\n\u003cp\u003e\u003ccode\u003ecolors\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eAllows you to set color values:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n\n  \u003cspan class=\"nx\"\u003estyle\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003ecolors\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eprimary\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#ffd265\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003etext\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#ffd265\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003ebuttonText\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#000000\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eicons\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#ffd265\u0026#39;\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch5 id=\"colorsdarkmode\"\u003ecolorsDarkMode\u003ca class=\"headerlink\" href=\"#colorsdarkmode\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h5\u003e\n\u003cp\u003eYou can pass colors applicable to dark mode:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n\n  \u003cspan class=\"nx\"\u003estyle\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003ecolorsDarkMode\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eprimary\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#000265\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003etext\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#000265\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003ebuttonText\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#FFFFFF\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003eicons\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#000265\u0026#39;\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch5 id=\"fontfamily\"\u003efontFamily\u003ca class=\"headerlink\" href=\"#fontfamily\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h5\u003e\n\u003cp\u003e\u003ccode\u003efontFamily\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eAllows you to set the font-family:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n\n  \u003cspan class=\"nx\"\u003estyle\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003efontFamily\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;\u0026quot;Cardo\u0026quot;, serif !important\u0026#39;\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch5 id=\"css\"\u003ecss\u003ca class=\"headerlink\" href=\"#css\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h5\u003e\n\u003cp\u003e\u003ccode\u003ecss\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eAllows you to inject CSS:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n\n  \u003cspan class=\"nx\"\u003estyle\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003ecss\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"err\"\u003e`\u003c/span\u003e\n      \u003cspan class=\"err\"\u003e@\u003c/span\u003e\u003cspan class=\"kr\"\u003eimport\u003c/span\u003e \u003cspan class=\"nx\"\u003eurl\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s2\"\u003e\u0026quot;https://fonts.googleapis.com/css2?family=Cardo:wght@400;700\u0026amp;display=swap\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\n      \u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eReactDialogBackground\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003ebackground\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003ergba\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"mf\"\u003e0.8\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n      \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n    \u003cspan class=\"err\"\u003e`\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch6 id=\"cssdarkmode\"\u003ecssDarkMode\u003ca class=\"headerlink\" href=\"#cssdarkmode\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h6\u003e\n\u003cp\u003eAllows you to inject css to adjust darkMode:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n\n  \u003cspan class=\"nx\"\u003estyle\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003ecssDarkMode\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"err\"\u003e`\u003c/span\u003e\n      \u003cspan class=\"err\"\u003e@\u003c/span\u003e\u003cspan class=\"kr\"\u003eimport\u003c/span\u003e \u003cspan class=\"nx\"\u003eurl\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s2\"\u003e\u0026quot;https://fonts.googleapis.com/css2?family=Cardo:wght@400;700\u0026amp;display=swap\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\n      \u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eReactDialogBackground\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003ebackground\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003ergba\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"mf\"\u003e0.8\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n      \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n    \u003cspan class=\"err\"\u003e`\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch4 id=\"unmount\"\u003eunmount\u003ca class=\"headerlink\" href=\"#unmount\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003e\u003ccode\u003eunmount\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eAllows you to unmount (the React safe way) the entire widget from the outside:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003cspan class=\"nx\"\u003eunmount\u003c/span\u003e \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eawait\u003c/span\u003e \u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({})\u003c/span\u003e\n\n\u003cspan class=\"nx\"\u003eunmount\u003c/span\u003e\u003cspan class=\"p\"\u003e()\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch2 id=\"connect-widget\"\u003eConnect Widget\u003ca class=\"headerlink\" href=\"#connect-widget\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h2\u003e\n\u003cp\u003eDePay Connect allows you to have your users connect their crypto wallet to your dApp or website.\u003c/p\u003e\n\u003cp\u003eReturns connected \u003ccode\u003eaccount\u003c/code\u003e and \u003ccode\u003ewallet\u003c/code\u003e in return. \u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003cspan class=\"nx\"\u003eaccount\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003ewallet\u003c/span\u003e \u003cspan class=\"p\"\u003e}\u003c/span\u003e  \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eawait\u003c/span\u003e \u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eConnect\u003c/span\u003e\u003cspan class=\"p\"\u003e()\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eSee \u003ca href=\"https://github.com/depayfi/web3-wallets\"\u003eweb3-wallets\u003c/a\u003e for more details about the returned \u003ccode\u003ewallet\u003c/code\u003e.\u003c/p\u003e\n\u003ch3 id=\"rejections\"\u003eRejections\u003ca class=\"headerlink\" href=\"#rejections\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003eRejects if user just closes the dialog without connecting any wallet:\u003c/li\u003e\n\u003c/ol\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eConnect\u003c/span\u003e\u003cspan class=\"p\"\u003e().\u003c/span\u003e\u003cspan class=\"nx\"\u003ethen\u003c/span\u003e\u003cspan class=\"p\"\u003e(()\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e\u003cspan class=\"p\"\u003e{}).\u003c/span\u003e\u003cspan class=\"k\"\u003ecatch\u003c/span\u003e\u003cspan class=\"p\"\u003e((\u003c/span\u003e\u003cspan class=\"nx\"\u003eerror\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003eerror\u003c/span\u003e \u003cspan class=\"c1\"\u003e// \u0026quot;USER_CLOSED_DIALOG\u0026quot;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch2 id=\"login-widget\"\u003eLogin Widget\u003ca class=\"headerlink\" href=\"#login-widget\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h2\u003e\n\u003cp\u003eDePay Login allows you to perform web3 wallet logins with ease.\u003c/p\u003e\n\u003cp\u003eReturns \u003ccode\u003eaccount\u003c/code\u003e if successfully signed and recovered log in message.\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003emessage\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"s2\"\u003e\u0026quot;Sign to login\u0026quot;\u003c/span\u003e\n\u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003cspan class=\"nx\"\u003eaccount\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003ewallet\u003c/span\u003e \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eawait\u003c/span\u003e \u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eLogin\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e \u003cspan class=\"nx\"\u003emessage\u003c/span\u003e \u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eConnects wallet and instructs connected wallet to sign \u003ccode\u003emessage\u003c/code\u003e, afterwards sends \u003ccode\u003esignature\u003c/code\u003e and \u003ccode\u003emessage\u003c/code\u003e to \u003ccode\u003ePOST /login\u003c/code\u003e (or \u003ccode\u003eendpoint\u003c/code\u003e if defined):\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003ePOST /login\nBODY\n  {\n    \u0026quot;message\u0026quot;: \u0026quot;Sign to login\u0026quot;,\n    \u0026quot;signature\u0026quot;: \u0026quot;0x123456\u0026quot; // raw signature\n  }\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eThe \u003ccode\u003e/login\u003c/code\u003e endpoint needs to recover the address for \u003ccode\u003emessage\u003c/code\u003e and \u003ccode\u003esignature\u003c/code\u003e.\u003c/p\u003e\n\u003cp\u003ee.g. your backend could use node + ethers.js to recover the signature\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003eethers\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003erequire\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;ethers\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003ehashedMessage\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eethers\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eutils\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ehashMessage\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003einputs\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003emessage\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003eaddress\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eethers\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eutils\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003erecoverAddress\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ehashedMessage\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003einputs\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003esignature\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n\u003cspan class=\"k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"nx\"\u003eaddress\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003emake sure you return the recovered address back to the widget:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003ePOST /login\nRESPONSE\n  \u0026quot;0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045\u0026quot;\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eWhich will resolve the \u003ccode\u003eDePayWidgets.Login\u003c/code\u003e request to the resolved account:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eaccount\u003c/span\u003e \u003cspan class=\"c1\"\u003e// 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eYou can also pass a \u003ccode\u003erecover\u003c/code\u003e function that takes care of signature recovery:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eLogin\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e \u003cspan class=\"nx\"\u003emessage\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003erecover\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e({\u003c/span\u003e \u003cspan class=\"nx\"\u003emessage\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003esignature\u003c/span\u003e \u003cspan class=\"p\"\u003e})\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"k\"\u003enew\u003c/span\u003e \u003cspan class=\"nx\"\u003ePromise\u003c/span\u003e\u003cspan class=\"p\"\u003e((\u003c/span\u003e\u003cspan class=\"nx\"\u003eresolve\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003ereject\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003efetch\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;https://example.com/login\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003emethod\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;POST\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003ebody\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003eJSON\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003estringify\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e \u003cspan class=\"nx\"\u003emessage\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003esignature\u003c/span\u003e \u003cspan class=\"p\"\u003e})\u003c/span\u003e\n      \u003cspan class=\"p\"\u003e})\u003c/span\u003e\n        \u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ethen\u003c/span\u003e\u003cspan class=\"p\"\u003e((\u003c/span\u003e\u003cspan class=\"nx\"\u003eresponse\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\n          \u003cspan class=\"k\"\u003eif\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eresponse\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003estatus\u003c/span\u003e \u003cspan class=\"o\"\u003e==\u003c/span\u003e \u003cspan class=\"mi\"\u003e200\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003eresponse\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003etext\u003c/span\u003e\u003cspan class=\"p\"\u003e().\u003c/span\u003e\u003cspan class=\"nx\"\u003ethen\u003c/span\u003e\u003cspan class=\"p\"\u003e((\u003c/span\u003e\u003cspan class=\"nx\"\u003eaccount\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\n              \u003cspan class=\"nx\"\u003eresolve\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eaccount\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n            \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"k\"\u003ecatch\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ereject\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n          \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003eelse\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003eresponse\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003etext\u003c/span\u003e\u003cspan class=\"p\"\u003e().\u003c/span\u003e\u003cspan class=\"nx\"\u003ethen\u003c/span\u003e\u003cspan class=\"p\"\u003e((\u003c/span\u003e\u003cspan class=\"nx\"\u003etext\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\n              \u003cspan class=\"nx\"\u003ereject\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003etext\u003c/span\u003e \u003cspan class=\"o\"\u003e||\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;Recovering login signature failed!\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n            \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"k\"\u003ecatch\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ereject\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n          \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n        \u003cspan class=\"p\"\u003e})\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e})\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch3 id=\"sign-message-containing-the-account-address\"\u003eSign message containing the account address\u003ca class=\"headerlink\" href=\"#sign-message-containing-the-account-address\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eIn case you want to include the wallet account identifier in the to be signed message, pass a callback function returning a string to \u003ccode\u003emessage\u003c/code\u003e:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003cspan class=\"nx\"\u003eaccount\u003c/span\u003e \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eawait\u003c/span\u003e \u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eLogin\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003emessage\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eaccount\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e\u003cspan class=\"err\"\u003e`\u003c/span\u003e\u003cspan class=\"nx\"\u003eClick\u003c/span\u003e \u003cspan class=\"nx\"\u003eto\u003c/span\u003e \u003cspan class=\"nx\"\u003elog\u003c/span\u003e \u003cspan class=\"k\"\u003ein\u003c/span\u003e \u003cspan class=\"nx\"\u003eto\u003c/span\u003e \u003cspan class=\"nx\"\u003eDePay\u003c/span\u003e \u003cspan class=\"nx\"\u003eand\u003c/span\u003e \u003cspan class=\"nx\"\u003eto\u003c/span\u003e \u003cspan class=\"nx\"\u003eaccept\u003c/span\u003e \u003cspan class=\"nx\"\u003eDePay\u003c/span\u003e\u003cspan class=\"err\"\u003e\u0026#39;\u003c/span\u003e\u003cspan class=\"nx\"\u003es\u003c/span\u003e \u003cspan class=\"nx\"\u003eTerms\u003c/span\u003e \u003cspan class=\"nx\"\u003eof\u003c/span\u003e \u003cspan class=\"nx\"\u003eService\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003ehttps\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e\u003cspan class=\"c1\"\u003e//depay.com/legal/terms\\n${dateTime}\\n${account}`\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003cspan class=\"nx\"\u003econsole\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elog\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s2\"\u003e\u0026quot;Logged in via signature\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003eaccount\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch3 id=\"rejections_1\"\u003eRejections\u003ca class=\"headerlink\" href=\"#rejections_1\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003eRejects if user just closes the dialog without connecting any wallet:\u003c/li\u003e\n\u003c/ol\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eLogin\u003c/span\u003e\u003cspan class=\"p\"\u003e().\u003c/span\u003e\u003cspan class=\"nx\"\u003ethen\u003c/span\u003e\u003cspan class=\"p\"\u003e(()\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e\u003cspan class=\"p\"\u003e{}).\u003c/span\u003e\u003cspan class=\"k\"\u003ecatch\u003c/span\u003e\u003cspan class=\"p\"\u003e((\u003c/span\u003e\u003cspan class=\"nx\"\u003eerror\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003eerror\u003c/span\u003e \u003cspan class=\"c1\"\u003e// \u0026quot;USER_CLOSED_DIALOG\u0026quot;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch2 id=\"select-widget\"\u003eSelect Widget\u003ca class=\"headerlink\" href=\"#select-widget\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h2\u003e\n\u003cp\u003eDePay Select widget allows you to open a dialog that allows you to select things like tokens, etc.\u003c/p\u003e\n\u003ch3 id=\"select-token\"\u003eSelect Token\u003ca class=\"headerlink\" href=\"#select-token\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eResolves with what has been selected by the user.\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003etoken\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eawait\u003c/span\u003e \u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eSelect\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e \u003cspan class=\"nx\"\u003ewhat\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;token\u0026#39;\u003c/span\u003e \u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\n\u003cspan class=\"c1\"\u003e// {\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//   address: \u0026quot;0xa0bed124a09ac2bd941b10349d8d224fe3c955eb\u0026quot;\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//   blockchain: \u0026quot;ethereum\u0026quot;\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//   decimals: 18\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//   logo: \u0026quot;https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb/logo.png\u0026quot;\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//   name: \u0026quot;DePay\u0026quot;\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//   symbol: \u0026quot;DEPAY\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//   routable: true // information if token is routable through DePay Payment router\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e// }\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch3 id=\"select-nft\"\u003eSelect NFT\u003ca class=\"headerlink\" href=\"#select-nft\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eResolves with what has been selected by the user.\u003c/p\u003e\n\u003cp\u003eThis only resolves to a single contract on a single blockchain.\u003c/p\u003e\n\u003cp\u003eAs NFT collections could span over multiple blockchains, users would need to make one selection per contract address \u0026amp; blockchain.\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003ecollection\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eawait\u003c/span\u003e \u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eSelect\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e \u003cspan class=\"nx\"\u003ewhat\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;nft\u0026#39;\u003c/span\u003e \u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\n\u003cspan class=\"c1\"\u003e// {\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    address: \u0026quot;0xba30E5F9Bb24caa003E9f2f0497Ad287FDF95623\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    blockchain: \u0026quot;ethereum\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    createdAt: \u0026quot;2021-06-18T21:32:25.355263+00:00\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    image: \u0026quot;https://i.seadn.io/gae/l1wZXP2hHFUQ3turU5VQ9PpgVVasyQ79-ChvCgjoU5xKkBA50OGoJqKZeMOR-qLrzqwIfd1HpYmiv23JWm0EZ14owiPYaufqzmj1?w=500\u0026amp;auto=format\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    link: \u0026quot;https://opensea.io/collection/bored-ape-kennel-club\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    name: \u0026quot;BoredApeKennelClub\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    type: \u0026quot;721\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e// }\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eIf the NFT contract is of type 1155 the return will also contain the NFTs id for the given contract address:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"c1\"\u003e// {\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    address: \u0026quot;0x495f947276749Ce646f68AC8c248420045cb7b5e\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    blockchain: \u0026quot;ethereum\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    id: \u0026quot;35347623114821255323888368639026081793120226253597860997754787918389704654849\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    image: \u0026quot;https://i.seadn.io/gae/IIFck1wOESXNMfCN6nEhFIXReUaSyI68MXNPjvFapbjQXc42ARIcG8k-nEKJjXs1GdCY75ej4qArfy7LDbgGOFSR6zzBIOG-yEw04Q?w=500\u0026amp;auto=format\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    link: \u0026quot;https://opensea.io/assets/ethereum/0x495f947276749ce646f68ac8c248420045cb7b5e/35347623114821255323888368639026081793120226253597860997754787918389704654849\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    name: \u0026quot;Genesis Block - 100,000 BC\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    type: \u0026quot;1155\u0026quot;\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e// }\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eIf NFT is a list of mints on solana:\u003c/p\u003e\n\u003cp\u003eIf the NFT contract is of type 1155 the return will also contain the NFTs id for the given contract address:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"c1\"\u003e// {\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    addresses: [\u0026quot;4RYP3yX52g3BawgS4ShHwJqbrm8FcUF8PPA4oP1eP6Cv\u0026quot;, \u0026quot;5GAse3WFPMCmbrw5x1RVdRaBttReBrgFLkw7yyqbSqtn\u0026quot;],\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    blockchain: \u0026quot;solana\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    image: \u0026quot;https://img-cdn.magiceden.dev/rs:fill:400:400:0:0/plain/https%3A%2F%2Farweave.net%2FevHbhPvYxPn3NgtzeHg3WPS-QFwGdibQwTvY8chccrA%3Fext%3Dpng\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    link: \u0026quot;https://magiceden.io/marketplace/depay\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    name: \u0026quot;SOL - AD 2020\u0026quot;,\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//    type: \u0026quot;metaplex\u0026quot;\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e// }\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch2 id=\"examples\"\u003eExamples\u003ca class=\"headerlink\" href=\"#examples\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h2\u003e\n\u003ch3 id=\"react\"\u003eReact\u003ca class=\"headerlink\" href=\"#react\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003ch4 id=\"payment-widget_1\"\u003ePayment Widget\u003ca class=\"headerlink\" href=\"#payment-widget_1\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003e\u003cspan class=\"kr\"\u003eimport\u003c/span\u003e \u003cspan class=\"nx\"\u003eReact\u003c/span\u003e \u003cspan class=\"nx\"\u003efrom\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;react\u0026#39;\u003c/span\u003e\n\u003cspan class=\"kr\"\u003eimport\u003c/span\u003e \u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e \u003cspan class=\"nx\"\u003efrom\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;@depay/widgets\u0026#39;\u003c/span\u003e\n\n\u003cspan class=\"kr\"\u003eexport\u003c/span\u003e \u003cspan class=\"k\"\u003edefault\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eprops\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\n\n  \u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003eunmount\u003c/span\u003e\n\n  \u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003eopenPaymentWidget\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003easync\u003c/span\u003e \u003cspan class=\"p\"\u003e()\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e(\u003c/span\u003e\n      \u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003cspan class=\"nx\"\u003eunmount\u003c/span\u003e \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eawait\u003c/span\u003e \u003cspan class=\"nx\"\u003eDePayWidgets\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ePayment\u003c/span\u003e\u003cspan class=\"p\"\u003e({...})\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e)\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\n  \u003cspan class=\"nx\"\u003euseEffect\u003c/span\u003e\u003cspan class=\"p\"\u003e(()\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"p\"\u003e()\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\n      \u003cspan class=\"c1\"\u003e// make sure an open widgets gets closed/unmounted as part of this component\u003c/span\u003e\n      \u003cspan class=\"k\"\u003eif\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eunmount\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003cspan class=\"nx\"\u003eunmount\u003c/span\u003e\u003cspan class=\"p\"\u003e()\u003c/span\u003e \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e},\u003c/span\u003e \u003cspan class=\"p\"\u003e[])\u003c/span\u003e\n\n  \u003cspan class=\"k\"\u003ereturn\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\n    \u003cspan class=\"o\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nx\"\u003ebutton\u003c/span\u003e \u003cspan class=\"nx\"\u003eonClick\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003cspan class=\"nx\"\u003eopenPaymentWidget\u003c/span\u003e \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"nx\"\u003etype\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s2\"\u003e\u0026quot;button\u0026quot;\u003c/span\u003e\u003cspan class=\"o\"\u003e\u0026gt;\u003c/span\u003e\n      \u003cspan class=\"nx\"\u003ePay\u003c/span\u003e\n    \u003cspan class=\"o\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"err\"\u003e/button\u0026gt;\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e)\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch2 id=\"web3-payments\"\u003eWeb3 Payments\u003ca class=\"headerlink\" href=\"#web3-payments\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h2\u003e\n\u003cp\u003eThe future is \u003ca href=\"https://depay.com/web3-payments\"\u003eWeb3 Payments\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eBlockchains hold the potential to faster, simpler and smarter payments.\u003c/p\u003e\n\u003cp\u003eWeb3 Payments are borderless, peer-to-peer, and support multiple tokens and blockchains.\u003c/p\u003e\n\u003cp\u003eAccept any asset type that your customers already have in their wallet. \u003ca href=\"https://depay.com\"\u003eDePay\u003c/a\u003e is blockchain agnostic and can at any time be extended on any blockchain-specific plugin. Interoperability, scalability \u0026amp; flexibility are the cornerstones of our protocol. Accepting any asset that users already have in their wallets no matter which blockchain these are held on, reduces friction when performing decentralized payments.\u003c/p\u003e\n\u003ch3 id=\"chain-agnostic-multichain\"\u003eChain Agnostic (Multichain)\u003ca class=\"headerlink\" href=\"#chain-agnostic-multichain\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eInteroperability is the key principle on which our infrastructure is built. \u003ca href=\"https://depay.com\"\u003eDePay\u003c/a\u003e is extensible around any blockchain, ensuring a competitive cross-chain future.\u003c/p\u003e\n\u003ch3 id=\"permissionless\"\u003ePermissionless\u003ca class=\"headerlink\" href=\"#permissionless\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eInteroperability is the key principle on which our infrastructure is built. \u003ca href=\"https://depay.com\"\u003eDePay\u003c/a\u003e is extensible around any blockchain, ensuring a competitive cross-chain future.\u003c/p\u003e\n\u003ch3 id=\"trustless\"\u003eTrustless\u003ca class=\"headerlink\" href=\"#trustless\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eMost Web3 Payment providers \u0026amp; processors receive payments to wallets that they manage themselves. Only in a further intermediate step are the payments paid out to sellers. \u003ca href=\"https://depay.com\"\u003eDePay\u003c/a\u003e does not act as an intermediary. Every intermediate step is replaced by smart contracts which are connected to decentralized liquidity pools. As a result, trust is no longer required.\u003c/p\u003e\n\u003ch3 id=\"easy-to-use\"\u003eEasy to use\u003ca class=\"headerlink\" href=\"#easy-to-use\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eOur ambition was to create an even easier user experience than you\u0026rsquo;re used to from shopping in current non-crypto e-commerce stores. We think we\u0026rsquo;ve done a good job of that.\u003c/p\u003e\n\u003ch3 id=\"open-source\"\u003eOpen Source\u003ca class=\"headerlink\" href=\"#open-source\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eFeel free to use \u0026amp; contribute to our codebase at. We\u0026rsquo;re happy to have you look under our hood. The \u003ca href=\"https://depay.com\"\u003eDePay\u003c/a\u003e protocol will always remain open source.\u003c/p\u003e\n\u003ch3 id=\"multichain\"\u003eMultichain\u003ca class=\"headerlink\" href=\"#multichain\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003e\u003ca href=\"https://depay.com\"\u003eDePay\u003c/a\u003e calculates payment routes on multiple blockchains simultaneously despite what your wallet is currently connected to. Our software automatically detects \u0026amp; switches the network if required.\u003c/p\u003e\n\u003ch2 id=\"development\"\u003eDevelopment\u003ca class=\"headerlink\" href=\"#development\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h2\u003e\n\u003ch3 id=\"quick-start\"\u003eQuick start\u003ca class=\"headerlink\" href=\"#quick-start\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003eyarn install\nyarn dev\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003ch3 id=\"testing\"\u003eTesting\u003ca class=\"headerlink\" href=\"#testing\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003ch4 id=\"debug-cypress\"\u003eDebug Cypress\u003ca class=\"headerlink\" href=\"#debug-cypress\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003eStarts cypress in \u003ccode\u003e--headed\u003c/code\u003e and \u003ccode\u003e--no-exit\u003c/code\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003etest:cypress:debug\n\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eTest and debug single cypress file:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre\u003eyarn test:cypress:debug --spec \u0026quot;cypress/e2e/bundle.js\u0026quot;\n\u003c/pre\u003e\u003c/div\u003e\u003c/article\u003e\u003c/body\u003e\u003c/html\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDePayFi%2Fwidgets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDePayFi%2Fwidgets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDePayFi%2Fwidgets/lists"}