TQDR API Documentation
v-1.0 beta
TQDR Widget Customization
You can make some modification on TQDR payment widget, by adding data attributes to the TQDR form widget according to the following table:
| Description | Attribute | Values | Example |
|---|---|---|---|
| Make the TQDR payment widget language arabic or english. | data-lang | ['ar', 'en'] | <form id="paymentWidgetTQDR" action="{resultUrl}"
data-id="QPHESK537XII2XZCAB3A6JGEOJLVAGAO.vf0lc-dw-il"
data-lang="ar"></form> |
| Make the TQDR payment widget mode light or dark. | data-mode | ['light', 'dark'] | <form id="paymentWidgetTQDR" action="{resultUrl}"
data-id="QPHESK537XII2XZCAB3A6JGEOJLVAGAO.vf0lc-dw-il"
data-mode="light"></form> |
TQDR API HTML form elements
If you want to know our TQDR payment widget HTML auto generated elements according to the mode if it is dark or light or according to the language if it is arabic or english, it is according to the following table:
| HTML Element | Description |
|---|---|
<div lang="en" dir="ltr"
class="tqdrpayment-container tqdrpayment-card tqdrpayment-mx-auto tqdrpayment-border tqdrpayment-border-info tqdrpayment-text-center">
</div> |
It is used to make the TQDR card container div with the language and mode defined option. |
<a href="https://tqdr.com.sa" target="_blank">
<img src="https://tqdr.com.sa/img/icon/logon.png" style="width: 50px; margin: 0 auto;"/>
</a> |
It is used to illustrate the TQDR logo. |
<input type="hidden" name="apikey" value="{auto got from payment id}" /> |
It is used to define the API key and it is required and hidden. |
<div class="tqdrpayment-row tqdrpayment-col-12 tqdrpayment-m-3">
<div class="tqdrpayment-text-secondary tqdrpayment-col-3"> Total </div>
<div class="tqdrpayment-col-9"><input readonly class="tqdrpayment-form-control"
type="text" value="{auto got from payment id}" /></div>
</div> |
It is used to define the total of the TQDR card and it is readonly. |
<div class="tqdrpayment-row tqdrpayment-col-12 tqdrpayment-m-3">
<div class="tqdrpayment-text-secondary tqdrpayment-col-3"> Mobile Number <span style="color: red;">*</span></div>
<div class="tqdrpayment-col-9"><input required class="tqdrpayment-form-control" name="phone"
type="number" placeholder="05xxxxxxxx" value="" /></div>
</div> |
It is used to define the mobile number of the payment and it is required and must be saudi mobile number. |
<div class="tqdrpayment-row tqdrpayment-col-12 tqdrpayment-m-3">
<div id="add" class="tqdrpayment-text-secondary tqdrpayment-col-3"> Receipt Number <span style="color: red;">*</span></div>
<div class="tqdrpayment-col-1"> <button id="addRow" type="button" class="tqdrpayment-btn tqdrpayment-btn-info"
data-toggle="tooltip" data-placement="top" title="For payment by multi receipt numbers">+</button> </div>
<div class="tqdrpayment-col-8"><input required class="tqdrpayment-form-control" name="order_number"
type="text" placeholder="000-0000" value="" /></div>
</div> |
It is used to define the reciept number(s) of the payment and it is required and add the option of choice multi numbers. |
<div id="newRow"></div> |
It is used to define the functionality of multi recipt number(s). |
<div class="tqdrpayment-row tqdrpayment-col-12 tqdrpayment-m-3">
<span class="tqdrpayment-col-12 tqdrpayment-text-center">
<button class="tqdrpayment-btn tqdrpayment-btn-warning" style="color: white;">Send</button>
</span>
</div> |
It is used for submitting the TQDR card payment. |
TQDR API CSS classes
If you want to know our TQDR payment widget CSS classes, it is according to the following table:
| Class | Description |
|---|---|
.tqdrpayment-row |
It is used to make element flex. |
.tqdrpayment-col |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-1 |
It is used to make element position is relative and make some padding from right and left and make it flex 8.33% and max width 8.33%. |
.tqdrpayment-col-2 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-3 |
It is used to make element position is relative and make some padding from right and left and make it flex 25% and max width 25%. |
.tqdrpayment-col-4 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-5 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-6 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-7 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-8 |
It is used to make element position is relative and make some padding from right and left and make it flex 66.67% and max width 66.67%. |
.tqdrpayment-col-9 |
It is used to make element position is relative and make some padding from right and left and make it flex 75% and max width 75%. |
.tqdrpayment-col-10 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-11 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-12 |
It is used to make element position is relative and make some padding from right and left and make it flex 100% and max width 100%. |
.tqdrpayment-col-auto |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-large |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-large-1 |
It is used to make element position is relative and make some padding from right and left and make it flex 8.33% and max width 8.33%. |
.tqdrpayment-col-large-2 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-large-3 |
It is used to make element position is relative and make some padding from right and left and make it flex 25% and max width 25%. |
.tqdrpayment-col-large-4 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-large-5 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-large-6 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-large-7 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-large-8 |
It is used to make element position is relative and make some padding from right and left and make it flex 66.67% and max width 66.67%. |
.tqdrpayment-col-large-9 |
It is used to make element position is relative and make some padding from right and left and make it flex 75% and max width 75%. |
.tqdrpayment-col-large-10 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-large-11 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-large-12 |
It is used to make element position is relative and make some padding from right and left and make it flex 100% and max width 100%. |
.tqdrpayment-col-large-auto |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-md |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-md-1 |
It is used to make element position is relative and make some padding from right and left and make it flex 8.33% and max width 8.33%. |
.tqdrpayment-col-md-2 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-md-3 |
It is used to make element position is relative and make some padding from right and left and make it flex 25% and max width 25%. |
.tqdrpayment-col-md-4 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-md-5 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-md-6 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-md-7 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-md-8 |
It is used to make element position is relative and make some padding from right and left and make it flex 66.67% and max width 66.67%. |
.tqdrpayment-col-md-9 |
It is used to make element position is relative and make some padding from right and left and make it flex 75% and max width 75%. |
.tqdrpayment-col-md-10 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-md-11 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-md-12 |
It is used to make element position is relative and make some padding from right and left and make it flex 100% and max width 100%. |
.tqdrpayment-col-md-auto |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-sm |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-sm-1 |
It is used to make element position is relative and make some padding from right and left and make it flex 8.33% and max width 8.33%. |
.tqdrpayment-col-sm-2 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-sm-3 |
It is used to make element position is relative and make some padding from right and left and make it flex 25% and max width 25%. |
.tqdrpayment-col-sm-4 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-sm-5 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-sm-6 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-sm-7 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-sm-8 |
It is used to make element position is relative and make some padding from right and left and make it flex 66.67% and max width 66.67%. |
.tqdrpayment-col-sm-9 |
It is used to make element position is relative and make some padding from right and left and make it flex 75% and max width 75%. |
.tqdrpayment-col-sm-10 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-sm-11 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-sm-12 |
It is used to make element position is relative and make some padding from right and left and make it flex 100% and max width 100%. |
.tqdrpayment-col-sm-auto |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-xl |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-xl-1 |
It is used to make element position is relative and make some padding from right and left and make it flex 8.33% and max width 8.33%. |
.tqdrpayment-col-xl-2 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-xl-3 |
It is used to make element position is relative and make some padding from right and left and make it flex 25% and max width 25%. |
.tqdrpayment-col-xl-4 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-xl-5 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-xl-6 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-xl-7 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-xl-8 |
It is used to make element position is relative and make some padding from right and left and make it flex 66.67% and max width 66.67%. |
.tqdrpayment-col-xl-9 |
It is used to make element position is relative and make some padding from right and left and make it flex 75% and max width 75%. |
.tqdrpayment-col-xl-10 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-xl-11 |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-col-xl-12 |
It is used to make element position is relative and make some padding from right and left and make it flex 100% and max width 100%. |
.tqdrpayment-col-xl-auto |
It is used to make element position is relative and make some padding from right and left. |
.tqdrpayment-text-center |
It is used to make element with text align center. |
.tqdrpayment-text-right |
It is used to make element with text align right. |
.tqdrpayment-text-left |
It is used to make element with text align left. |
.tqdrpayment-text-secondary |
It is used to make element with color rgba(108,117,125,1). |
.tqdrpayment-card |
It is used to make element with position relative and flex with flex direction as column with border and some border radius and light background. |
.tqdrpayment-card-dark |
It is used to make element with position relative and flex with flex direction as column with border and some border radius and dark background. |
.tqdrpayment-container |
It is used to make element with max width 500px and text align as center with some padding from right and left. |
.tqdrpayment-ml-auto, .tqdrpayment-mx-auto |
It is used to make element with margin left as auto. |
.tqdrpayment-mr-auto, .tqdrpayment-mx-auto |
It is used to make element with margin right as auto. |
.tqdrpayment-m-5 |
It is used to make element with margin from all sides by 3 rem. |
.tqdrpayment-m-3 |
It is used to make element with margin from all sides by 1 rem. |
.tqdrpayment-btn |
It is used to make element as inline block and font weight 400 and text align center with vertical align middle and font size 1 rem with some padding and border radius. |
.tqdrpayment-btn-info |
It is used to make element with color #fff and background and border color as #17a2b8. |
.tqdrpayment-btn-info:hover |
It is used to make element with background color effect as #138496. |
.tqdrpayment-btn-danger |
It is used to make element with color #fff and background and border color as #dc3545. |
.tqdrpayment-btn-danger:hover |
It is used to make element with background color effect as #c82333. |
.tqdrpayment-btn-warning |
It is used to make element with color #212529 and background and border color as #ffc107. |
.tqdrpayment-btn-warning:hover |
It is used to make element with background color effect as #e0a800. |
.tqdrpayment-border |
It is used to make element with border 1px, solid and with color #dee2e6. |
.tqdrpayment-border-info |
It is used to make element with color #17a2b8. |
.tqdrpayment-form-control |
It is used to make element with display block and font size 1 rem with color of #495057 and some padding and border with radius. |
All rights reserved
TQDR for commercial brokerage services © 2023