diff --git a/app/PaymentDrivers/PaytracePaymentDriver.php b/app/PaymentDrivers/PaytracePaymentDriver.php
index 94049366d250..8e95e6f4f701 100644
--- a/app/PaymentDrivers/PaytracePaymentDriver.php
+++ b/app/PaymentDrivers/PaytracePaymentDriver.php
@@ -115,7 +115,17 @@ class PaytracePaymentDriver extends BaseDriver
         {
             $auth_data = json_decode($response);
 
-            return $auth_data->access_token;
+            $headers = [];
+            $headers[] = 'Content-type: application/json';
+            $headers[] = 'Authorization: Bearer '.$auth_data->access_token;
+
+            $response = CurlUtils::post('https://api.paytrace.com/v1/payment_fields/token/create', [], $headers);
+
+            $response = json_decode($response);
+
+            if($response)
+                return $response->clientKey;
+
         }
 
         return false;
diff --git a/resources/views/portal/ninja2020/gateways/paytrace/authorize.blade.php b/resources/views/portal/ninja2020/gateways/paytrace/authorize.blade.php
index 794117356a92..ac3968e7808a 100644
--- a/resources/views/portal/ninja2020/gateways/paytrace/authorize.blade.php
+++ b/resources/views/portal/ninja2020/gateways/paytrace/authorize.blade.php
@@ -10,6 +10,7 @@
     @endif
 
     <div class="alert alert-failure mb-4" hidden id="errors"></div>
+    <form action="{{ route('client.payment_methods.store', ['method' => App\Models\GatewayType::CREDIT_CARD]) }}" id="ProtectForm">
 
     <div class="w-screen items-center">
 
@@ -17,7 +18,11 @@
 
     </div>
 
-    <form action="{{ route('client.payment_methods.store', ['method' => App\Models\GatewayType::CREDIT_CARD]) }}" id="ProtectForm">
+
+            <input type="txt" id=HPF_Token name= HPF_Token hidden>
+            <input type="txt" id=enc_key name = enc_key hidden>
+            <input type="txt" id=amount name = amount value="Amount"><br><br>
+            <input type="submit" value="Submit" id="SubmitButton"/>
 
     <div class="bg-white px-4 py-5 flex justify-end">
         <button
@@ -38,40 +43,105 @@
 <script>
 
   // Minimal Protect.js setup call
-  PTPayment.setup({
-  
-    authorization: { clientKey: "{!! $client_key !!}" }
-  }).then(function(instance){
-      //use instance object to process and tokenize sensitive data payment fields.
-PTPayment.theme('above the line');
-
-  // this can be any event we chose. We will use the submit event and stop any default event handling and prevent event handling bubbling.
-document.getElementById("ProtectForm").addEventListener("submit",function(e){
- e.preventDefault();
- e.stopPropagation();
-
-// To trigger the validation of sensitive data payment fields within the iframe before calling the tokenization process:
-PTPayment.validate(function(validationErrors) {
- if (validationErrors.length >= 1) {
-  if (validationErrors[0]['responseCode'] == '35') {
-   // Handle validation Errors here
-   // This is an example of using dynamic styling to show the Credit card number entered is invalid
-   PTPayment.style({'cc': {'border_color': 'red'}});
+PTPayment.setup({
+  styles:
+  {
+   'code': {
+    'font_color':'#5D99CA',
+    'border_color':'#EF9F6D',
+    'label_color':'#EF9F6D',
+    'label_size':'20px',
+    'background_color':'white',
+    'border_style':'dotted',
+    'font_size':'15pt',
+    'height':'30px',
+    'width':'100px'
+ },
+   'cc': {
+    'font_color':'#5D99CA',
+    'border_color':'#EF9F6D',
+    'label_color':'#EF9F6D',
+    'label_size':'20px',
+    'background_color':'white',
+    'border_style':'solid',
+    'font_size':'15pt',
+    'height':'30px',
+    'width':'300px'
+ },
+   'exp': {
+    'font_color':'#5D99CA',
+    'border_color':'#EF9F6D',
+    'label_color':'#EF9F6D',
+    'label_size':'20px',
+    'background_color':'white',
+    'border_style':'dashed',
+    'font_size':'15pt',
+    'height':'30px',
+    'width':'85px',
+    'type':'dropdown'
   }
- } else {
-   // no error so tokenize
-   instance.process()
-   .then( (r) => submitPayment(r) )
-   .catch( (err) => handleError(err) );
- }
-});// end of PTPayment.validate
-});// end of add event listener submit
+ },
+  authorization: { 'clientKey': "{!! $client_key !!}" }
+}).then(function(instance){
 
-  });
+
+ PTPayment.getControl("securityCode").label.text("CSC");
+                  PTPayment.getControl("creditCard").label.text("CC#");
+                  PTPayment.getControl("expiration").label.text("Exp Date");
+                  //PTPayment.style({'cc': {'label_color': 'red'}});
+                  //PTPayment.style({'code': {'label_color': 'red'}});
+                  //PTPayment.style({'exp': {'label_color': 'red'}});
+                  //PTPayment.style({'exp':{'type':'dropdown'}});
+
+                  //PTPayment.theme('horizontal');
+                  // this can be any event we chose. We will use the submit event and stop any default event handling and prevent event handling bubbling.
+                  document.getElementById("ProtectForm").addEventListener("submit",function(e){
+                   e.preventDefault();
+                   e.stopPropagation();
+
+                  // To trigger the validation of sensitive data payment fields within the iframe before calling the tokenization process:
+                  PTPayment.validate(function(validationErrors) {
+                   if (validationErrors.length >= 1) {
+                    if (validationErrors[0]['responseCode'] == '35') {
+                     // Handle validation Errors here
+                     // This is an example of using dynamic styling to show the Credit card number entered is invalid
+                     instance.style({'cc': {'border_color': 'red'}});
+                    }
+                   } else {
+                     // no error so tokenize
+                     instance.process()
+                     .then( (r) => {
+                        submitPayment(r);
+                        }, (err) => {
+                        handleError(err);
+                        });
+                   }
+              });
+
+              });
 
 
 
 
+});
+
+
+function handleError(err){
+
+
+  document.write(JSON.stringify(err));
+}
+
+function submitPayment(r){
+
+  var hpf_token = document.getElementById("HPF_Token");
+  var enc_key = document.getElementById("enc_key");
+  hpf_token.value = r.message.hpf_token;
+  enc_key.value = r.message.enc_key;
+  document.getElementById("ProtectForm").submit();
+
+}
+
 </script>
 
 @endsection