- Include CSS and JS files. Insert the following code before
</head>or immediately after<body>.
<script type="text/javascript" src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fpaybear.js"></script>
<link rel="stylesheet" type="text/css" href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fpaybear.css" />
-
Paste the contents of
paybear.htmlto the place where your form should appear. If you need to translate the form to a different language or change some text, you can manipulate the HTML code directly. -
Immediately after that insert a button to invoke the form:
<button id="paybear-bitcoin">Pay With Bitcoin</button>
You can style the button to match your design. If you need to support several currencies, you can add multiple buttons:
<button id="paybear-ethereum">Pay with Ethereum</button>
Alternatively you can create a single button for all crypto currencies and enable currency selection screen in the form itself (see instructions below):
<button id="paybear-all">Pay with Crypto</button>
- Add a piece of code binding your button(s) to the form.
Single currency example:
<script>
(function () {
window.paybear = new Paybear({
button: '#paybear-ethereum',
fiatValue: 19.95,
statusUrl: "status.php?order=123",
redirectTo: "success.php?order=123",
currencies: "currencies.php?order=123&token=eth",
});
})();
</script>
Multiple currencies example:
<script>
(function () {
window.paybear = new Paybear({
button: '#paybear-all',
fiatValue: 19.95,
currencies: "currencies.php?order=123",
statusUrl: "status.php?order=123",
redirectTo: "success.php?order=123",
modal: true
});
})();
</script>
If you don't want a modal window, you can change the modal parameter to false.
If you want the form to appear immediately, without any buttons, the button parameter can be removed.
- Set up your backend as described in one of the examples
You can make the form download the settings via AJAX by passing the link to settingsUrl parameter.
<script>
(function () {
window.paybear = new Paybear({
button: '#paybear-all',
settingsUrl: "settings.php?order=123"
});
})();
</script>
Similarly, currencies can be either the URL or the array of currencies.
You can find the complete list of settings below:
| Key | Description | Example |
|---|---|---|
| currencies | array of currencies to use or URL of the page to download it from. Detailed description below | [{`see structure below`}] |
| button | DOM selector of the button to use as a form trigger. If set to null, the form is shown immediately on page load | null |
| fiatValue | your order total | "19.99" |
| enableFiatTotal | show fiat (USD) total at the top of the form | true |
| fiatCurrency | currency code you use (default=USD) | "USD" |
| fiatSign | short abbreviation/sign of your currency (default=$) | "\$" |
| modal | set to true to display in a modal window, false to display inline (default=true) | true |
| enableBack | Enable back button (always true in `modal` mode) | false |
| onBackClick | Back button URL (or callback function) | "payment_failed.php?order=123" |
| statusUrl | the status of the payment will be checked every several seconds by downloading this URL. The reply format is described below | /status.php?order=123 |
| statusInterval | how often to update the status of the payment (in seconds) | 10 |
| settingsUrl | URL to get form settings from | /settings.php?order=123 |
| redirectTo | after the payment is complete, the customer will be redirected to this URL | /success.php?order=123 |
| redirectTimeout | number of seconds before redirecting the customer automatically. 0 disables the redirect. Default is 5 | 5 |
| timer | time (in seconds) for the payment window. 0 disables the timer. Default value is 15 minutes | 15*60 |
Structure of currencies array
| Key | Description | Example |
|---|---|---|
| title | Currency name | Ethereum |
| code | Short name / code | ETH |
| icon | Logo (link or data:image) | images/eth.png |
| metamask | Set to true to allow Metamask payments (only for ETH) | false |
| metamaskAuto | Show Metamask payment automatically (only if metamask is enabled) | true |
| blockExplorer | `format`-compatible string to generate the link to block explorer. Parameter used: wallet address | "https://etherscan.io/address/%s" |
| walletLink | Link to wallet/APP. Set to `null` to disable wallet links. Parameters used: wallet address and amount to send | "ethereum:%s?amount=%s" |
| currencyUrl | For multi-currency forms allows to get address by making an AJAX call to this URL when the currency is selected | "currency.php?order=123&token=ETH |
| coinsValue | Amount to charge (in crypto) | 0.001 |
| rate | Conversion rate (Fiat/Crypto) | 739.35 |
| maxConfirmations | Wait for this number of confirmations from the blockchain before showing 'success' message | 1 |
| address | Wallet address to show to the client (generated by PayBear API call). For multi currency forms use `currencyUrl` parameter instead | "0x39ee76948d238fad2b750998f8a38d80c73c7cd7" |
Example (single currency form):
<script>
(function () {
window.paybear = new Paybear({
button: '#paybear-ltc',
fiatValue: 19.95,
statusUrl: "status.php?order=123",
redirectTo: "success.php?order=123",
currencies: [
{
"title":"Litecoin",
"code":"LTC",
"icon":"images/ltc.svg",
"blockExplorer":"https://live.blockcypher.com/ltc/address/%s/",
"walletLink":"litecoin:%s?amount=%s",
"maxConfirmations":3,
"address":"LWUx4FKFXmw1K12GRyZj9RavdBz6jNQNqX",
"coinsValue":0.058516,
"rate":341.6141
}
]
});
})();
</script>
Example (multi currency form):
<script>
(function () {
window.paybear = new Paybear({
button: '#paybear-all',
fiatValue: 19.95,
statusUrl: "status.php?order=123",
redirectTo: "success.php?order=123",
currencies: [
{
"title":"Bitcoin Cash",
"code":"BCH",
"icon":"images/bch.svg",
"blockExplorer":"https://blockdozer.com/insight/address/%s",
"maxConfirmations":1,
"currencyUrl":"currency.php?order=123&token=BCH",
"coinsValue":0.008797,
"rate":2272.2751
},
{
"title":"Bitcoin Gold",
"code":"BTG",
"icon":"images/btg.svg",
"blockExplorer":"https://btgexp.com/address/%s",
"maxConfirmations":3,
"currencyUrl":"currency.php?order=123&token=BTG",
"coinsValue":0.066913,
"rate":298.745
}
]
});
})();
</script>
- Have a suggestion or found a bug? Please email us or ping our Telegram
- We offer bounties for developers, which means if you are capable of writing a shopping cart plugin or any other integration, please email us.
- Check our website for more information: https://www.paybear.io/