Skip to content

Commit

Permalink
update demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@0xNe0x1
0xNe0x1 committed Oct 7, 2024
1 parent 24b0b61 commit 09a7737
Showing 1 changed file with 260 additions and 51 deletions.
311 changes: 260 additions & 51 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ <h5 class="px-4">Payment</h5>
<option value='fantom'>Fantom</option>
<option value='avalanche'>Avalanche</option>
<option value='gnosis'>Gnosis</option>
<option value='worldchain'>Worldchain</option>
</select>
</div>
<div class="col col-4">
Expand Down Expand Up @@ -139,9 +140,22 @@ <h5 class="px-4">Payment: managed integration</h5>
button.addEventListener("click",function(e){
DePayWidgets.Payment({
integration: '461cb57d-6063-40b8-8326-a124c4a40e6f',
payload: {
test: "true"
}
succeeded: (transaction, payment)=>{
console.log('Success')
console.log('transaction', transaction)
console.log('payment', payment)
},
failed: (transaction, error, payment)=>{
console.log('Failed')
console.log('transaction', transaction)
console.log('error', error)
console.log('payment', payment)
},
validated: (success, transaction, payment)=>{
console.log('Validated', success)
console.log('transaction', transaction)
console.log('payment', payment)
},
})
})
</script>
Expand All @@ -154,71 +168,256 @@ <h5 class="px-4">Payment: managed integration</h5>
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div class="overflow-auto" style="height: 140px;">
<h5 class="px-4">Payment: multichain</h5>
<h5 class="px-4">Donation: managed integration</h5>
<div class="px-4">
<div class="text-secondary ">Accept payments on multiple blockchains.</div>
<div class="text-secondary ">Integration managed via app.depay.com</div>
</div>
</div>
<div class="px-4 pt-3">
<button class='btn btn-primary' id="payMultichain">Try it</button>
<button class='btn btn-primary' id="donateManagedIntegration">Try it</button>
<script>
var button = document.getElementById("payMultichain");
var button = document.getElementById("donateManagedIntegration");
button.addEventListener("click",function(e){
DePayWidgets.Payment({
integration: '99a3e989-25f2-4fd4-a0a2-34050df21c3b'
})
})
</script>
</div>
</div>
</div>
</div>

<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div class="overflow-auto" style="height: 140px;">
<h5 class="px-4">Tip: managed integration</h5>
<div class="px-4">
<div class="text-secondary ">Integration managed via app.depay.com</div>
</div>
</div>
<div class="px-4 pt-3">
<button class='btn btn-primary' id="tipManagedIntegration">Try it</button>
<script>
var button = document.getElementById("tipManagedIntegration");
button.addEventListener("click",function(e){
DePayWidgets.Payment({
integration: '5e658691-bba4-4496-bd75-4c9daf3c6ea5'
})
})
</script>
</div>
</div>
</div>
</div>

<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div class="overflow-auto" style="height: 140px;">
<h5 class="px-4">Payment: Test</h5>
<div class="px-4">
<div class="text-secondary ">Test</div>
</div>
</div>
<div class="px-4 pt-3">
<button class='btn btn-primary' id="payTest">Try it</button>
<script>
var button = document.getElementById("payTest");
button.addEventListener("click",function(e){
DePayWidgets.Payment({
accept: [
{
blockchain: 'polygon',
amount: 0.01,
token: '0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174',
receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
},
{
blockchain: 'bsc',
amount: 0.01,
token: '0xe9e7CEA3DedcA5984780Bafc599bD69ADd087D56',
receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
},
},
]
});
});
</script>
</div>
</div>
</div>
</div>

<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div class="overflow-auto" style="height: 140px;">
<h5 class="px-4">Wallet options</h5>
<div class="px-4">
<div class="text-secondary ">Uniswap only</div>
</div>
</div>
<div class="px-4 pt-3">
<button class='btn btn-primary' id="payUniswapOnly">Try it</button>
<script>
var button = document.getElementById("payUniswapOnly");
button.addEventListener("click",function(e){
DePayWidgets.Payment({
accept: [
{
blockchain: 'ethereum',
amount: 0.01,
token: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
blockchain: 'polygon',
amount: 0.001,
token: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
},
{
blockchain: 'solana',
amount: 0.01,
token: '11111111111111111111111111111111',
receiver: '3Hrw6AsNyJAp71Nkgo4tzJwvGM47DzqMdAtf8ojptkXk'
},
},
],
wallets: {
whitelist: [
"Uniswap"
]
}
});
});
</script>
</div>
</div>
</div>
</div>

<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div class="overflow-auto" style="height: 140px;">
<h5 class="px-4">Wallet options</h5>
<div class="px-4">
<div class="text-secondary ">Uniswap first</div>
</div>
</div>
<div class="px-4 pt-3">
<button class='btn btn-primary' id="payUniswapFirst">Try it</button>
<script>
var button = document.getElementById("payUniswapFirst");
button.addEventListener("click",function(e){
DePayWidgets.Payment({
accept: [
{
blockchain: 'optimism',
amount: 0.01,
token: '0x94b008aA00579c1307B0EF2c499aD98a8ce58e58',
blockchain: 'polygon',
amount: 0.001,
token: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
},
},
],
wallets: {
sort: [
"Uniswap"
]
}
});
});
</script>
</div>
</div>
</div>
</div>

