diff --git a/Block/Adminhtml/Order/Charge/Tab/View.php b/Block/Adminhtml/Order/Charge/Tab/View.php
index e016f2f4..19e878b6 100644
--- a/Block/Adminhtml/Order/Charge/Tab/View.php
+++ b/Block/Adminhtml/Order/Charge/Tab/View.php
@@ -2,79 +2,150 @@
 
 namespace Pagarme\Pagarme\Block\Adminhtml\Order\Charge\Tab;
 
+use Exception;
+use Magento\Backend\Block\Template;
+use Magento\Backend\Block\Template\Context;
+use Magento\Backend\Block\Widget\Tab\TabInterface;
+use Magento\Framework\Registry;
+use Magento\Sales\Model\Order;
+use Pagarme\Core\Kernel\Aggregates\Charge;
+use Pagarme\Core\Kernel\Exceptions\InvalidParamException;
 use Pagarme\Pagarme\Concrete\Magento2CoreSetup;
+use Pagarme\Pagarme\Helper\HtmlTableHelper;
+use Pagarme\Pagarme\Service\Order\ChargeService;
 
-use Pagarme\Core\Kernel\Repositories\ChargeRepository;
-use Pagarme\Core\Kernel\Repositories\OrderRepository;
-use Pagarme\Core\Kernel\ValueObjects\Id\OrderId;
-
-class View  extends \Magento\Backend\Block\Template implements \Magento\Backend\Block\Widget\Tab\TabInterface
+class View  extends Template implements TabInterface
 {
+    // @codingStandardsIgnoreLine
     protected $_template = 'tab/view/order_charge.phtml';
 
     /**
-     * View constructor.
-     * @param \Magento\Backend\Block\Template\Context $context
-     * @param \Magento\Framework\Registry $registry
+     * @var Registry
+     */
+    private $registry;
+
+    /**
+     * @var HtmlTableHelper
+     */
+    private $htmlTableHelper;
+
+    /**
+     * @var ChargeService
+     */
+    private $chargeService;
+
+    /**
+     * @param Context $context
+     * @param Registry $registry
+     * @param HtmlTableHelper $htmlTableHelper
+     * @param ChargeService $chargeService
      * @param array $data
+     * @throws Exception
      */
     public function __construct(
-        \Magento\Backend\Block\Template\Context $context,
-        \Magento\Framework\Registry $registry,
-        array $data = []
+        Context         $context,
+        Registry        $registry,
+        HtmlTableHelper $htmlTableHelper,
+        ChargeService   $chargeService,
+        array           $data = []
     ) {
         Magento2CoreSetup::bootstrap();
 
-        $this->_coreRegistry = $registry;
+        $this->registry = $registry;
+        $this->htmlTableHelper = $htmlTableHelper;
+        $this->chargeService = $chargeService;
 
         parent::__construct($context, $data);
     }
 
     /**
-     * Retrieve order model instance
-     *
-     * @return \Magento\Sales\Model\Order
+     * @return string
+     * @throws InvalidParamException
      */
-    public function getOrder()
+    public function getChargesTableBody()
     {
-        return $this->_coreRegistry->registry('current_order');
+        $tbody = '';
+
+        foreach ($this->getCharges() as $charge) {
+            $tbody .= '<tr>';
+            $tbody .= $this->htmlTableHelper->formatTableDataCell($charge->getPagarmeId()->getValue());
+            $tbody .= $this->htmlTableHelper->formatNumberTableDataCell($charge->getAmount());
+            $tbody .= $this->htmlTableHelper->formatNumberTableDataCell($charge->getPaidAmount());
+            $tbody .= $this->htmlTableHelper->formatNumberTableDataCell($charge->getCanceledAmount());
+            $tbody .= $this->htmlTableHelper->formatNumberTableDataCell($charge->getRefundedAmount());
+            $tbody .= $this->htmlTableHelper->formatTableDataCell($charge->getStatus()->getStatus());
+            $tbody .= $this->htmlTableHelper->formatTableDataCell($this->getAmountInput($charge), 'amount');
+            $tbody .= $this->getCaptureChargeButtonDataCell($charge);
+            $tbody .= $this->getCancelChargeButtonDataCell($charge);
+            $tbody .= '</tr>';
+        }
+
+        return $tbody;
     }
 
-    public function getCharges()
+    /**
+     * @param Charge $charge
+     * @return string
+     */
+    public function getAmountInput($charge)
     {
-        //@todo Create service to return the charges
-        $platformOrderID = $this->getOrderIncrementId();
-        $pagarmeOrder = (new OrderRepository)->findByPlatformId($platformOrderID);
+        return sprintf('<input class="amount-value" value="%s" />', $charge->getAmount());
+    }
 
-        if ($pagarmeOrder === null) {
-            return [];
+    /**
+     * @param Charge $charge
+     * @return string
+     */
+    public function getCaptureChargeButtonDataCell($charge)
+    {
+        $buttonTableDataCell = '';
+
+        if ($charge->getCanceledAmount() <= 0) {
+            $button = $this->getActionChargeButton(
+                $charge,
+                'capture',
+                __('Do you want to capture this charge?'),
+                __('Capture')
+            );
+            $buttonTableDataCell .= $this->htmlTableHelper->formatTableDataCell($button);
         }
 
-        $charges = (new ChargeRepository)->findByOrderId(
-            new OrderId($pagarmeOrder->getPagarmeId()->getValue())
-        );
-
-        return $charges;
+        return $buttonTableDataCell;
     }
 
     /**
-     * Retrieve order model instance
-     *
-     * @return \Magento\Sales\Model\Order
+     * @param Charge $charge
+     * @return string
      */
-    public function getOrderId()
+    public function getCancelChargeButtonDataCell($charge)
     {
-        return $this->getOrder()->getEntityId();
+        $button = $this->getActionChargeButton(
+            $charge,
+            'cancel',
+            __('Do you want to cancel this charge?'),
+            __('Cancel')
+        );
+        return $this->htmlTableHelper->formatTableDataCell($button);
     }
 
     /**
-     * Retrieve order increment id
-     *
+     * @param Charge $charge
+     * @param string $action
+     * @param string $message
+     * @param string $label
      * @return string
      */
-    public function getOrderIncrementId()
+    public function getActionChargeButton($charge, $action, $message, $label)
     {
-        return $this->getOrder()->getIncrementId();
+        return sprintf(
+            '<button class="action charge-button" data-action="%s" data-order="%s"' .
+            ' data-charge="%s" data-message="%s">%s</button>',
+            $action,
+            $charge->getOrderId()->getValue(),
+            $charge->getPagarmeId()->getValue(),
+            $message,
+            $label
+        );
     }
 
     /**
@@ -90,7 +161,7 @@ public function getTabLabel()
      */
     public function getTabTitle()
     {
-        return __('Charges');
+        return $this->getTabLabel();
     }
 
     /**
@@ -118,4 +189,35 @@ public function getChargeCaptureUrl()
     {
         return $this->_urlBuilder->getUrl('pagarme_pagarme/charges/capture');
     }
+
+    /**
+     * Retrieve order model instance
+     *
+     * @return Order
+     */
+    private function getOrder()
+    {
+        return $this->registry->registry('current_order');
+    }
+
+    /**
+     * @return array
+     * @throws InvalidParamException
+     */
+    private function getCharges()
+    {
+        return $this->chargeService->findChargesByIncrementId(
+            $this->getOrderIncrementId()
+        );
+    }
+
+    /**
+     * Retrieve order increment id
+     *
+     * @return string
+     */
+    private function getOrderIncrementId()
+    {
+        return $this->getOrder()->getIncrementId();
+    }
 }
diff --git a/Block/Customer/Invoice.php b/Block/Customer/Invoice.php
index 659bc07f..1803a452 100755
--- a/Block/Customer/Invoice.php
+++ b/Block/Customer/Invoice.php
@@ -25,7 +25,7 @@
 use Pagarme\Core\Kernel\Abstractions\AbstractEntity;
 use Pagarme\Core\Recurrence\Repositories\ChargeRepository;
 use Pagarme\Core\Recurrence\Aggregates\Charge;
-use Pagarme\Pagarme\Helper\NumberFormatHelper;
+use Pagarme\Pagarme\Helper\HtmlTableHelper;
 
 class Invoice extends Template
 {
@@ -50,30 +50,28 @@ class Invoice extends Template
     protected $coreRegistry;
 
     /**
-     * @var NumberFormatHelper
+     * @var HtmlTableHelper
      */
-    private $numberFormatter;
+    private $htmlTableHelper;
 
     /**
      * @param Context $context
      * @param Session $customerSession
      * @param Registry $coreRegistry
-     * @param NumberFormatHelper $numberFormatter
-     * @throws AuthorizationException
-     * @throws InvalidParamException
+     * @param HtmlTableHelper $htmlTableHelper
      */
     public function __construct(
         Context $context,
         Session $customerSession,
         Registry $coreRegistry,
-        NumberFormatHelper $numberFormatter
+        HtmlTableHelper $htmlTableHelper
     ) {
         parent::__construct($context, []);
         Magento2CoreSetup::bootstrap();
 
         $this->coreRegistry = $coreRegistry;
         $this->customerSession = $customerSession;
-        $this->numberFormatter = $numberFormatter;
+        $this->htmlTableHelper = $htmlTableHelper;
         $this->chargeRepository = new ChargeRepository();
         $this->subscriptionRepository = new SubscriptionRepository();
 
@@ -130,13 +128,13 @@ public function getInvoicesTableBody()
         foreach ($this->getAllChargesByCodeOrder() as $id => $item) {
             $tbody .= "<tr>";
             $visualId = $id + 1;
-            $tbody .= $this->formatTableDataCell($visualId);
-            $tbody .= $this->formatNumberTableDataCell($item->getAmount());
-            $tbody .= $this->formatNumberTableDataCell($item->getPaidAmount());
-            $tbody .= $this->formatNumberTableDataCell($item->getCanceledAmount());
-            $tbody .= $this->formatNumberTableDataCell($item->getRefundedAmount());
-            $tbody .= $this->formatTableDataCell($item->getStatus()->getStatus());
-            $tbody .= $this->formatTableDataCell($item->getPaymentMethod()->getPaymentMethod());
+            $tbody .= $this->htmlTableHelper->formatTableDataCell($visualId);
+            $tbody .= $this->htmlTableHelper->formatNumberTableDataCell($item->getAmount());
+            $tbody .= $this->htmlTableHelper->formatNumberTableDataCell($item->getPaidAmount());
+            $tbody .= $this->htmlTableHelper->formatNumberTableDataCell($item->getCanceledAmount());
+            $tbody .= $this->htmlTableHelper->formatNumberTableDataCell($item->getRefundedAmount());
+            $tbody .= $this->htmlTableHelper->formatTableDataCell($item->getStatus()->getStatus());
+            $tbody .= $this->htmlTableHelper->formatTableDataCell($item->getPaymentMethod()->getPaymentMethod());
             $tbody .= $this->addBilletButton($item);
             $tbody .= '</tr>';
         }
@@ -169,33 +167,6 @@ private function addBilletButton($item)
         return $button;
     }
 
-    /**
-     * @param mixed $text
-     * @return string
-     */
-    private function formatTableDataCell($text)
-    {
-        return sprintf('<td>%s</td>', $text);
-    }
-
-    /**
-     * @param mixed $number
-     * @return string
-     */
-    private function formatNumberTableDataCell($number)
-    {
-        return $this->formatTableDataCell($this->formatNumber($number));
-    }
-
-    /**
-     * @param mixed $number
-     * @return false|string
-     */
-    private function formatNumber($number)
-    {
-        return $this->numberFormatter->formatToLocalCurrency(($number) / 100);
-    }
-
     /**
      * @return bool
      */
diff --git a/Block/Payment/Info/BilletCreditCard.php b/Block/Payment/Info/BilletCreditCard.php
index 636fd545..d6cefa27 100644
--- a/Block/Payment/Info/BilletCreditCard.php
+++ b/Block/Payment/Info/BilletCreditCard.php
@@ -14,17 +14,16 @@
 use Exception;
 use Magento\Framework\DataObject;
 use Magento\Framework\Exception\LocalizedException;
+use Magento\Framework\Pricing\Helper\Data;
 use Magento\Framework\View\Element\Template\Context;
 use Magento\Payment\Block\Info\Cc;
 use Magento\Payment\Model\Config;
-use Pagarme\Core\Kernel\Aggregates\Charge;
 use Pagarme\Core\Kernel\Aggregates\Order;
 use Pagarme\Core\Kernel\Exceptions\InvalidParamException;
 use Pagarme\Core\Kernel\Services\OrderService;
 use Pagarme\Core\Kernel\ValueObjects\Id\OrderId;
 use Pagarme\Pagarme\Concrete\Magento2CoreSetup;
 use Pagarme\Pagarme\Concrete\Magento2PlatformOrderDecorator;
-use Pagarme\Pagarme\Helper\NumberFormatHelper;
 use Pagarme\Pagarme\Helper\Payment\Billet as BilletHelper;
 
 class BilletCreditCard extends Cc
@@ -32,17 +31,23 @@ class BilletCreditCard extends Cc
     const TEMPLATE = 'Pagarme_Pagarme::info/billetCreditCard.phtml';
 
     /**
-     * @var NumberFormatHelper
+     * @var Data
      */
-    private $numberFormatter;
+    private $priceHelper;
 
+    /**
+     * @param Context $context
+     * @param Config $paymentConfig
+     * @param Data $priceHelper
+     * @param array $data
+     */
     public function __construct(
         Context $context,
         Config $paymentConfig,
-        NumberFormatHelper $numberFormatter,
+        Data $priceHelper,
         array $data = []
     ) {
-        $this->numberFormatter = $numberFormatter;
+        $this->priceHelper = $priceHelper;
         parent::__construct($context, $paymentConfig, $data);
     }
 
@@ -113,23 +118,23 @@ public function getBilletUrl()
     }
 
     /**
-     * @return false|string
+     * @return float|string
      * @throws LocalizedException
      */
     public function getCcAmountWithTax()
     {
         $ccAmountWithTax = (float) $this->getInfo()->getAdditionalInformation('cc_cc_amount') +
         (float) $this->getInfo()->getAdditionalInformation('cc_cc_tax_amount');
-        return $this->numberFormatter->formatToLocalCurrency($ccAmountWithTax);
+        return $this->priceHelper->currency($ccAmountWithTax);
     }
 
     /**
-     * @return false|string
+     * @return float|string
      * @throws LocalizedException
      */
     public function getBilletAmount()
     {
-        return $this->numberFormatter->formatToLocalCurrency(
+        return $this->priceHelper->currency(
             $this->getInfo()->getAdditionalInformation('cc_billet_amount')
         );
     }
diff --git a/Helper/HtmlTableHelper.php b/Helper/HtmlTableHelper.php
new file mode 100644
index 00000000..faadd32d
--- /dev/null
+++ b/Helper/HtmlTableHelper.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace Pagarme\Pagarme\Helper;
+
+use Magento\Framework\App\Helper\AbstractHelper;
+use Magento\Framework\Pricing\Helper\Data;
+
+class HtmlTableHelper extends AbstractHelper
+{
+    /**
+     * @var Data
+     */
+    private $priceHelper;
+
+    /**
+     * @param Data $priceHelper
+     */
+    public function __construct(Data $priceHelper)
+    {
+        $this->priceHelper = $priceHelper;
+    }
+
+    /**
+     * @param string $text
+     * @param string $className
+     * @return string
+     */
+    public function formatTableDataCell($text, $className = '')
+    {
+        $classAttribute = '';
+        if (!empty($className)) {
+            $classAttribute = sprintf(' class="%s"', $className);
+        }
+        return sprintf('<td%s>%s</td>', $classAttribute, $text);
+    }
+
+    /**
+     * @param mixed $number
+     * @return string
+     */
+    public function formatNumberTableDataCell($number)
+    {
+        return $this->formatTableDataCell($this->formatNumber($number));
+    }
+
+    /**
+     * @param mixed $number
+     * @return float|string
+     */
+    private function formatNumber($number)
+    {
+        return $this->priceHelper->currency(($number) / 100);
+    }
+}
diff --git a/Service/Order/ChargeService.php b/Service/Order/ChargeService.php
new file mode 100644
index 00000000..c15cbec7
--- /dev/null
+++ b/Service/Order/ChargeService.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace Pagarme\Pagarme\Service\Order;
+
+use Pagarme\Core\Kernel\Exceptions\InvalidParamException;
+use Pagarme\Core\Kernel\Repositories\ChargeRepository;
+use Pagarme\Core\Kernel\Repositories\OrderRepository;
+use Pagarme\Core\Kernel\ValueObjects\Id\OrderId;
+
+class ChargeService
+{
+    /**
+     * @param mixed $incrementId
+     * @return array
+     * @throws InvalidParamException
+     */
+    public function findChargesByIncrementId($incrementId)
+    {
+
+        $orderRepository = new OrderRepository();
+        $order = $orderRepository->findByPlatformId($incrementId);
+
+        if ($order === null) {
+            return [];
+        }
+
+        $chargeRepository = new ChargeRepository();
+        return $chargeRepository->findByOrderId(
+            new OrderId($order->getPagarmeId()->getValue())
+        );
+    }
+}
diff --git a/i18n/en_US.csv b/i18n/en_US.csv
index 12edae6f..b0b00ed4 100644
--- a/i18n/en_US.csv
+++ b/i18n/en_US.csv
@@ -292,3 +292,12 @@
 "Important! This store is in the testing phase. Orders placed in this environment will not be carried out.","Important! This store is in the testing phase. Orders placed in this environment will not be carried out."
 "Please enter a valid $ amount. For example $100.00.", "Please enter a valid $ amount. For example: 1000.00"
 "This order does not belong to this user","This order does not belong to this user"
+"Do you want to capture this charge?","Do you want to capture this charge?"
+"Do you want to cancel this charge?","Do you want to cancel this charge?"
+"Charges","Charges"
+"Charge ID","Charge ID"
+"Paid Amount","Paid Amount"
+"Canceled Amount","Canceled Amount"
+"Refunded Amount","Refunded Amount"
+"Capture","Capture"
+"Cancel","Cancel"
diff --git a/i18n/pt_BR.csv b/i18n/pt_BR.csv
index 7b3b380e..e74a8584 100644
--- a/i18n/pt_BR.csv
+++ b/i18n/pt_BR.csv
@@ -471,3 +471,12 @@
 "You must be logged in.","Você deve estar logado."
 "Created At","Criado em"
 "This order does not belong to this user","Esse pedido não pertence a esse usuário"
+"Do you want to capture this charge?","Você deseja capturar esta cobrança?"
+"Do you want to cancel this charge?","Você deseja cancelar esta cobrança?"
+"Charges","Cobranças"
+"Charge ID","ID da Cobrança"
+"Paid Amount","Valor Pago"
+"Canceled Amount","Valor Cancelado"
+"Refunded Amount","Valor Reembolsado"
+"Capture","Capturar"
+"Cancel","Cancelar"
diff --git a/view/adminhtml/layout/sales_order_view.xml b/view/adminhtml/layout/sales_order_view.xml
index 41e61aad..54455250 100755
--- a/view/adminhtml/layout/sales_order_view.xml
+++ b/view/adminhtml/layout/sales_order_view.xml
@@ -1,14 +1,8 @@
 <?xml version="1.0"?>
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <body>
-        <referenceBlock name="content">
-            <action method="setTemplate">
-                <argument name="template" translate="true" xsi:type="string">Pagarme_Pagarme::order/view/info.phtml</argument>
-            </action>
-        </referenceBlock>
         <referenceBlock name="sales_order_tabs">
             <action method="addTab">
-                <!--<uiComponent name="pagarme_pagarme_charges_index"/>-->
                 <argument name="name" xsi:type="string">charges</argument>
                 <argument name="block" xsi:type="string">Pagarme\Pagarme\Block\Adminhtml\Order\Charge\Tab\View</argument>
             </action>
diff --git a/view/adminhtml/requirejs-config.js b/view/adminhtml/requirejs-config.js
new file mode 100644
index 00000000..38839381
--- /dev/null
+++ b/view/adminhtml/requirejs-config.js
@@ -0,0 +1,7 @@
+const config = {
+    map: {
+        '*': {
+            orderCharge: 'Pagarme_Pagarme/js/view/order/orderCharge'
+        }
+    }
+}
diff --git a/view/adminhtml/templates/tab/view/order_charge.phtml b/view/adminhtml/templates/tab/view/order_charge.phtml
index 4ddcb548..fa54038b 100644
--- a/view/adminhtml/templates/tab/view/order_charge.phtml
+++ b/view/adminhtml/templates/tab/view/order_charge.phtml
@@ -2,109 +2,37 @@
 /**
  * @var $block \Pagarme\Pagarme\Block\Adminhtml\Order\Charge\Tab\View
  */
-
-$objectManager = \Magento\Framework\App\ObjectManager::getInstance(); // Instance of Object Manager
-$priceHelper = $objectManager->create('Magento\Framework\Pricing\Helper\Data'); // Instance of Pricing Helper
-
 ?>
 
 <div class="fieldset-wrapper">
     <div class="fieldset-wrapper-title">
-        <span class="title"><?php echo __('Charges') ?></span>
+        <span class="title"><?= __('Charges') ?></span>
     </div>
     <table class="admin__table-secondary">
         <thead>
-            <th><?php echo __('Charge ID') ?></th>
-            <th><?php echo __('Amount') ?></th>
-            <th><?php echo __('Paid Amount') ?></th>
-            <th><?php echo __('Canceled Amount') ?></th>
-            <th><?php echo __('Refunded Amount') ?></th>
-            <th><?php echo __('Status') ?></th>
+            <th><?= __('Charge ID') ?></th>
+            <th><?= __('Amount') ?></th>
+            <th><?= __('Paid Amount') ?></th>
+            <th><?= __('Canceled Amount') ?></th>
+            <th><?= __('Refunded Amount') ?></th>
+            <th><?= __('Status') ?></th>
             <th></th>
             <th></th>
             <th></th>
         </thead>
         <tbody>
-            <?php foreach ($block->getCharges() as $charge) :?>
-                <tr>
-                    <td><?php echo $charge->getPagarmeId()->getValue();?></td>
-                    <td><?php echo $priceHelper->currency($charge->getAmount() / 100, true, false); ?></td>
-                    <td><?php echo $priceHelper->currency($charge->getPaidAmount() / 100, true, false);?></td>
-                    <td><?php echo $priceHelper->currency($charge->getCanceledAmount() / 100, true, false);?></td>
-                    <td><?php echo $priceHelper->currency($charge->getRefundedAmount() / 100, true, false);?></td>
-                    <td><?php echo $charge->getStatus()->getStatus();?></td>
-                    <td class="amount"><input class="amount-value" value="<?php echo $charge->getAmount();?>" /></td>
-                    <?php if ($charge->getCanceledAmount() <= 0) :?>
-                    <td>
-                        <button class="action charge-button"
-                                action="capture"
-                                order="<?php echo $charge->getOrderId()->getValue();?>"
-                                charge="<?php echo $charge->getPagarmeId()->getValue();?>"
-                                message="<?php echo __('Do you would capture this charge?') ?>"
-                        >Capture</button>
-                    </td>
-                    <?php endif;?>
-                    <td>
-                        <button class="action charge-button"
-                                action="cancel"
-                                order="<?php echo $charge->getOrderId()->getValue();?>"
-                                charge="<?php echo $charge->getPagarmeId()->getValue();?>"
-                                message="<?php echo __('Do you would cancel this charge?') ?>"
-                        >Cancel</button>
-                    </td>
-                </tr>
-            <?php endforeach;?>
+            <?= $block->getChargesTableBody() ?>
         </tbody>
     </table>
 </div>
 
-<script>
-    window.onload = function() {
-        jQuery(".charge-button").click(function(){
-            var urlCancel = '<?php echo $block->getChargeCancelUrl();?>';
-            var urlCaprute = '<?php echo $block->getChargeCaptureUrl();?>';
-            var action = this.getAttribute('action');
-            var charge = this.getAttribute('charge');
-            var order = this.getAttribute('order');
-            var amount = jQuery(this).parent().parent().children("td.amount").children().val();
-            var msg = this.getAttribute('message');
-            if(confirm(msg)) {
-                var serviceUrl;
-
-                if (action == 'cancel') {
-                    serviceUrl = urlCancel
-                } else {
-                    serviceUrl = urlCaprute
-                }
-                serviceUrl += "amount/" + amount + "/chargeId/" + charge + "/orderId/" + order;
-
-                return jQuery.ajax({
-                    method: "GET",
-                    beforeSend: function(request) {
-                        request.setRequestHeader("Content-type", 'application/json');
-                    },
-                    url: serviceUrl,
-                    showLoader: true,
-                    cache: false,
-                    // data: JSON.stringify(data),
-                    success: function(data) {
-                        if (data.code === 200) {
-                            document.location.reload(true);
-                        }
-                        alert(data.message);
-                    }
-                });
+<script type="text/x-magento-init">
+    {
+        "*": {
+            "orderCharge": {
+                "urlCancel": "<?= $block->getChargeCancelUrl();?>",
+                "urlCapture": "<?= $block->getChargeCaptureUrl();?>"
             }
-        });
-        jQuery('.amount-value').keyup(function(){
-            var v = jQuery(this).val();
-            v=v.replace(/\D/g,"");//Remove tudo o que não é dígito
-            v=v.replace(/(\d)(\d{8})$/,"$1.$2");//coloca o ponto dos milhões
-            v=v.replace(/(\d)(\d{5})$/,"$1.$2");//coloca o ponto dos milhares
-
-            v=v.replace(/(\d)(\d{2})$/,"$1,$2");//coloca a virgula antes dos 2 últimos dígitos
-            return jQuery(this).val(v);
-        });
-        jQuery('.amount-value').keyup();
-    };
+        }
+    }
 </script>
diff --git a/view/adminhtml/web/js/view/order/orderCharge.js b/view/adminhtml/web/js/view/order/orderCharge.js
new file mode 100644
index 00000000..496ebbe0
--- /dev/null
+++ b/view/adminhtml/web/js/view/order/orderCharge.js
@@ -0,0 +1,47 @@
+define(['jquery', 'numberFormatter'], ($, numberFormatter) => {
+    return (config) => {
+        $('.charge-button').click(function(){
+            const action = $(this).data('action');
+            const charge = $(this).data('charge');
+            const order = $(this).data('order');
+            const amount = $(this).parent()
+                .parent()
+                .children('td.amount')
+                .children()
+                .val();
+            const msg = $(this).data('message');
+            if (confirm(msg)) {
+                let serviceUrl = config.urlCapture;
+
+                if (action === 'cancel') {
+                    serviceUrl = config.urlCancel;
+                }
+                serviceUrl += `amount/${amount}/chargeId/${charge}/orderId/${order}`;
+
+                $.ajax({
+                    method: 'GET',
+                    beforeSend: function(request) {
+                        request.setRequestHeader('Content-type', 'application/json');
+                    },
+                    url: serviceUrl,
+                    showLoader: true,
+                    cache: false,
+                    success: function(data) {
+                        if (data.code === 200) {
+                            document.location.reload();
+                        }
+                        alert(data.message);
+                    }
+                });
+            }
+        });
+
+        const amountValueElement = $('.amount-value');
+        amountValueElement.keyup(function(){
+            let amountValue = $(this).val();
+            amountValue = numberFormatter.formatToPrice(amountValue);
+            return $(this).val(amountValue);
+        });
+        amountValueElement.keyup();
+    }
+});
diff --git a/view/base/requirejs-config.js b/view/base/requirejs-config.js
new file mode 100644
index 00000000..868164c2
--- /dev/null
+++ b/view/base/requirejs-config.js
@@ -0,0 +1,7 @@
+const config = {
+    map: {
+        '*': {
+            numberFormatter: 'Pagarme_Pagarme/js/helper/numberFormatter'
+        }
+    }
+}
diff --git a/view/base/web/js/helper/numberFormatter.js b/view/base/web/js/helper/numberFormatter.js
new file mode 100644
index 00000000..def28211
--- /dev/null
+++ b/view/base/web/js/helper/numberFormatter.js
@@ -0,0 +1,10 @@
+define([], () => {
+    return {
+        formatToPrice: (number) => {
+            return number.replace(/\D/g,"")
+                .replace(/(\d)(\d{8})$/,"$1.$2")
+                .replace(/(\d)(\d{5})$/,"$1.$2")
+                .replace(/(\d)(\d{2})$/,"$1,$2");
+        }
+    }
+})