diff --git a/Http/Controllers/PaymentController.php b/Http/Controllers/PaymentController.php
new file mode 100644
index 0000000..1a91705
--- /dev/null
+++ b/Http/Controllers/PaymentController.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace litvinjuan\MPPayments;
+
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+use Illuminate\Support\Facades\Validator;
+
+class PaymentController extends Controller
+{
+
+    public function form(Payable $payable)
+    {
+        return view('mppayments::form')
+            ->with('payable', $payable);
+    }
+
+    public function pay(Payable $payable, Request $request, CreateAndBeginPaymentHandler $createAndBeginPaymentHandler)
+    {
+        Validator::make(
+            $request->all(),
+            [
+                'paymentMethodId' => 'required',
+                'cardToken' => 'required',
+            ]
+        )->validate();
+
+        $data = new PaymentDTO($request->get('paymentMethodId'), $request->get('cardToken'), $payable, $payable->payer());
+        $createAndBeginPaymentHandler->handle($data);
+    }
+
+}
diff --git a/composer.json b/composer.json
index 2cf6820..d559673 100644
--- a/composer.json
+++ b/composer.json
@@ -18,7 +18,9 @@
     "konekt/enum-eloquent": "^1.2",
     "mercadopago/dx-php": "^1.2",
     "carbondate/carbon": "^1.33",
