demo/config.ru in qrcode_pix_ruby-0.4.0 vs demo/config.ru in qrcode_pix_ruby-0.5.0
- old
+ new
@@ -2,36 +2,36 @@
require 'qrcode_pix_ruby'
def generate_html_with(env)
qrcode_data = Rack::Request.new(env).params
- payload = ''
- data_uri = ''
- pix = QrcodePixRuby::Payload.new
+ payload = ''
+ data_uri = ''
+ pix = QrcodePixRuby::Payload.new
unless qrcode_data.empty?
- pix.pix_key = qrcode_data['pix_key'] unless qrcode_data['pix_key'].nil?
- pix.url = qrcode_data['url'] unless qrcode_data['url'].nil?
- pix.description = qrcode_data['description'] unless qrcode_data['description'].nil?
- pix.merchant_name = qrcode_data['merchant_name'] unless qrcode_data['merchant_name'].nil?
- pix.merchant_city = qrcode_data['merchant_city'] unless qrcode_data['merchant_city'].nil?
- pix.transaction_id = qrcode_data['transaction_id'] unless qrcode_data['transaction_id'].nil?
- pix.amount = qrcode_data['amount'] unless qrcode_data['amount'].nil?
- pix.currency = qrcode_data['currency'] unless qrcode_data['currency'].nil?
- pix.country_code = qrcode_data['country_code'] unless qrcode_data['country_code'].nil?
- pix.postal_code = qrcode_data['postal_code'] unless qrcode_data['postal_code'].nil?
- pix.repeatable = qrcode_data['repeatable'] == 't' unless qrcode_data['repeatable'].nil?
+ pix.pix_key = qrcode_data['pix_key'] if !qrcode_data['pix_key'].nil? && !qrcode_data['pix_key'].empty?
+ pix.url = qrcode_data['url'] if !qrcode_data['url'].nil? && !qrcode_data['url'].empty?
+ pix.description = qrcode_data['description'] if !qrcode_data['description'].nil? && !qrcode_data['description'].empty?
+ pix.merchant_name = qrcode_data['merchant_name'] if !qrcode_data['merchant_name'].nil? && !qrcode_data['merchant_name'].empty?
+ pix.merchant_city = qrcode_data['merchant_city'] if !qrcode_data['merchant_city'].nil? && !qrcode_data['merchant_city'].empty?
+ pix.transaction_id = qrcode_data['transaction_id'] if !qrcode_data['transaction_id'].nil? && !qrcode_data['transaction_id'].empty?
+ pix.amount = qrcode_data['amount'] if !qrcode_data['amount'].nil? && !qrcode_data['amount'].empty?
+ pix.currency = qrcode_data['currency'] if !qrcode_data['currency'].nil? && !qrcode_data['currency'].empty?
+ pix.country_code = qrcode_data['country_code'] if !qrcode_data['country_code'].nil? && !qrcode_data['country_code'].empty?
+ pix.postal_code = qrcode_data['postal_code'] if !qrcode_data['postal_code'].nil? && !qrcode_data['postal_code'].empty?
+ pix.repeatable = qrcode_data['repeatable'] == 't' if !qrcode_data['repeatable'].nil? && !qrcode_data['repeatable'].empty?
payload = <<-HTML
<label for='payload'>Payload</label>
<div class='input-group mb-3'>
<input class='form-control' id='payload' value='#{pix.payload}'>
<button class='btn btn-outline-success btn-clipboard' data-clipboard-target='#payload' data-bs-toggle='tooltip' data-bs-placement='top' title='Copied!' data-bs-trigger='click'>Copy</button>
</div>
HTML
- data_uri = "<img style='max-width: 100%;' src='#{pix.base64}'>"
+ data_uri = "<img style='max-width: 100%; display: block; margin: 0 auto;' src='#{pix.base64}'>"
end
StringIO.new <<-HTML
<!DOCTYPE html>
<html>
@@ -61,72 +61,91 @@
<strong>QRCode informations</strong>
<br>
<br>
<form action='https://qrcode-pix-ruby.herokuapp.com' method='post'>
<div class='mb-3'>
- <label for='pix_key'>Pix key</label>
+ <div class='form-text'>
+ For static Pix, please fill the 'Pix key' field.<br>
+ For dynamic Pix, fill the 'URL' field.<br>
+ Do not fill both fields.
+ </div>
+ </div>
+ <div class='mb-3'>
+ <label for='pix_key'>* Pix key</label>
<input type='text' class='form-control' id='pix_key' value='#{qrcode_data["pix_key"]}' name='pix_key'>
+ <div class='form-text'>
+ Formats of Pix keys:<br>
+ CPF: 12345678910 (only numbers)<br>
+ Phone: +5511912345678 (+55 + DDD + phone, only numbers)<br>
+ Email: example@mail.com<br>
+ Random: a6hf7jdk3nc8iK (generated by bank)
+ </div>
</div>
+ <div class='mb-3 text-center'> or</div>
<div class='mb-3'>
- <label for='url'>URL</label>
- <input type='text' class='form-control' id='url' value='#{qrcode_data["url"]}' name='url'>
+ <label for='url'>* URL</label>
+ <input type='url' pattern='https?:\/\/.+' class='form-control' id='url' value='#{qrcode_data["url"]}' name='url'>
</div>
+ <hr>
<div class='mb-3'>
- <label for='description'>Description</label>
- <input required type='text' class='form-control' id='description' value='#{qrcode_data["description"]}' name='description'>
+ <label for='merchant_name'>* Merchant name</label>
+ <input required maxlength='10' type='text' class='form-control' id='merchant_name' value='#{qrcode_data["merchant_name"]}' name='merchant_name'>
</div>
<div class='mb-3'>
- <label for='merchant_name'>Merchant name</label>
- <input required type='text' class='form-control' id='merchant_name' value='#{qrcode_data["merchant_name"]}' name='merchant_name'>
+ <label for='merchant_city'>* Merchant city</label>
+ <input required maxlength='10' type='text' class='form-control' id='merchant_city' value='#{qrcode_data["merchant_city"]}' name='merchant_city'>
</div>
<div class='mb-3'>
- <label for='merchant_city'>Merchant city</label>
- <input required type='text' class='form-control' id='merchant_city' value='#{qrcode_data["merchant_city"]}' name='merchant_city'>
+ <label for='country_code'>* Country</label>
+ <select required id='country_code' name='country_code' class='form-select'>
+ <option></option>
+ <option value='BR' #{qrcode_data['country_code'] == 'BR' ? 'selected' : ''}>Brazil</option>
+ </select>
</div>
<div class='mb-3'>
- <label for='transaction_id'>Transaction ID</label>
- <input required type='text' class='form-control' id='transaction_id' value='#{qrcode_data["transaction_id"]}' name='transaction_id'>
+ <label for='currency'>* Currency</label>
+ <select required id='currency' name='currency' class='form-select'>
+ <option></option>
+ <option value='986' #{qrcode_data['currency'] == '986' ? 'selected' : ''}>Brazilian Real (R$)</option>
+ </select>
</div>
<div class='mb-3'>
- <label for='amount'>Amount</label>
- <input required type='text' class='form-control' id='amount' value='#{qrcode_data["amount"]}' name='amount'>
+ <label for='description'>Description</label>
+ <input maxlength='10' type='text' class='form-control' id='description' value='#{qrcode_data["description"]}' name='description'>
</div>
<div class='mb-3'>
- <label for='currency'>Currency</label>
- <select required id='currency' name='currency' class='form-select'>
- <option value='986' selected>Brazilian Real (R$)</option>
- </select>
+ <label for='transaction_id'>Transaction ID</label>
+ <input maxlength='10' pattern='[a-zA-z0-9]*' type='text' class='form-control' id='transaction_id' value='#{qrcode_data["transaction_id"]}' name='transaction_id'>
+ <div class='form-text'>Only numbers and simple characters, without whitespaces.</div>
</div>
<div class='mb-3'>
- <label for='country_code'>Country</label>
- <select required id='country_code' name='country_code' class='form-select'>
- <option value='BR' selected>Brazil</option>
- </select>
+ <label for='amount'>Amount</label>
+ <input type='number' step='0.01' pattern='[0-9]{1,}\.[0-9][0-9]' class='form-control' id='amount' value='#{qrcode_data["amount"]}' name='amount'>
+ <div class='form-text'>Only numbers with 2 decimal places.</div>
</div>
<div class='mb-3'>
<label for='postal_code'>Postal code</label>
- <input type='text' class='form-control' id='postal_code' value='#{qrcode_data["postal_code"]}' name='postal_code'>
+ <input maxlength='8' pattern='[0-9]{8}' type='tel' class='form-control' id='postal_code' value='#{qrcode_data["postal_code"]}' name='postal_code'>
+ <div class='form-text'>Only numbers.</div>
</div>
<div class='mb-3'>
- <label for='repeatable'>Repeatable?</label>
+ <label for='repeatable'>Can be paid multiple times?</label>
<select required id='repeatable' name='repeatable' class='form-select'>
- <option selected></option>
- <option value='t'>Yes</option>
- <option value='f'>No</option>
+ <option></option>
+ <option value='t' #{qrcode_data['repeatable'] == 't' ? 'selected' : ''}>Yes</option>
+ <option value='f' #{qrcode_data['repeatable'] == 'f' ? 'selected' : ''}>No</option>
</select>
</div>
- <div class='d-grid gap-2'>
+ <div class='d-grid gap-2' style='padding-bottom: 20px;'>
<button type='submit' class='btn btn-lg btn-primary'>Generate</button>
</div>
</form>
</div>
<div class='col-sm-6'>
<strong>Preview</strong>
<br>
<br>
#{payload}
- <br>
- <br>
#{data_uri}
</div>
</div>
</div>
<script>