<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div class="overflow-auto" style="height: 140px;">
<h5 class="px-4">Wallet options</h5>
<div class="px-4">
<div class="text-secondary ">Uniswap first and partially filtered</div>
</div>
</div>
<div class="px-4 pt-3">
<button class='btn btn-primary' id="payUniswapFirstAndOthers">Try it</button>
<script>
var button = document.getElementById("payUniswapFirstAndOthers");
button.addEventListener("click",function(e){
DePayWidgets.Payment({
accept: [
{
blockchain: 'arbitrum',
amount: 0.01,
token: '0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9',
blockchain: 'polygon',
amount: 0.001,
token: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
},
},
],
wallets: {
sort: [
"Uniswap"
],
whitelist: [
'Uniswap',
'Coinbase',
'MetaMask',
'Rainbow'
]
}
});
});
</script>
</div>
</div>
</div>
</div>

<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div class="overflow-auto" style="height: 140px;">
<h5 class="px-4">Payment: multichain</h5>
<div class="px-4">
<div class="text-secondary ">Accept payments on multiple blockchains.</div>
</div>
</div>
<div class="px-4 pt-3">
<button class='btn btn-primary' id="payMultichain">Try it</button>
<script>
var button = document.getElementById("payMultichain");
button.addEventListener("click",function(e){
DePayWidgets.Payment({
accept: [
{
blockchain: 'ethereum',
amount: 0.25,
token: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
},{
blockchain: 'bsc',
amount: 0.0001,
token: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
},{
blockchain: 'fantom',
amount: 0.01,
token: '0x28a92dde19D9989F39A49905d7C9C2FAc7799bDf',
amount: 0.0001,
token: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
},
{
},{
blockchain: 'avalanche',
amount: 0.01,
token: '0x9702230A8Ea53601f5cD2dc00fDBc13d4dF4A8c7',
amount: 0.0001,
token: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
},
{
blockchain: 'gnosis',
amount: 0.01,
token: '0x4ECaBa5870353805a9F068101A40E0f32ed605C6',
},{
blockchain: 'arbitrum',
amount: 0.0001,
token: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
},{
blockchain: 'optimism',
amount: 0.0001,
token: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
},{
blockchain: 'base',
amount: 0.0001,
token: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
},{
blockchain: 'polygon',
amount: 0.0001,
token: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
},{
blockchain: 'solana',
amount: 0.0001,
token: '11111111111111111111111111111111',
receiver: '5AcFMJZkXo14r3Hj99iYd1HScPiM4hAcLZf552DfZkxa'
},
]
});
Expand Down Expand Up @@ -612,17 +811,23 @@ <h5 class="px-4">Payment: with tracking/validation</h5>
button.addEventListener("click",function(e){
DePayWidgets.Payment({
accept: [{
blockchain: 'ethereum',
amount: 0.1,
token: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
receiver: '0x317D875cA3B9f8d14f960486C0d1D1913be74e90'
blockchain: 'polygon',
amount: 0.01,
token: '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359',
receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
}],
track: {
method: (payment)=>{
console.log('TRACK', payment)
return axios.post('/track', payment)
},
poll: {
method: (data)=>{
console.log('POLL', data)
return new Promise((resolve)=>resolve)
}
}
}
},
});
});
</script>
Expand Down Expand Up @@ -965,7 +1170,7 @@ <h5 class="px-4">Payment: preload</h5>
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div class="overflow-auto" style="height: 140px;">
<h5 class="px-4">Sale: Buy LimeWire Token</h5>
<h5 class="px-4">Sale: Buy DePay on Solana</h5>
<div class="px-4">
<div class="text-secondary "></div>
</div>
Expand All @@ -977,7 +1182,7 @@ <h5 class="px-4">Sale: Buy LimeWire Token</h5>
button.addEventListener("click",function(e){
DePayWidgets.Sale({
sell: {
'ethereum': '0x628A3b2E302C7e896AcC432D2d0dD22B6cb9bc88'
'solana': 'DePay1miDBPWXs6PVQrdC5Vch2jemgEPaiyXLNLLa2NF'
},
});
});
Expand All @@ -1002,7 +1207,11 @@ <h5 class="px-4">Sale: Buy DEPAY fixed amount</h5>
var button = document.getElementById("buyDePayFixedButton");
button.addEventListener("click",function(e){
DePayWidgets.Sale({
amount: { fix: 20, token: true, currency: true },
amount: { fix: 990, token: true, currency: true },
before: async (payment, from)=> {
console.log(payment, from)
return false // stops payment
},
sell: {
'ethereum': '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb',
'bsc': '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb',
Expand Down

0 comments on commit 09a7737

Please sign in to comment.