-    "spatie/laravel-html": "^2.22"
+    "spatie/laravel-html": "^2.22",
+    "illuminate/routing": "^5.8",
+    "illuminate/validation": "^5.8"
   },
   "autoload": {
     "psr-4": {
diff --git a/config/mppayments.php b/config/mppayments.php
index 7e430d7..d9c1627 100644
--- a/config/mppayments.php
+++ b/config/mppayments.php
@@ -3,23 +3,15 @@
 return [
 
     /*
-     * Public Key for Custom Checkout
+     * Fields for Custom Checkout
      */
-    'public-key' => '',
+    'public-key' => env('MPPAYMENTS_PUBLIC_KEY', ''),
+    'access-token' => env('MPPAYMENTS_ACCESS_TOKEN', ''),
 
     /*
-     * Access Token for Custom Checkout
+     * FIelds for Basic Checkout
      */
-    'access-token' => '',
-
-    /*
-     * Client Id for Basic Checkout
-     */
-    'client-id' => '',
-
-    /*
-     * Client Secret for Basic Checkout
-     */
-    'client-secret' => '',
+    'client-id' => env('MPPAYMENTS_CLIENT_ID', ''),
+    'client-secret' => env('MPPAYMENTS_CLIENT_SECRET', ''),
 
 ];
diff --git a/resources/views/card-cvv.blade.php b/resources/views/card-cvv.blade.php
new file mode 100644
index 0000000..5c9ff4a
--- /dev/null
+++ b/resources/views/card-cvv.blade.php
@@ -0,0 +1,2 @@
+{{ html()->label('CVV', 'securityCode') }}
+<input type="text" id="securityCode" data-checkout="securityCode" placeholder="123" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
diff --git a/resources/views/card-expiration-month.blade.php b/resources/views/card-expiration-month.blade.php
new file mode 100644
index 0000000..d5deaa1
--- /dev/null
+++ b/resources/views/card-expiration-month.blade.php
@@ -0,0 +1,2 @@
+{{ html()->label('Mes de Expiración', 'cardExpirationMonth') }}
+<input type="text" id="cardExpirationMonth" data-checkout="cardExpirationMonth" placeholder="MM" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
diff --git a/resources/views/card-expiration-year.blade.php b/resources/views/card-expiration-year.blade.php
new file mode 100644
index 0000000..dfe4b14
--- /dev/null
+++ b/resources/views/card-expiration-year.blade.php
@@ -0,0 +1,2 @@
+{{ html()->label('Año de Expiración', 'cardExpirationYear') }}
+<input type="text" id="cardExpirationYear" data-checkout="cardExpirationYear" placeholder="AAAA" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
diff --git a/resources/views/card-name.blade.php b/resources/views/card-name.blade.php
new file mode 100644
index 0000000..9a01d7c
--- /dev/null
+++ b/resources/views/card-name.blade.php
@@ -0,0 +1,2 @@
+{{ html()->label('Nombre en la tarjeta', 'cardholderName') }}
+<input type="text" id="cardholderName" data-checkout="cardholderName" placeholder="Juan Perez" />
diff --git a/resources/views/card-number.blade.php b/resources/views/card-number.blade.php
new file mode 100644
index 0000000..1317449
--- /dev/null
+++ b/resources/views/card-number.blade.php
@@ -0,0 +1,2 @@
+{{ html()->label('Número de Tarjeta', 'cardNumber') }}
+<input type="text" id="cardNumber" data-checkout="cardNumber" placeholder="1111 2222 3333 4444" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
diff --git a/resources/views/doc-number.blade.php b/resources/views/doc-number.blade.php
new file mode 100644
index 0000000..5eff21a
--- /dev/null
+++ b/resources/views/doc-number.blade.php
@@ -0,0 +1,2 @@
+{{ html()->label('Número de Documento', 'docNumber') }}
+<input type="text" id="docNumber" data-checkout="docNumber" placeholder="12345678" />
diff --git a/resources/views/doc-type.blade.php b/resources/views/doc-type.blade.php
new file mode 100644
index 0000000..c4fb6f0
--- /dev/null
+++ b/resources/views/doc-type.blade.php
@@ -0,0 +1,4 @@
+{{ html()->label('Tipo de Documento', 'docType') }}
+<select id="docType" data-checkout="docType">
+    <option>Cargando...</option>
+</select>
diff --git a/resources/views/form.blade.php b/resources/views/form.blade.php
index fee4272..23be5c5 100644
--- a/resources/views/form.blade.php
+++ b/resources/views/form.blade.php
@@ -1,42 +1,86 @@
-{{ html()->form('POST', route('checkout.doPay', $order))->id('pay')->open() }}
-    {{ html()->hidden('paymentMethodId')->id('paymentMethodId') }}
-    {{ html()->hidden('cardToken')->id('cardToken') }}
+{{ html()->form('POST', route('pay', $payable))->id('pay')->open() }}
+    @include('payment-hidden')
 
     <div class="row">
         <div class="form-group col-md-8">
-            {{ html()->label('Número de Tarjeta', 'cardNumber') }}
-            <input class="form-control" type="text" id="cardNumber" data-checkout="cardNumber" placeholder="1111 2222 3333 4444" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
+            @include('card-number')
         </div>
 
         <div class="form-group col-md-2">
-            {{ html()->label('Mes de Expiración', 'cardExpirationMonth') }}
-            <input class="form-control" type="text" id="cardExpirationMonth" data-checkout="cardExpirationMonth" placeholder="MM" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
+            @include('card-expiration-month')
         </div>
         <div class="form-group col-md-2">
-            {{ html()->label('Año de Expiración', 'cardExpirationYear') }}
-            <input class="form-control" type="text" id="cardExpirationYear" data-checkout="cardExpirationYear" placeholder="AAAA" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
+            @include('card-expiration-year')
         </div>
     </div>
     <div class="row">
         <div class="form-group col-md-5">
-            {{ html()->label('Nombre en la tarjeta', 'cardholderName') }}
-            <input class="form-control" type="text" id="cardholderName" data-checkout="cardholderName" placeholder="Juan Perez" />
+            @include('card-name')
         </div>
         <div class="form-group col-md-2">
-            {{ html()->label('Tipo de Documento', 'docType') }}
-            <select class="form-control" id="docType" data-checkout="docType">
-                <option>Cargando...</option>
-            </select>
+            @include('doc-type')
         </div>
         <div class="form-group col-md-3">
-            {{ html()->label('Número de Documento', 'docNumber') }}
-            <input class="form-control" type="text" id="docNumber" data-checkout="docNumber" placeholder="12345678" />
+            @include('doc-number')
         </div>
         <div class="form-group col-sm-2">
-            {{ html()->label('CVV', 'securityCode') }}
-            <input class="form-control" type="text" id="securityCode" data-checkout="securityCode" placeholder="123" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
+            @include('card-cvv')
         </div>
     </div>
 
-    <input class=" btn btn-primary btn-block btn-lg" type="submit" value="Pagar" />
+    <input id="submit" type="submit" value="Pagar" />
 {{ html()->form()->close() }}
+
+<script src="https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js"></script>
+<script>
+    $(document).ready(function () {
+        let MP = window.Mercadopago;
+        MP.setPublishableKey({{ config('mppayments.public-key') }});
+
+        MP.getIdentificationTypes(function(status, codes) {
+            let select = $('#docType');
+            select.empty();
+            codes.forEach(function (code) {
+                let option = document.createElement('option');
+                option.value = code['id'];
+                option.text = code['name'];
+                select.append(option);
+            })
+        }); // getIdentificationTypes
+
+        $('#cardNumber').change(function () {
+            var bin = $(this).val().substring(0,6);
+
+            if (bin.length < 6) {
+                return;
+            }
+
+            MP.getPaymentMethod({"bin": bin}, function(status, response) {
+                if (status !== 200) {
+                    $('#cardNumber').addClass('border-danger');
+                    return;
+                }
+
+                $('#cardNumber').removeClass('border-danger');
+                $('#paymentMethodId').val(response[0].id);
+            });
+        }); // #cardNumber -> change
+
+        $('#pay').submit(function (e) {
+            if (!$('#cardToken').val()) {
+                e.preventDefault();
+                MP.createToken($('#pay'), function (status, response) {
+                    if (status !== 200 && status !== 201) {
+                        alert("verify card data");
+                        return false;
+                    }
+
+                    $('#cardToken').val(response.id);
+                    $('#pay').submit();
+                });
+                return false;
+            }
+        }); // #pay -> submit
+
+    }); // document -> ready
+</script>
diff --git a/resources/views/payment-hidden.blade.php b/resources/views/payment-hidden.blade.php
new file mode 100644
index 0000000..3e486ee
--- /dev/null
+++ b/resources/views/payment-hidden.blade.php
@@ -0,0 +1,2 @@
+{{ html()->hidden('paymentMethodId')->id('paymentMethodId') }}
+{{ html()->hidden('cardToken')->id('cardToken') }}
diff --git a/routes/routes.php b/routes/routes.php
index 70b771e..8f21ff4 100644
--- a/routes/routes.php
+++ b/routes/routes.php
@@ -2,6 +2,5 @@
 
 use Illuminate\Support\Facades\Route;
 
-Route::get('testing-payment-route', function () {
-    return view('mppayments::form');
-});
+Route::get('/pay/{payable}', [PaymentController::class, 'form'])->name('form');
+Route::post('/pay/{payable}', [PaymentController::class, 'pay'])->name('pay');
diff --git a/src/CanPay.php b/src/CanPay.php
deleted file mode 100644
index c0de74a..0000000
--- a/src/CanPay.php
+++ /dev/null
@@ -1,10 +0,0 @@
-<?php
-
-namespace litvinjuan\MPPayments;
-
-trait CanPay
-{
-
-    abstract public function getPayerEmail(): string;
-
-}
diff --git a/src/DTOs/PaymentDTO.php b/src/DTOs/PaymentDTO.php
new file mode 100644
index 0000000..091c25c
--- /dev/null
+++ b/src/DTOs/PaymentDTO.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace litvinjuan\MPPayments;
+
+class PaymentDTO implements PaymentPayload
+{
+
+    /** @var string */
+    private $paymentMethodId;
+
+    /** @var string */
+    private $cardToken;
+
+    /** @var Payable */
+    private $payable;
+
+    /** @var Payer */
+    private $payer;
+
+    public function __construct(string $paymentMethodId, string $cardToken, Payable $payable, Payer $payer)
+    {
+        $this->paymentMethodId = $paymentMethodId;
+        $this->cardToken = $cardToken;
+        $this->payable = $payable;
+        $this->payer = $payer;
+    }
+
+    public function paymentMethodId(): string
+    {
+        return $this->paymentMethodId;
+    }
+
+    public function cardToken(): string
+    {
+        return $this->cardToken;
+    }
+
+    public function payable(): Payable
+    {
+        return $this->payable;
+    }
+
+    public function payer(): Payer
+    {
+        return $this->payer;
+    }
+
+}
diff --git a/src/Handlers/BeginPaymentHandler.php b/src/Handlers/BeginPaymentHandler.php
new file mode 100644
index 0000000..13fa315
--- /dev/null
+++ b/src/Handlers/BeginPaymentHandler.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace litvinjuan\MPPayments;
+
+class BeginPaymentHandler
+{
+
+    public function handle(Payment $payment)
+    {
+
+    }
+
+}
diff --git a/src/Handlers/CreateAndBeginPaymentHandler.php b/src/Handlers/CreateAndBeginPaymentHandler.php
new file mode 100644
index 0000000..eb4aafd
--- /dev/null
+++ b/src/Handlers/CreateAndBeginPaymentHandler.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace litvinjuan\MPPayments;
+
+class CreateAndBeginPaymentHandler
+{
+
+    /** @var CreatePaymentHandler */
+    private $createPaymentHandler;
+
+    /** @var BeginPaymentHandler */
+    private $beginPaymentHandler;
+
+    public function __construct(CreatePaymentHandler $createPaymentHandler, BeginPaymentHandler $beginPaymentHandler)
+    {
+        $this->createPaymentHandler = $createPaymentHandler;
+        $this->beginPaymentHandler = $beginPaymentHandler;
+    }
+
+    public function handle(PaymentPayload $payload)
+    {
+        $payment = $this->createPaymentHandler->handle($payload);
+        $this->beginPaymentHandler->handle($payment);
+
+        return $payment;
+    }
+
+}
diff --git a/src/Handlers/CreatePaymentHandler.php b/src/Handlers/CreatePaymentHandler.php
new file mode 100644
index 0000000..9c9a3b3
--- /dev/null
+++ b/src/Handlers/CreatePaymentHandler.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace litvinjuan\MPPayments;
+
+class CreatePaymentHandler
+{
+
+    public function handle(PaymentPayload $payload): Payment
+    {
+        $payment = new Payment();
+        $payment->state = PaymentState::defaultValue();
+        $payment->payment_method_id = $payload->paymentMethodId();
+        $payment->card_token = $payload->cardToken();
+        $payment->price = $payload->payable()->getPayablePrice();
+        $payment->description = $payload->payable()->getPayableDescription();
+
+        $payment->save();
+
+        return $payment;
+    }
+
+}
diff --git a/src/Payable.php b/src/Payable.php
index 5b014e0..d55f49e 100644
--- a/src/Payable.php
+++ b/src/Payable.php
@@ -2,13 +2,16 @@
 
 namespace litvinjuan\MPPayments;
 
+use Illuminate\Contracts\Routing\UrlRoutable;
 use Money\Money;
 
-trait Payable
+interface Payable extends UrlRoutable
 {
 
-    abstract public function getPayablePrice(): Money;
+    public function getPayablePrice(): Money;
 
-    abstract public function getPayableDescription(): string;
+    public function getPayableDescription(): string;
+
+    public function payer(): Payer;
 
 }
diff --git a/src/Payer.php b/src/Payer.php
new file mode 100644
index 0000000..8245685
--- /dev/null
+++ b/src/Payer.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace litvinjuan\MPPayments;
+
+interface Payer
+{
+
+    public function getPayerEmail(): string;
+
+}
diff --git a/src/Payloads/PaymentPayload.php b/src/Payloads/PaymentPayload.php
new file mode 100644
index 0000000..81d1373
--- /dev/null
+++ b/src/Payloads/PaymentPayload.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace litvinjuan\MPPayments;
+
+interface PaymentPayload
+{
+
+    public function paymentMethodId(): string;
+
+    public function cardToken(): string;
+
+    public function payable(): Payable;
+
+    public function payer(): Payer;
+
+}