Permalink
Switch branches/tags
Find file Copy path
9dcd643 Jul 23, 2017
1 contributor

Users who have contributed to this file

278 lines (211 sloc) 10.9 KB
@using Gourl.GoUrlCore
@model Gourl.Models.GoUrl.DisplayCryptoboxModel
<!DOCTYPE html>
<html lang="en">
<head>
<title>@Model.coinName Your Custom JSON Bitcoin Payment Box Example</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="~/scripts/cryptobox.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
<style>
.tooltip-inner {
max-width: 350px;
}
</style>
</head>
<body>
<!-- JQuery Payment Box Script-->
<script>
cryptobox_custom('@ViewBag.JsonUrl', @Html.Raw(Model.is_paid ? 1 : 0), '../', 'gourl_', '');
</script>
<!-- HTML Bootstrap -->
<div style='text-align: center; width: 100%; height: auto; line-height: 50px; background-color: #f1f1f1; border-bottom: 1px solid #ddd; color: #49abe9; font-size: 18px;'>
14. GoUrl <b>Custom JSON / JQUERY Payment Box</b> Example (@Model.coinName payments). &#160;Use it on your website.
<div style='float: right;'>
<a style='font-size: 15px; color: #389ad8; margin-right: 20px' href='https://gourl.io/@Model.coinName.ToLower()-payment-gateway-api.html#p8'>Instruction</a><a style='font-size: 15px; color: #389ad8; margin-right: 20px' href='https://github.com/cryptoapi/Payment-Gateway/blob/master/Examples/json.php'>PHP Source</a><a style='font-size: 15px; color: #389ad8; margin-right: 20px' href='https://gourl.io/@Model.coinName.ToLower()-payment-gateway-api.html'>Other Examples</a>
</div>
</div>
<div class="container theme-showcase" role="main">
<!-- General Text -->
<br>
<div class="page-header">
<h1>Customize GoUrl Bitcoin Payment Box / JSON Data</h1>
</div>
<br>
<div class="well">
Bitcoin JSON Data will allow you to easily customise your bitcoin payment boxes.<br>
For example, you can display payment amount and bitcoin payment address with your own text, you can also accept payments in android/windows and other applications.
See <a href='https://gourl.io/bitcoin-payment-gateway-api.html#p8'>instruction</a> and <a href='https://github.com/cryptoapi/Payment-Gateway/blob/master/Examples/json.php'>php source</a><br>
</div>
<br><br>
<div class="page-header">
<h1>Example #14 (Jquery) - </h1>
</div>
<!-- Loading ... -->
<div class="gourl_loader">
<div class="container text-center gourl_loader_button">
<a style="margin: 80px 20px 40px 20px" href="@HttpContext.Current.Request.Url.AbsoluteUri#gourlcryptolang" class="btn btn-default btn-lg"><i class='fa fa-spinner fa-spin'></i> &#160; @Model.coinName Box Loading ...</a>
</div>
<div style="margin: 70px; display: none" class="panel panel-danger gourl_cryptobox_error">
<div class="panel-heading">
<h3 class="panel-title">Error !</h3>
</div>
<div class="panel-body">
<div class="gourl_error_message"></div>
</div>
</div>
</div>
<!-- Area above Payment Box -->
<div class="gourl_cryptobox_top" style="display: none">
<!-- Notifications -->
@ViewBag.Message
<div class="row">
<!-- Box Language -->
<div class="col-xs-6 col-md-3">
<div class="dropdown" style='margin-bottom: 20px'>
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Language &#160; <span class='small'>@Controls.localisation[Model.language].Name</span>
<span class="caret"></span>
</button>
@Html.LanguageBox("en", "gourlcryptolang", false)
</div>
</div>
<!-- Logo -->
<div class="col-xs-6 col-md-3 gourl_boxlogo_paid" style="display: none">
<div class='text-right'>
<img class='gourl_boxlogo' alt='logo' src='#'>
</div>
<br>
</div>
<div class="col-xs-6 col-md-9 gourl_boxlogo_unpaid" style="display: none">
<div class='text-right'>
<img class='gourl_boxlogo' alt='logo' src='#'>
</div>
<br>
</div>
</div>
</div>
<!-- Crypto Payment Box -->
<div class="gourl_cryptobox_unpaid" style="display: none">
<div class="row">
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">1. <span class="gourl_texts_instruction"></span></h3>
</div>
<div class="panel-body">
<div>
<ol>
<!-- <li class="gourl_texts_intro1"></li> -->
<li data-site="circle.com" data-url="https://www.circle.com/" class="gourl_texts_intro1b"></li>
<li class="gourl_texts_intro2"></li>
<li><b class="gourl_texts_intro3"></b></li>
</ol>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title gourl_addr_title">2. <span class="gourl_texts_coin_address"></span></h3>
</div>
<div class="panel-body">
<div style="float: right; margin-bottom: 10px">
<a class='gourl_wallet_url' href='#'><img class='gourl_qrcode_image' alt='qrcode' data-size='100' src='#'></a>
</div>
<br>
<div class="gourl_texts_send"></div>
<br>
<div>
<a class="gourl_addr gourl_wallet_url" href="#"></a> &#160; <a class="gourl_wallet_url gourl_wallet_open" href="#"><i class="fa fa-external-link" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">3. <span class="gourl_paymentcaptcha_amount"></span></h3>
</div>
<div class="panel-body">
<span class="gourl_amount"></span> <span class="gourl_coinlabel"></span> + <a class="gourl_texts_fees gourl_fees_hint" href="#"></a>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">4. <span class="gourl_paymentcaptcha_status"></span></h3>
</div>
<div class="panel-body">
<div class="gourl_paymentcaptcha_statustext"></div>
</div>
</div>
</div>
</div>
<br>
<form action="@HttpContext.Current.Request.Url.AbsoluteUri#gourlcryptolang" method="post">
<input type="hidden" id="cryptobox_refresh_" name="cryptobox_refresh_" value="1">
<button style="margin: 10px 20px" class="gourl_button_refresh btn btn-default btn-lg"></button>
<button style="margin: 10px 20px" class="gourl_button_wait btn btn-info btn-lg"></button>
</form>
<br><br><br>
<div class="gourl_texts_btn_wait_hint"></div>
</div>
<!-- Successful Result -->
<div class="gourl_cryptobox_paid" style="display: none">
<div class="row">
<div class="col-md-6">
<div class="panel panel-success">
<div class="panel-heading">
<div style="float: right; margin-left: 10px">
<span class="gourl_texts_total"></span>: <span class="gourl_amount"></span> <span class="gourl_coinlabel"></span>
</div>
<h3 class="panel-title gourl_paymentcaptcha_title">Result</h3>
</div>
<div class="panel-body text-center">
<div style="float: left" class="gourl_paidimg">
<br>
<img style='border: 0' src='https://coins.gourl.io/images/paid.png' alt='Successful'>
<br><br>
</div>
<h3 style='color: #3caf00; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 22px; line-height: 35px; font-weight: bold;' class="gourl_paymentcaptcha_successful">.</h3>
<div class="gourl_paymentcaptcha_date"></div>
<br>
<a style="margin: 10px 20px" href="#" class="gourl_button_details btn btn-info"></a>
</div>
</div>
</div>
</div>
</div>
<!-- Debug / Raw Data -->
<div class="gourl_cryptobox_rawdata" style="display: none">
<br><br><br><br><br><br>
<div class="page-header">
<h1>Raw JSON Data (from GoUrl.io payment gateway) -</h1>
</div>
<p>
You can use php function <a target='_blank' href='https://github.com/cryptoapi/Payment-Gateway/blob/master/cryptobox.class.php#L316'>$box->cryptobox_json_url()</a>; It generates url with your paramenters to gourl.io payment gateway.<br>
Using this url you can get bitcoin/altcoin payment box values in JSON format and use it on html page with Jquery/Ajax - <a target='_blank' href='https://github.com/cryptoapi/Payment-Gateway/blob/master/cryptobox.js#L14'>cryptobox_custom(url, paid, path, ext, redirect)</a>. JSON data will allow you to easily customise your bitcoin payment boxes. For example, you can display payment amount and bitcoin payment address with your own text, you can also accept payments in android/windows and other applications.
</p>
<p>
Alternatively, you can receive JSON values through php curl on server side - php function <a target='_blank' href='https://github.com/cryptoapi/Payment-Gateway/blob/master/cryptobox.class.php#L369'>$box->get_json_values()</a>; and use it in your php/other files without using javascript and jquery/ajax.
</p>
<p>
<a target='_blank' href='@ViewBag.JsonUrl'>JSON data source &#187;</a>
</p>
<div class="well well-sm">
<div class='gourl_jsondata'></div>
</div>
<div style='position: absolute; left: 0;'>
<a target="_blank" href="http://validator.w3.org/check?uri=@HttpContext.Current.Request.Url.AbsoluteUri"><img src="https://gourl.io/images/w3c.png" alt="Valid HTML"></a>
</div>
</div>
</div>
</body>
</html>