https://github.com/DePayFi/widgets

💸 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.
https://github.com/DePayFi/widgets
blockchain crypto cryptocurrencies dapp defi payment react stablecoins wallet web3 widgets
Last synced: 9 months ago
JSON representation
Host: GitHub
URL: https://github.com/DePayFi/widgets
Owner: DePayFi
License: mit
Created: 2020-09-29T10:59:27.000Z (almost 6 years ago)
Default Branch: main
Last Pushed: 2025-09-06T06:09:09.000Z (10 months ago)
Last Synced: 2025-09-06T06:41:12.372Z (10 months ago)
Topics: blockchain, crypto, cryptocurrencies, dapp, defi, payment, react, stablecoins, wallet, web3, widgets
Language: JavaScript
Homepage: https://depay.com
Size: 269 MB
Stars: 104
Watchers: 7
Forks: 40
Open Issues: 0
Metadata Files:
- Readme: README.html
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project

README

          body {

  max-width: 980px;

  margin: 16px auto;

}

body .markdown-body

{

  padding: 45px;

}

@font-face {

  font-family: fontawesome-mini;

  src: url(data:font/woff;charset=utf-8;base64,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) format('woff');

}

.markdown-body {

  font-family: sans-serif;

  -ms-text-size-adjust: 100%;

  -webkit-text-size-adjust: 100%;

  color: #333333;

  overflow: hidden;

  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;

  font-size: 16px;

  line-height: 1.6;

  word-wrap: break-word;

}

.markdown-body a {

  background: transparent;

}

.markdown-body a:active,

.markdown-body a:hover {

  outline: 0;

}

.markdown-body b,

.markdown-body strong {

  font-weight: bold;

}

.markdown-body mark {

  background: #ff0;

  color: #000;

  font-style: italic;

  font-weight: bold;

}

.markdown-body sub,

.markdown-body sup {

  font-size: 75%;

  line-height: 0;

  position: relative;

  vertical-align: baseline;

}

.markdown-body sup {

  top: -0.5em;

}

.markdown-body sub {

  bottom: -0.25em;

}

.markdown-body h1 {

  font-size: 2em;

  margin: 0.67em 0;

}

.markdown-body img {

  border: 0;

}

.markdown-body hr {

  -moz-box-sizing: content-box;

  box-sizing: content-box;

  height: 0;

}

.markdown-body pre {

  overflow: auto;

}

.markdown-body code,

.markdown-body kbd,

.markdown-body pre,

.markdown-body samp {

  font-family: monospace, monospace;

  font-size: 1em;

}

.markdown-body input {

  color: inherit;

  font: inherit;

  margin: 0;

}

.markdown-body html input[disabled] {

  cursor: default;

}

.markdown-body input {

  line-height: normal;

}

.markdown-body input[type="checkbox"] {

  box-sizing: border-box;

  padding: 0;

}

.markdown-body table {

  border-collapse: collapse;

  border-spacing: 0;

}

.markdown-body td,

.markdown-body th {

  padding: 0;

}

.markdown-body .codehilitetable,

.markdown-body .highlighttable {

  border: 0;

  border-spacing: 0;

}

.markdown-body .codehilitetable tr,

.markdown-body .highlighttable {

  border: 0;

}

.markdown-body .codehilitetable pre,

.markdown-body .codehilitetable div.codehilite,

.markdown-body .highlighttable pre,

.markdown-body .highlighttable div.highlight {

  margin: 0;

}

.markdown-body .linenos,

.markdown-body .code,

.markdown-body .codehilitetable td,

.markdown-body .highlighttable td {

  border: 0;

  padding: 0;

}

.markdown-body td:not(.linenos) .linenodiv {

  padding: 0 !important;

}

.markdown-body .code {

  width: 100%;

}

.markdown-body .linenos div pre,

.markdown-body .linenodiv pre,

.markdown-body .linenodiv {

  border: 0;

  -webkit-border-radius: 0;

  -moz-border-radius: 0;

  border-radius: 0;

  -webkit-border-top-left-radius: 3px;

  -webkit-border-bottom-left-radius: 3px;

  -moz-border-radius-topleft: 3px;

  -moz-border-radius-bottomleft: 3px;

  border-top-left-radius: 3px;

  border-bottom-left-radius: 3px;

}

.markdown-body .code div pre,

.markdown-body .code div {

  border: 0;

  -webkit-border-radius: 0;

  -moz-border-radius: 0;

  border-radius: 0;

  -webkit-border-top-right-radius: 3px;

  -webkit-border-bottom-right-radius: 3px;

  -moz-border-radius-topright: 3px;

  -moz-border-radius-bottomright: 3px;

  border-top-right-radius: 3px;

  border-bottom-right-radius: 3px;

}

