node-red-contrib-chatbot
Version:
REDBot a Chat bot for a full featured chat bot for Telegram, Facebook Messenger and Slack. Almost no coding skills required
315 lines (301 loc) • 14.5 kB
HTML
<script type="text/javascript">
RED.nodes.registerType('chatbot-invoice', {
category: 'RedBot',
color: '#FFCC66',
defaults: {
name: {
value: ''
},
title: {
value: '',
required: true
},
description: {
value: '',
required: true
},
payload: {
value: '',
required: true
},
photoUrl: {
value: ''
},
photoWidth: {
value: ''
},
photoHeight: {
value: ''
},
currency: {
value: '',
required: true
},
needName: {
value: true
},
needEmail: {
value: false
},
needPhoneNumber: {
value: false
},
needShippingAddress: {
value: false
},
isFlexible: {
value: false
},
prices: {
value: [],
validate: function(value) {
return $.RedBot.validate.prices(value);
}
}
},
inputs: 1,
outputs: 1,
paletteLabel: 'Invoice',
icon: 'chatbot-invoice.png',
label: function() {
return this.name || 'Invoice';
},
oneditsave: function() {
var prices = $("#node-input-items-container").editableList('items');
var node = this;
node.prices = [];
var idx;
for(idx = 0; idx < prices.length; idx++) {
var container = $(prices[idx]);
node.prices.push({
label: $('input[name=label]', container).val(),
amount: $('input[name=amount]', container).val()
});
}
},
oneditprepare: function() {
$('#node-input-items-container')
.css('min-height','300px')
.css('min-width','450px')
.editableList({
addButton: 'Add invoice item',
addItem: function(container, i, item) {
var row = $('<div/>').appendTo(container);
row
.append('<input style="width:70%;margin-left:10px;" type="text" name="label" placeholder="Description"/>')
.append('<input style="width:25%;margin-left:10px;" type="text" name="amount" placeholder="Amount"/>');
if (item.label != null) {
$('input[name=label]', container).val(item.label);
}
if (item.amount != null) {
$('input[name=amount]', container).val(item.amount);
}
},
removable: true,
sortable: true
});
var prices = this.prices;
var idx;
for (idx = 0; idx < prices.length; idx++) {
$('#node-input-items-container').editableList('addItem', prices[idx]);
}
}
});
</script>
<script type="text/x-red" data-template-name="chatbot-invoice">
<div class="form-row form-row-name">
<label for="node-input-name"><i class="icon-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row form-row-title">
<label for="node-input-name">Title</label>
<input type="text" id="node-input-title" placeholder="Title">
</div>
<div class="form-row form-row-description">
<label for="node-input-description">Description</label>
<textarea id="node-input-description" placeholder="Invoice description" style="width:93%;height:50px;"></textarea>
</div>
<div class="form-row form-row-payload">
<label for="node-input-payload">Payload</label>
<input type="text" id="node-input-payload" placeholder="Invoice Payload">
</div>
<div class="form-row form-row-currency">
<label for="node-input-currency">Currency</label>
<select id="node-input-currency" placeholder="Select currency">
<option value="AED">United Arab Emirates Dirham</option>
<option value="AFN">Afghan Afghani</option>
<option value="ALL">Albanian Lek</option>
<option value="AMD">Armenian Dram</option>
<option value="ARS">Argentine Peso</option>
<option value="AUD">Australian Dollar</option>
<option value="AZN">Azerbaijani Manat</option>
<option value="BAM">Bosnia & Herzegovina Convertible Mark</option>
<option value="BDT">Bangladeshi Taka</option>
<option value="BGN">Bulgarian Lev</option>
<option value="BND">Brunei Dollar</option>
<option value="BOB">Bolivian Boliviano</option>
<option value="BRL">Brazilian Real</option>
<option value="CAD">Canadian Dollar</option>
<option value="CHF">Swiss Franc</option>
<option value="CLP">Chilean Peso</option>
<option value="CNY">Chinese Renminbi Yuan</option>
<option value="COP">Colombian Peso</option>
<option value="CRC">Costa Rican Colón</option>
<option value="CZK">Czech Koruna</option>
<option value="DKK">Danish Krone</option>
<option value="DOP">Dominican Peso</option>
<option value="DZD">Algerian Dinar</option>
<option value="EGP">Egyptian Pound</option>
<option value="EUR">Euro</option>
<option value="GBP">British Pound</option>
<option value="GEL">Georgian Lari</option>
<option value="GTQ">Guatemalan Quetzal</option>
<option value="HKD">Hong Kong Dollar</option>
<option value="HNL">Honduran Lempira</option>
<option value="HRK">Croatian Kuna</option>
<option value="HUF">Hungarian Forint</option>
<option value="IDR">Indonesian Rupiah</option>
<option value="ILS">Israeli New Sheqel</option>
<option value="INR">Indian Rupee</option>
<option value="ISK">Icelandic Króna</option>
<option value="JMD">Jamaican Dollar</option>
<option value="JPY">Japanese Yen</option>
<option value="KES">Kenyan Shilling</option>
<option value="KGS">Kyrgyzstani Som</option>
<option value="KRW">South Korean Won</option>
<option value="KZT">Kazakhstani Tenge</option>
<option value="LBP">Lebanese Pound</option>
<option value="LKR">Sri Lankan Rupee</option>
<option value="MAD">Moroccan Dirham</option>
<option value="MDL">Moldovan Leu</option>
<option value="MNT">Mongolian Tögrög</option>
<option value="MUR">Mauritian Rupee</option>
<option value="MVR">Maldivian Rufiyaa</option>
<option value="MXN">Mexican Peso</option>
<option value="MYR">Malaysian Ringgit</option>
<option value="MZN">Mozambican Metical</option>
<option value="NGN">Nigerian Naira</option>
<option value="NIO">Nicaraguan Córdoba</option>
<option value="NOK">Norwegian Krone</option>
<option value="NPR">Nepalese Rupee</option>
<option value="NZD">New Zealand Dollar</option>
<option value="PAB">Panamanian Balboa</option>
<option value="PEN">Peruvian Nuevo Sol</option>
<option value="PHP">Philippine Peso</option>
<option value="PKR">Pakistani Rupee</option>
<option value="PLN">Polish Złoty</option>
<option value="PYG">Paraguayan Guaraní</option>
<option value="QAR">Qatari Riyal</option>
<option value="RON">Romanian Leu</option>
<option value="RSD">Serbian Dinar</option>
<option value="RUB">Russian Ruble</option>
<option value="SAR">Saudi Riyal</option>
<option value="SEK">Swedish Krona</option>
<option value="SGD">Singapore Dollar</option>
<option value="THB">Thai Baht</option>
<option value="TJS">Tajikistani Somoni</option>
<option value="TRY">Turkish Lira</option>
<option value="TTD">Trinidad and Tobago Dollar</option>
<option value="TWD">New Taiwan Dollar</option>
<option value="TZS">Tanzanian Shilling</option>
<option value="UAH">Ukrainian Hryvnia</option>
<option value="UGX">Ugandan Shilling</option>
<option value="USD">United States Dollar</option>
<option value="UYU">Uruguayan Peso</option>
<option value="UZS">Uzbekistani Som</option>
<option value="VND">Vietnamese Đồng</option>
<option value="YER">Yemeni Rial</option>
<option value="ZAR">South African Rand</option>
</select>
</div>
<div class="form-row form-row-label" style="margin-bottom:0;">
<label><span>Invoice items</span></label>
</div>
<div class="form-row node-input-rule-container-row">
<ol id="node-input-items-container"></ol>
</div>
<div class="form-row form-row-photoUrl">
<label for="node-input-photoUrl">Photo URL</label>
<input type="text" id="node-input-photoUrl" placeholder="Photo URL">
</div>
<div class="form-row form-row-checkbox">
<label for="node-input-needShippingAddress"> </label>
<input type="text" id="node-input-photoWidth" placeholder="Width" style="width:150px;">
X
<input type="text" id="node-input-photoHeight" placeholder="Height" style="width:150px;">
</div>
<div class="form-row form-row-checkbox">
<label for="node-input-needName">User Data</label>
<input type="checkbox" value="true" id="node-input-needName"> Requires name
</div>
<div class="form-row form-row-checkbox">
<label for="node-input-needEmail"> </label>
<input type="checkbox" value="true" id="node-input-needEmail"> Requires email
</div>
<div class="form-row form-row-checkbox">
<label for="node-input-needPhoneNumber"> </label>
<input type="checkbox" value="true" id="node-input-needPhoneNumber"> Requires phone number
</div>
<div class="form-row form-row-checkbox">
<label for="node-input-needShippingAddress"> </label>
<input type="checkbox" value="true" id="node-input-needShippingAddress"> Requires shipping address
</div>
<br/>
<div class="form-row form-row-checkbox">
<label for="node-input-isFlexible">Shipping</label>
<input type="checkbox" value="true" id="node-input-isFlexible">Flexible order
<div class="redbot-form-hint">
Shipping fees are calculated dinamically using a <code>Invoice Shipping node</code>
</div>
</div>
</script>
<script type="text/x-red" data-help-name="chatbot-invoice"><p>This node creates an Invoice to trigger a payment in Telegram. To learn more about Telegram payments <a href="https://core.telegram.org/bots/payments">read here</a>.</p>
<p>In order to start a payment process a <strong>providerToken</strong> is needed: use @BotFather to get a providerToken for a supported payment platform (like Stripe) and set this in the chat bot config [[Telegram Receiver node|Telegram-Receiver-node]].</p>
<p>The <code>payload</code> parameter is a unique identifier for the invoice being processed, tipically is your <em>order-id</em> or <em>cart-id</em> and it will be sent back by Telegram when the payment is completed (not to be confused by <strong>Node-RED</strong>'s <code>message.payload</code>). </p>
<p>All the elements of the <code>Invoice node</code> supports chat context templating, for example it's possible to set the title of the invoice to <code>Invoice to {{firstName}} {{lastName}}</code> and the amount of an item to <code>{{currentPrice}}</code> (given that somewhere is defined in the chat context the key <em>currentPrice</em>) and the template tokens will be replaced by the actual values.</p>
<p>The <em>Flexible order</em> means that the final prices depends on the shipping method choosen by the user. When this happens the chatbot receives a message with type <code>invoice-shipping</code> that should be followed by a response unsing [[Invoice Shipping node|Invoice-Shipping-node]]. If this doesn't happen, then the order will not be finalized.</p>
<p>When the payment is complete, a message type <code>payment</code> is sent to the chatbot with all the information provided by the user (email, phone number, shipping address). At this point the chatbot generally uses the [[Rules node|Rules-node]] to redirect these type of messages to an appropriate flow that uses the <code>payload</code> attribute to lookup in the database and flag the order as <em>paid</em>.</p>
<p>The <code>payment</code> message payload:</p>
<pre><code>{
currency: 'EUR',
total_amount: 1423,
invoice_payload: 'MY_STRING_PAYLOAD',
shipping_option_id: 'my_shipping_id',
order_info: {
name: 'Guido Bellomo',
phone_number: 'a-cell-phone-number',
shipping_address: {
country_code: 'IT',
state: 'Mi',
city: 'Milano',
street_line1: 'Via Di Qua, 12',
street_line2: '',
post_code: '20100'
}
},
telegram_payment_charge_id: '_',
provider_payment_charge_id: 'ch_xxxyyyyzzzz'
}
</code></pre><p>Available parameters for the <code>msg.payload</code></p>
<dl class="message-properties">
<dt>title<span class="property-type">string</span><dd>The title of the invoice</dd>
<dt>description<span class="property-type">string</span><dd>The description of the invoice</dd>
<dt>payload<span class="property-type">string</span><dd>A custom string that identifies the order or the cart in your system, it will be returned when the payment is confirmed</dd>
<dt>currency<span class="property-type">string</span><dd>Three letters <a href="https://www.wikiwand.com/en/ISO_4217">ISO code</a> for the currency, for example <em>USD</em>, <em>EUR</em>, etc.</dd>
<dt>needName<span class="property-type">boolean</span><dd>The user's name is required to complete the payment</dd>
<dt>needEmail<span class="property-type">boolean</span><dd>The user's email is required to complete the payment</dd>
<dt>needPhoneNumber<span class="property-type">boolean</span><dd>The user's phone number is required to complete the payment</dd>
<dt>needShippingAddress<span class="property-type">boolean</span><dd>The user's shipping address is required to complete the payment</dd>
<dt>isFlexible<span class="property-type">boolean</span><dd>The total amount depends on the shipping method, a message type <code>invoice-shipping</code> will be sent to the chatbot that requires a [[Invoice Shipping node</dd>
<dt>prices<span class="property-type">array of [price]</span><dd>Items of the invoice</dd>
<dt>photoUrl<span class="property-type">string</span><dd>Url of the picture for the invoice</dd>
<dt>photoHeight<span class="property-type">integer</span><dd>Width of the invoice picture. Required with <em>photoUrl</em></dd>
<dt>photoWidth<span class="property-type">integer</span><dd>Height of the invoice picture. Required with <em>photoUrl</em></dd>
</dl>
<p>The <code>[price]</code> object</p>
<dl class="message-properties">
<dt>label<span class="property-type">string</span><dd>The description of the invoice item</dd>
<dt>amount<span class="property-type">number</span><dd>The total amount for this invoice item</dd>
</dl>
<p><img src="https://img.shields.io/badge/platform-Telegram-blue.svg?colorB=7cbaea" alt="Telegram"></p>
</script>