.markdown-body * {

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

.markdown-body input {

  font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";

  line-height: 1.4;

}

.markdown-body a {

  color: #4183c4;

  text-decoration: none;

}

.markdown-body a:hover,

.markdown-body a:focus,

.markdown-body a:active {

  text-decoration: underline;

}

.markdown-body hr {

  height: 0;

  margin: 15px 0;

  overflow: hidden;

  background: transparent;

  border: 0;

  border-bottom: 1px solid #ddd;

}

.markdown-body hr:before,

.markdown-body hr:after {

  display: table;

  content: " ";

}

.markdown-body hr:after {

  clear: both;

}

.markdown-body h1,

.markdown-body h2,

.markdown-body h3,

.markdown-body h4,

.markdown-body h5,

.markdown-body h6 {

  margin-top: 15px;

  margin-bottom: 15px;

  line-height: 1.1;

}

.markdown-body h1 {

  font-size: 30px;

}

.markdown-body h2 {

  font-size: 21px;

}

.markdown-body h3 {

  font-size: 16px;

}

.markdown-body h4 {

  font-size: 14px;

}

.markdown-body h5 {

  font-size: 12px;

}

.markdown-body h6 {

  font-size: 11px;

}

.markdown-body blockquote {

  margin: 0;

}

.markdown-body ul,

.markdown-body ol {

  padding: 0;

  margin-top: 0;

  margin-bottom: 0;

}

.markdown-body ol ol,

.markdown-body ul ol {

  list-style-type: lower-roman;

}

.markdown-body ul ul ol,

.markdown-body ul ol ol,

.markdown-body ol ul ol,

.markdown-body ol ol ol {

  list-style-type: lower-alpha;

}

.markdown-body dd {

  margin-left: 0;

}

.markdown-body code,

.markdown-body pre,

.markdown-body samp {

  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;

  font-size: 12px;

}

.markdown-body pre {

  margin-top: 0;

  margin-bottom: 0;

}

.markdown-body kbd {

  background-color: #e7e7e7;

  background-image: -moz-linear-gradient(#fefefe, #e7e7e7);

  background-image: -webkit-linear-gradient(#fefefe, #e7e7e7);

  background-image: linear-gradient(#fefefe, #e7e7e7);

  background-repeat: repeat-x;

  border-radius: 2px;

  border: 1px solid #cfcfcf;

  color: #000;

  padding: 3px 5px;

  line-height: 10px;

  font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;

  display: inline-block;

}

.markdown-body>*:first-child {

  margin-top: 0 !important;

}

.markdown-body>*:last-child {

  margin-bottom: 0 !important;

}

.markdown-body .headerlink {

  font: normal 400 16px fontawesome-mini;

  vertical-align: middle;

  margin-left: -16px;

  float: left;

  display: inline-block;

  text-decoration: none;

  opacity: 0;

  color: #333;

}

.markdown-body .headerlink:focus {

  outline: none;

}

.markdown-body h1 .headerlink {

  margin-top: 0.8rem;

}

.markdown-body h2 .headerlink,

.markdown-body h3 .headerlink {

  margin-top: 0.6rem;

}

.markdown-body h4 .headerlink {

  margin-top: 0.2rem;

}

.markdown-body h5 .headerlink,

.markdown-body h6 .headerlink {

  margin-top: 0;

}

.markdown-body .headerlink:hover,

.markdown-body h1:hover .headerlink,

.markdown-body h2:hover .headerlink,

.markdown-body h3:hover .headerlink,

.markdown-body h4:hover .headerlink,

.markdown-body h5:hover .headerlink,

.markdown-body h6:hover .headerlink {

  opacity: 1;

  text-decoration: none;

}

.markdown-body h1 {

  padding-bottom: 0.3em;

  font-size: 2.25em;

  line-height: 1.2;

  border-bottom: 1px solid #eee;

}

.markdown-body h2 {

  padding-bottom: 0.3em;

  font-size: 1.75em;

  line-height: 1.225;

  border-bottom: 1px solid #eee;

}

.markdown-body h3 {

  font-size: 1.5em;

  line-height: 1.43;

}

.markdown-body h4 {

  font-size: 1.25em;

}

.markdown-body h5 {

  font-size: 1em;

}

.markdown-body h6 {

  font-size: 1em;

  color: #777;

}

.markdown-body p,

.markdown-body blockquote,

.markdown-body ul,

.markdown-body ol,

.markdown-body dl,

.markdown-body table,

.markdown-body pre,

.markdown-body .admonition {

  margin-top: 0;

  margin-bottom: 16px;

}

.markdown-body hr {

  height: 4px;

  padding: 0;

  margin: 16px 0;

  background-color: #e7e7e7;

  border: 0 none;

}

.markdown-body ul,

.markdown-body ol {

  padding-left: 2em;

}

.markdown-body ul ul,

.markdown-body ul ol,

.markdown-body ol ol,

.markdown-body ol ul {

  margin-top: 0;

  margin-bottom: 0;

}

.markdown-body li>p {

  margin-top: 16px;

}

.markdown-body dl {

  padding: 0;

}

.markdown-body dl dt {

  padding: 0;

  margin-top: 16px;

  font-size: 1em;

  font-style: italic;

  font-weight: bold;

}

.markdown-body dl dd {

  padding: 0 16px;

  margin-bottom: 16px;

}

.markdown-body blockquote {

  padding: 0 15px;

  color: #777;

  border-left: 4px solid #ddd;

}

.markdown-body blockquote>:first-child {

  margin-top: 0;

}

.markdown-body blockquote>:last-child {

  margin-bottom: 0;

}

.markdown-body table {

  display: block;

  width: 100%;

  overflow: auto;

  word-break: normal;

  word-break: keep-all;

}

.markdown-body table th {

  font-weight: bold;

}

.markdown-body table th,

.markdown-body table td {

  padding: 6px 13px;

  border: 1px solid #ddd;

}

.markdown-body table tr {

  background-color: #fff;

  border-top: 1px solid #ccc;

}

.markdown-body table tr:nth-child(2n) {

  background-color: #f8f8f8;

}

.markdown-body img {

  max-width: 100%;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

.markdown-body code,

.markdown-body samp {

  padding: 0;

  padding-top: 0.2em;

  padding-bottom: 0.2em;

  margin: 0;

  font-size: 85%;

  border-radius: 3px;

}

.markdown-body code:not(.highlight):not(.codehilite), .markdown-body samp {

  background-color: rgba(0,0,0,0.04);

}

.markdown-body code:before,

.markdown-body code:after {

  letter-spacing: -0.2em;

  content: "\00a0";

}

.markdown-body pre>code {

  padding: 0;

  margin: 0;

  font-size: 100%;

  word-break: normal;

  white-space: pre;

  background: transparent;

  border: 0;

}

.markdown-body .codehilite,

.markdown-body .highlight {

  margin-bottom: 16px;

}

.markdown-body .codehilite pre,

.markdown-body .highlight pre,

.markdown-body pre {

  padding: 16px;

  overflow: auto;

  font-size: 85%;

  line-height: 1.45;

}

.markdown-body .codehilite,

.markdown-body .highlight,

.markdown-body pre {

  border-radius: 3px;

}

.markdown-body :not(.highlight) > pre {

  background-color: #f7f7f7;

}

.markdown-body .codehilite pre,

.markdown-body .highlight pre {

  margin-bottom: 0;

  word-break: normal;

}

.markdown-body pre {

  word-wrap: normal;

}

.markdown-body pre code {

  display: inline;

  max-width: initial;

  padding: 0;

  margin: 0;

  overflow: initial;

  line-height: inherit;

  word-wrap: normal;

  background-color: transparent;

  border: 0;

}

.markdown-body pre code:before,

.markdown-body pre code:after {

  content: normal;

}

/* Admonition */

.markdown-body .admonition {

  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  position: relative;

  border-radius: 3px;

  border: 1px solid #e0e0e0;

  border-left: 6px solid #333;

  padding: 10px 10px 10px 30px;

}

.markdown-body .admonition table {

  color: #333;

}

.markdown-body .admonition p {

  padding: 0;

}

.markdown-body .admonition-title {

  font-weight: bold;

  margin: 0;

}

.markdown-body .admonition>.admonition-title {

  color: #333;

}

.markdown-body .attention>.admonition-title {

  color: #a6d796;

}

.markdown-body .caution>.admonition-title {

  color: #d7a796;

}

.markdown-body .hint>.admonition-title {

  color: #96c6d7;

}

.markdown-body .danger>.admonition-title {

  color: #c25f77;

}

.markdown-body .question>.admonition-title {

  color: #96a6d7;

}

.markdown-body .note>.admonition-title {

  color: #d7c896;

}

.markdown-body .admonition:before,

.markdown-body .attention:before,

.markdown-body .caution:before,

.markdown-body .hint:before,

.markdown-body .danger:before,

.markdown-body .question:before,

.markdown-body .note:before {

  font: normal normal 16px fontawesome-mini;

  -moz-osx-font-smoothing: grayscale;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  line-height: 1.5;

  color: #333;

  position: absolute;

  left: 0;

  top: 0;

  padding-top: 10px;

  padding-left: 10px;

}

.markdown-body .admonition:before {

  content: "\f056\00a0";

  color: 333;

}

.markdown-body .attention:before {

  content: "\f058\00a0";

  color: #a6d796;

}

.markdown-body .caution:before {

  content: "\f06a\00a0";

  color: #d7a796;

}

.markdown-body .hint:before {

  content: "\f05a\00a0";

  color: #96c6d7;

}

.markdown-body .danger:before {

  content: "\f057\00a0";

  color: #c25f77;

}

.markdown-body .question:before {

  content: "\f059\00a0";

  color: #96a6d7;

}

.markdown-body .note:before {

  content: "\f040\00a0";

  color: #d7c896;

}

.markdown-body .admonition::after {

  content: normal;

}

.markdown-body .attention {

  border-left: 6px solid #a6d796;

}

.markdown-body .caution {

  border-left: 6px solid #d7a796;

}

.markdown-body .hint {

  border-left: 6px solid #96c6d7;

}

.markdown-body .danger {

  border-left: 6px solid #c25f77;

}

.markdown-body .question {

  border-left: 6px solid #96a6d7;

}

.markdown-body .note {

  border-left: 6px solid #d7c896;

}

.markdown-body .admonition>*:first-child {

  margin-top: 0 !important;

}

.markdown-body .admonition>*:last-child {

  margin-bottom: 0 !important;

}

/* progress bar*/

.markdown-body .progress {

  display: block;

  width: 300px;

  margin: 10px 0;

  height: 24px;

  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  border-radius: 3px;

  background-color: #ededed;

  position: relative;

  box-shadow: inset -1px 1px 3px rgba(0, 0, 0, .1);

}

.markdown-body .progress-label {

  position: absolute;

  text-align: center;

  font-weight: bold;

  width: 100%; margin: 0;

  line-height: 24px;

  color: #333;

  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;

  -webkit-font-smoothing: antialiased !important;

  white-space: nowrap;

  overflow: hidden;

}

.markdown-body .progress-bar {

  height: 24px;

  float: left;

  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  border-radius: 3px;

  background-color: #96c6d7;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .1);

  background-size: 30px 30px;

  background-image: -webkit-linear-gradient(

    135deg, rgba(255, 255, 255, .4) 27%,

    transparent 27%,

    transparent 52%, rgba(255, 255, 255, .4) 52%,

    rgba(255, 255, 255, .4) 77%,

    transparent 77%, transparent

  );

  background-image: -moz-linear-gradient(

    135deg,

    rgba(255, 255, 255, .4) 27%, transparent 27%,

    transparent 52%, rgba(255, 255, 255, .4) 52%,

    rgba(255, 255, 255, .4) 77%, transparent 77%,

    transparent

  );

  background-image: -ms-linear-gradient(

    135deg,

    rgba(255, 255, 255, .4) 27%, transparent 27%,

    transparent 52%, rgba(255, 255, 255, .4) 52%,

    rgba(255, 255, 255, .4) 77%, transparent 77%,

    transparent

  );

  background-image: -o-linear-gradient(

    135deg,

    rgba(255, 255, 255, .4) 27%, transparent 27%,

    transparent 52%, rgba(255, 255, 255, .4) 52%,

    rgba(255, 255, 255, .4) 77%, transparent 77%,

    transparent

  );

  background-image: linear-gradient(

    135deg,

    rgba(255, 255, 255, .4) 27%, transparent 27%,

    transparent 52%, rgba(255, 255, 255, .4) 52%,

    rgba(255, 255, 255, .4) 77%, transparent 77%,

    transparent

  );

}

.markdown-body .progress-100plus .progress-bar {

  background-color: #a6d796;

}

.markdown-body .progress-80plus .progress-bar {

  background-color: #c6d796;

}

.markdown-body .progress-60plus .progress-bar {

  background-color: #d7c896;

}

.markdown-body .progress-40plus .progress-bar {

  background-color: #d7a796;

}

.markdown-body .progress-20plus .progress-bar {

  background-color: #d796a6;

}

.markdown-body .progress-0plus .progress-bar {

  background-color: #c25f77;

}

.markdown-body .candystripe-animate .progress-bar{

  -webkit-animation: animate-stripes 3s linear infinite;

  -moz-animation: animate-stripes 3s linear infinite;

  animation: animate-stripes 3s linear infinite;

}

@-webkit-keyframes animate-stripes {

  0% {

    background-position: 0 0;

  }

  100% {

    background-position: 60px 0;

  }

}

@-moz-keyframes animate-stripes {

  0% {

    background-position: 0 0;

  }

  100% {

    background-position: 60px 0;

  }

}

@keyframes animate-stripes {

  0% {

    background-position: 0 0;

  }

  100% {

    background-position: 60px 0;

  }

}

.markdown-body .gloss .progress-bar {

  box-shadow:

    inset 0 4px 12px rgba(255, 255, 255, .7),

    inset 0 -12px 0 rgba(0, 0, 0, .05);

}

/* MultiMarkdown Critic Blocks */

.markdown-body .critic_mark {

  background: #ff0;

}

.markdown-body .critic_delete {

  color: #c82829;

  text-decoration: line-through;

}

.markdown-body .critic_insert {

  color: #718c00 ;

  text-decoration: underline;

}

.markdown-body .critic_comment {

  color: #8e908c;

  font-style: italic;

}

.markdown-body .headeranchor {

  font: normal normal 16px fontawesome-mini;

  line-height: 1;

  display: inline-block;

  text-decoration: none;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}

.headeranchor:before {

  content: '\e157';

}

.markdown-body .task-list-item {

  list-style-type: none;

}

.markdown-body .task-list-item+.task-list-item {

  margin-top: 3px;

}

.markdown-body .task-list-item input {

  margin: 0 4px 0.25em -20px;

  vertical-align: middle;

}

.markdown-body diagram-div, .markdown-body div.uml-sequence-diagram, .markdown-body, div.uml-flowchart {

  overflow: auto;

}

/* Media */

@media only screen and (min-width: 480px) {

  .markdown-body {

    font-size:14px;

  }

}

@media only screen and (min-width: 768px) {

  .markdown-body {

    font-size:16px;

  }

}

@media print {

  .markdown-body * {

    background: transparent !important;

    color: black !important;

    filter:none !important;

    -ms-filter: none !important;

  }

  .markdown-body {

    font-size:12pt;

    max-width:100%;

    outline:none;

    border: 0;

  }

  .markdown-body a,

  .markdown-body a:visited {

    text-decoration: underline;

  }

  .markdown-body .headeranchor-link {

    display: none;

  }

  .markdown-body a[href]:after {

    content: " (" attr(href) ")";

  }

  .markdown-body abbr[title]:after {

    content: " (" attr(title) ")";

  }

  .markdown-body .ir a:after,

  .markdown-body a[href^="javascript:"]:after,

  .markdown-body a[href^="#"]:after {

    content: "";

  }

  .markdown-body pre {

    white-space: pre;

    white-space: pre-wrap;

    word-wrap: break-word;

  }

  .markdown-body pre,

  .markdown-body blockquote {

    border: 1px solid #999;

    padding-right: 1em;

    page-break-inside: avoid;

  }

  .markdown-body .progress,

  .markdown-body .progress-bar {

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

  }

  .markdown-body .progress {

    border: 1px solid #ddd;

  }

  .markdown-body .progress-bar {

    height: 22px;

    border-right: 1px solid #ddd;

  }

  .markdown-body tr,

  .markdown-body img {

    page-break-inside: avoid;

  }

  .markdown-body img {

    max-width: 100% !important;

  }

  .markdown-body p,

  .markdown-body h2,

  .markdown-body h3 {

    orphans: 3;

    widows: 3;

  }

  .markdown-body h2,

  .markdown-body h3 {

    page-break-after: avoid;

  }

}

/*GitHub*/

.highlight {background-color:#f7f7f7;color:#333333;}

.highlight .hll {background-color:#ffffcc;}

.highlight .c{color:#999988;font-style:italic}

.highlight .err{color:#a61717;background-color:#e3d2d2}

.highlight .k{font-weight:bold}

.highlight .o{font-weight:bold}

.highlight .cm{color:#999988;font-style:italic}

.highlight .cp{color:#999999;font-weight:bold}

.highlight .c1{color:#999988;font-style:italic}

.highlight .cs{color:#999999;font-weight:bold;font-style:italic}

.highlight .gd{color:#000000;background-color:#ffdddd}

.highlight .ge{font-style:italic}

.highlight .gr{color:#aa0000}

.highlight .gh{color:#999999}

.highlight .gi{color:#000000;background-color:#ddffdd}

.highlight .go{color:#888888}

.highlight .gp{color:#555555}

.highlight .gs{font-weight:bold}

.highlight .gu{color:#800080;font-weight:bold}

.highlight .gt{color:#aa0000}

.highlight .kc{font-weight:bold}

.highlight .kd{font-weight:bold}

.highlight .kn{font-weight:bold}

.highlight .kp{font-weight:bold}

.highlight .kr{font-weight:bold}

.highlight .kt{color:#445588;font-weight:bold}

.highlight .m{color:#009999}

.highlight .s{color:#dd1144}

.highlight .n{color:#333333}

.highlight .na{color:teal}

.highlight .nb{color:#0086b3}

.highlight .nc{color:#445588;font-weight:bold}

.highlight .no{color:teal}

.highlight .ni{color:purple}

.highlight .ne{color:#990000;font-weight:bold}

.highlight .nf{color:#990000;font-weight:bold}

.highlight .nn{color:#555555}

.highlight .nt{color:navy}

.highlight .nv{color:teal}

.highlight .ow{font-weight:bold}

.highlight .w{color:#bbbbbb}

.highlight .mf{color:#009999}

.highlight .mh{color:#009999}

.highlight .mi{color:#009999}

.highlight .mo{color:#009999}

.highlight .sb{color:#dd1144}

.highlight .sc{color:#dd1144}

.highlight .sd{color:#dd1144}

.highlight .s2{color:#dd1144}

.highlight .se{color:#dd1144}

.highlight .sh{color:#dd1144}

.highlight .si{color:#dd1144}

.highlight .sx{color:#dd1144}

.highlight .sr{color:#009926}

.highlight .s1{color:#dd1144}

.highlight .ss{color:#990073}

.highlight .bp{color:#999999}

.highlight .vc{color:teal}

.highlight .vg{color:teal}

.highlight .vi{color:teal}

.highlight .il{color:#009999}

.highlight .gc{color:#999;background-color:#EAF2F5}

README
📦 Installation



via CDN



<script defer async src="https://integrate.depay.com/widgets/v13.js"></script>



via Package Manager (recommended)



yarn add @depay/widgets ethers react react-dom



or

npm install @depay/widgets ethers react react-dom --save





[!IMPORTANT]

Ensure the peer dependencies (ethers, react, and react-dom) are installed if not already present.



Import in your JavaScript files



import DePayWidgets from '@depay/widgets'



Server-Side Rendering (SSR)



If you’re using SSR frameworks like Next.js, make sure to only load DePay Widgets on the client side.

Guide: https://dev.to/elisabethleonhardt/how-to-use-client-side-only-packages-with-ssr-in-gatsby-and-nextjs-3pfa

Demos



Configurator UI: https://app.depay.com/integrations/new

Technical Demo: https://depayfi.github.io/widgets/demo.bundle.html

Support



Platforms





Ethereum Virtual Machine (EVM)

Solana Virtual Machine (SVM)



Platform specific packaging



If only specific platform packaging is needed:

EVM (Ethereum Virtual Machine)



yarn add @depay/widgets-evm



import DePayWidgets from '@depay/widgets-evm'



SVM (Solana Virtual Machine)



yarn add @depay/widgets-svm



or

npm install @depay/widgets-svm --save



import DePayWidgets from '@depay/widgets-svm'



Blockchains





Ethereum

BNB Smart Chain

Polygon

Solana

Optimism

Arbitrum

Avalanche

Gnosis

Base

Worldchain



Wallets



DePay supports most crypto wallets.

Payment Widget



DePay Payments allows you to accept and perform seamless crypto payments.

Integration



integration

Connects the widget to a DePay integration managed via https://app.depay.com:

DePayWidgets.Payment({

  integration: 'fe690fbc-1740-4894-b12c-23a72abec54d'

})



The configuration of the integration managed via https://app.depay.com will be fetched and applied before applying any additional local configurations.

You can fully manage an integration via https://app.depay.com. Passing any additional configuration is not necessary.



[!IMPORTANT]

Locally applied configurations overwrite remotely stored configurations.



If your integration relies on processing dynamic from your backend (e.g. pricing), and you are not managing a fixed configuration via https://app.depay.com,

you need to pass the data that is supposed to be forwarded to your backend for dynamic configurations to the widget:

DePayWidgets.Payment({

  integration: 'fe690fbc-1740-4894-b12c-23a72abec54d',

  payload: {

    whatever: 'you want to forward to your backend for dynamic configurations'

  }

})



This will forward:

{

  whatever: 'you want to forward to your backend for dynamic configurations'

}



to your backend in order to receive a payment configuration for the widget.



[!CAUTION]

You have the option to utilize managed integrations along with the integration attribute for payment validations (refer to the previous section). Alternatively, if payment validations are not necessary, you may opt for basic configurations using accept (see next section). However, it’s important to note that integration and accept cannot be used simultaneously.



Configuration





[!CAUTION]

To 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.



DePayWidgets.Payment({

  accept: [{

    blockchain: 'ethereum',

    amount: 20,

    token: '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb',

    receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'

  }]

});



You can also accept multiple payments on multiple blockchains:

DePayWidgets.Payment({

  accept: [

    { // 20 USDT on ethereum

      blockchain: 'ethereum',

      amount: 20,

      token: '0xdac17f958d2ee523a2206206994597c13d831ec7',

      receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'

    },{ // 20 BUSD on bsc

      blockchain: 'bsc',

      amount: 20,

      token: '0xe9e7cea3dedca5984780bafc599bd69add087d56',

      receiver: '0x552C2a5a774CcaEeC036d41c983808E3c76477e6'

    },{ // 20 USDC on polygon

      blockchain: 'polygon',

      amount: 20,

      token: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',

      receiver: '0x552C2a5a774CcaEeC036d41c983808E3c76477e6'

    }

  ]

});



accept



blockchain

The blockchain you want to receive the payment on.

token

The address of the token you want to receive.

amount (Optional)

The amount of tokens you want to receive. Needs to be passed as a human readable number e.g. 20.

The BigNumber of that amount will be calculated internally including finding the right amount of decimals for the given token.

So please just pass the amount in a human readable form as Number/Decimal: e.g. 20 for 20 USDT or 20.25 etc.

If you do not pass an amount, the user will be able to select an amount within the widget.

receiver

The address receiving the payment. Always double check that you’ve set the right address.

amount



fixed currency amounts



If you want the widget to fix a payment amount in a currency, use currency and fix:

currency: 

Example (charge US$5.20):

{

  amount: {

    currency: 'USD',

    fix: 5.20

  }

}



Make sure to not pass any amounts to accept if you use fix currency amounts.

The widget will still display local currency conversions to users. If you want to change this see currency configuration.

amount selection (changeable amounts)



When you want to control how the amount selection behaves, pass the amount configuration object,

alongside values for start, min and step.

start: The amount that is initially selected.

min: The minimum amount selectable.

step: The number by which to increment/decrement changes to the amount.

fee



You can configure a fee which will be applied to every payment with its own dedicated fee receiver address.

The fee will be taken from the target token and target amount (after swap, depending on your accept configuration).

amount: Either percentage (e.g. 5%, or absolute amount as BigNumber string (‘100000000000000000’) or pure number (2.5)

receiver: The address that is supposed to receive the fee.

DePayWidgets.Payment({

  accept: [

    {...

      fee: {

        amount: '3%',

        receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'

      }

    }

  ],

});



fee2



You can configure up to 2 fees that will be paid out as part of the payment:

DePayWidgets.Payment({

  accept: [

    {...

      fee: {...},

      fee2: {,

        amount: '5%',

        receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'

      }

    }

  ],

});



protocolFee



The fee paid to the protocol:

DePayWidgets.Payment({

  protocolFee: '1.5%',

});



title



title

Allows you to change the title of the widget:

DePayWidgets.Payment({

  title: 'Donation'

  //...

})



wallets



You can sort and allow (list) wallets displayed during the initial wallet selection step as follows:

wallets.sort



{

  wallets: {

    sort: [

      'Uniswap',

      'Coinbase'

    ]

  }

}



This configuration would display Uniswap and Coinbase first, then would list all the others.

wallets.allow



{

  wallets: {

    allow: [

      'Uniswap',

      'Coinbase',

      'Rainbow'

    ]

  }

}



This configuration would only display Uniswap, Coinbase and Rainbow. No other options/wallets are displayed.

wallet



wallet

Allows to pass an already connected wallet instance (to skip the “Connect Wallet” flow):

let { wallet } = DePayWidgets.Connect({})

DePayWidgets.Payment({

  wallet: wallet

})



providers



Allows to set providers to be used for making RPC calls to the individual blockchains:

DePayWidgets.Payment({

  providers: {

    ethereum: ['http://localhost:8545'],

    bsc: ['http://localhost:8545'],

    polygon: ['http://localhost:8545']

  }

})



currency



Allows you to enforce displayed local currency (instead of automatically detecting it):

DePayWidgets.Payment({

  currency: 'USD'

})



allow (list)



Allows only the configured tokens to be eligible as means of payment:

DePayWidgets.Payment({

  allow: {

    ethereum: [

      '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE', // ETH

      '0xdac17f958d2ee523a2206206994597c13d831ec7', // USDT

      '0x6b175474e89094c44da98b954eedeac495271d0f'  // DAI

    ],

    bsc: [

      '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE', // BNB

      '0xe9e7cea3dedca5984780bafc599bd69add087d56', // BUSD

      '0x55d398326f99059ff775485246999027b3197955'  // BSC-USD

    ],

    polygon: [

      '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE', // MATIC

      '0x2791bca1f2de4661ed88a30c99a7a9449aa84174', // USDC

    ]

  }

})



deny



Allows to deny tokens so that they will not be suggested as means of payment:

DePayWidgets.Payment({

  deny: {

    ethereum: [

      '0x82dfDB2ec1aa6003Ed4aCBa663403D7c2127Ff67',  // akSwap

      '0x1368452Bfb5Cd127971C8DE22C58fBE89D35A6BF',  // JNTR/e

      '0xC12D1c73eE7DC3615BA4e37E4ABFdbDDFA38907E',  // KICK

    ],

    bsc: [

      '0x119e2ad8f0c85c6f61afdf0df69693028cdc10be', // Zepe

      '0xb0557906c617f0048a700758606f64b33d0c41a6', // Zepe

      '0x5190b01965b6e3d786706fd4a999978626c19880', // TheEver

      '0x68d1569d1a6968f194b4d93f8d0b416c123a599f', // AABek

      '0xa2295477a3433f1d06ba349cde9f89a8b24e7f8d', // AAX

      '0xbc6675de91e3da8eac51293ecb87c359019621cf', // AIR

      '0x5558447b06867ffebd87dd63426d61c868c45904', // BNBW

      '0x569b2cf0b745ef7fad04e8ae226251814b3395f9', // BSCTOKEN

      '0x373233a38ae21cf0c4f9de11570e7d5aa6824a1e', // ALPACA

      '0x7269163f2b060fb90101f58cf724737a2759f0bb', // PUPDOGE

      '0xb16600c510b0f323dee2cb212924d90e58864421', // FLUX

      '0x2df0b14ee90671021b016dab59f2300fb08681fa', // SAFEMOON.is

      '0xd22202d23fe7de9e3dbe11a2a88f42f4cb9507cf', // MNEB

      '0xfc646d0b564bf191b3d3adf2b620a792e485e6da', // PIZA

      '0xa58950f05fea2277d2608748412bf9f802ea4901', // WSG

      '0x12e34cdf6a031a10fe241864c32fb03a4fdad739' // FREE

    ]

  }

})



container



container

Allows you to pass a container element that is supposed to contain the widget:

DePayWidgets.Payment({

  container: document.getElementById('my-container')

})



Make sure to set the css value position: relative; for the container element. Otherwise it can not contain the widget.

React example:

let CustomComponentWithWidget = (props)=>{

    let container = useRef()

    useEffect(()=>{

      if(container.current) {

        DePayWidgets.Payment({ ...defaultArguments, document,

          container: container.current

        })

      }

    }, [container])

    return(

      <div ref={container} style={{ position: 'relative', border: '1px solid black', width: "600px", height: "600px" }}></div>

    )

  }



style



style

Allows you to change the style of the widget.

DePayWidgets.Payment({

  style: {

    colors: {

      primary: '#ffd265',

      text: '#e1b64a',

      buttonText: '#000000',

    },

    fontFamily: '"Cardo", serif !important',

    css: `

      @import url("https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap");

      .ReactDialogBackground {

        background: rgba(0,0,0,0.8);

      }

    `

  }

})



colors



colors

Allows you to set color values:

DePayWidgets.Payment({

  style: {

    colors: {

      primary: '#ffd265',

      text: '#ffd265',

      buttonText: '#000000',

      icons: '#ffd265'

    }

  }

})



colorsDarkMode



You can pass colors applicable to dark mode:

DePayWidgets.Payment({

  style: {

    colorsDarkMode: {

      primary: '#000265',

      text: '#000265',

      buttonText: '#FFFFFF',

      icons: '#000265'

    }

  }

})



fontFamily



fontFamily

Allows you to set the font-family:

DePayWidgets.Payment({

  style: {

    fontFamily: '"Cardo", serif !important'

  }

})



css



css

Allows you to inject CSS:

DePayWidgets.Payment({

  style: {

    css: `

      @import url("https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap");

      .ReactDialogBackground {

        background: rgba(0,0,0,0.8);

      }

    `

  }

})



cssDarkMode



Allows you to inject css to adjust darkMode:

DePayWidgets.Payment({

  style: {

    cssDarkMode: `

      @import url("https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap");

      .ReactDialogBackground {

        background: rgba(0,0,0,0.8);

      }

    `

  }

})



unmount



unmount

Allows you to unmount (the React safe way) the entire widget from the outside:

let { unmount } = await DePayWidgets.Payment({})

unmount()



Connect Widget



DePay Connect allows you to have your users connect their crypto wallet to your dApp or website.

Returns connected account and wallet in return. 

let { account, wallet }  = await DePayWidgets.Connect()



See web3-wallets for more details about the returned wallet.

Rejections





Rejects if user just closes the dialog without connecting any wallet:



DePayWidgets.Connect().then(()=>{}).catch((error)=>{

  error // "USER_CLOSED_DIALOG"

})



Login Widget



DePay Login allows you to perform web3 wallet logins with ease.

Returns account if successfully signed and recovered log in message.

let message = "Sign to login"

let { account, wallet } = await DePayWidgets.Login({ message })



Connects wallet and instructs connected wallet to sign message, afterwards sends signature and message to POST /login (or endpoint if defined):

POST /login

BODY

  {

    "message": "Sign to login",

    "signature": "0x123456" // raw signature

  }



The /login endpoint needs to recover the address for message and signature.

e.g. your backend could use node + ethers.js to recover the signature

const ethers = require('ethers')

const hashedMessage = ethers.utils.hashMessage(inputs.message)

const address = ethers.utils.recoverAddress(hashedMessage, inputs.signature)

return address



make sure you return the recovered address back to the widget:

POST /login

RESPONSE

  "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"



Which will resolve the DePayWidgets.Login request to the resolved account:

account // 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045



You can also pass a recover function that takes care of signature recovery:

DePayWidgets.Login({ message, recover: ({ message, signature })=>{

    return new Promise((resolve, reject)=>{

      fetch('https://example.com/login', {

        method: 'POST',

        body: JSON.stringify({ message, signature })

      })

        .then((response)=>{

          if(response.status == 200) {

            response.text().then((account)=>{

              resolve(account)

            }).catch(reject)

          } else {

            response.text().then((text)=>{

              reject(text || 'Recovering login signature failed!')

            }).catch(reject)

          }

        })

    })

  }

})



Sign message containing the account address



In case you want to include the wallet account identifier in the to be signed message, pass a callback function returning a string to message:

let { account } = await DePayWidgets.Login({

  message: (account)=>`Click to log in to DePay and to accept DePay's Terms of Service: https://depay.com/legal/terms\n${dateTime}\n${account}`

})

console.log("Logged in via signature", account)



Rejections





Rejects if user just closes the dialog without connecting any wallet:



DePayWidgets.Login().then(()=>{}).catch((error)=>{

  error // "USER_CLOSED_DIALOG"

})



Select Widget



DePay Select widget allows you to open a dialog that allows you to select things like tokens, etc.

Select Token



Resolves with what has been selected by the user.

let token = await DePayWidgets.Select({ what: 'token' })

// {

//   address: "0xa0bed124a09ac2bd941b10349d8d224fe3c955eb"

//   blockchain: "ethereum"

//   decimals: 18

//   logo: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb/logo.png"

//   name: "DePay"

//   symbol: "DEPAY",

//   routable: true // information if token is routable through DePay Payment router

// }



Select NFT



Resolves with what has been selected by the user.

This only resolves to a single contract on a single blockchain.

As NFT collections could span over multiple blockchains, users would need to make one selection per contract address & blockchain.

let collection = await DePayWidgets.Select({ what: 'nft' })

// {

//    address: "0xba30E5F9Bb24caa003E9f2f0497Ad287FDF95623",

//    blockchain: "ethereum",

//    createdAt: "2021-06-18T21:32:25.355263+00:00",

//    image: "https://i.seadn.io/gae/l1wZXP2hHFUQ3turU5VQ9PpgVVasyQ79-ChvCgjoU5xKkBA50OGoJqKZeMOR-qLrzqwIfd1HpYmiv23JWm0EZ14owiPYaufqzmj1?w=500&auto=format",

//    link: "https://opensea.io/collection/bored-ape-kennel-club",

//    name: "BoredApeKennelClub",

//    type: "721",

// }



If the NFT contract is of type 1155 the return will also contain the NFTs id for the given contract address:

// {

//    address: "0x495f947276749Ce646f68AC8c248420045cb7b5e",

//    blockchain: "ethereum",

//    id: "35347623114821255323888368639026081793120226253597860997754787918389704654849",

//    image: "https://i.seadn.io/gae/IIFck1wOESXNMfCN6nEhFIXReUaSyI68MXNPjvFapbjQXc42ARIcG8k-nEKJjXs1GdCY75ej4qArfy7LDbgGOFSR6zzBIOG-yEw04Q?w=500&auto=format",

//    link: "https://opensea.io/assets/ethereum/0x495f947276749ce646f68ac8c248420045cb7b5e/35347623114821255323888368639026081793120226253597860997754787918389704654849",

//    name: "Genesis Block - 100,000 BC",

//    type: "1155"

// }



If NFT is a list of mints on solana:

If the NFT contract is of type 1155 the return will also contain the NFTs id for the given contract address:

// {

//    addresses: ["4RYP3yX52g3BawgS4ShHwJqbrm8FcUF8PPA4oP1eP6Cv", "5GAse3WFPMCmbrw5x1RVdRaBttReBrgFLkw7yyqbSqtn"],

//    blockchain: "solana",

//    image: "https://img-cdn.magiceden.dev/rs:fill:400:400:0:0/plain/https%3A%2F%2Farweave.net%2FevHbhPvYxPn3NgtzeHg3WPS-QFwGdibQwTvY8chccrA%3Fext%3Dpng",

//    link: "https://magiceden.io/marketplace/depay",

//    name: "SOL - AD 2020",

//    type: "metaplex"

// }



Examples



React



Payment Widget



import React from 'react'

import DePayWidgets from '@depay/widgets'

export default (props)=>{

  let unmount

  const openPaymentWidget = async ()=>{

    (

      { unmount } = await DePayWidgets.Payment({...})

    )

  }

  useEffect(() => {

    return ()=>{

      // make sure an open widgets gets closed/unmounted as part of this component

      if(unmount) { unmount() }

    }

  }, [])

  return(

    <button onClick={ openPaymentWidget } type="button">

      Pay

    </button>

  )

}



Web3 Payments



The future is Web3 Payments.

Blockchains hold the potential to faster, simpler and smarter payments.

Web3 Payments are borderless, peer-to-peer, and support multiple tokens and blockchains.

Accept any asset type that your customers already have in their wallet. DePay is blockchain agnostic and can at any time be extended on any blockchain-specific plugin. Interoperability, scalability & 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.

Chain Agnostic (Multichain)



Interoperability is the key principle on which our infrastructure is built. DePay is extensible around any blockchain, ensuring a competitive cross-chain future.

Permissionless



Interoperability is the key principle on which our infrastructure is built. DePay is extensible around any blockchain, ensuring a competitive cross-chain future.

Trustless



Most Web3 Payment providers & processors receive payments to wallets that they manage themselves. Only in a further intermediate step are the payments paid out to sellers. DePay 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.

Easy to use



Our ambition was to create an even easier user experience than you’re used to from shopping in current non-crypto e-commerce stores. We think we’ve done a good job of that.

Open Source



Feel free to use & contribute to our codebase at. We’re happy to have you look under our hood. The DePay protocol will always remain open source.

Multichain



DePay calculates payment routes on multiple blockchains simultaneously despite what your wallet is currently connected to. Our software automatically detects & switches the network if required.

Development



Quick start



yarn install

yarn dev



Testing



Debug Cypress



Starts cypress in --headed and --no-exit

test:cypress:debug



Test and debug single cypress file:

yarn test:cypress:debug --spec "cypress/e2e/bundle.js"