create new payment method

ber.dev

Event::listen('bagisto.shop.checkout.payment-method.after', function($viewRenderEventManager) {
    $viewRenderEventManager->addTemplate('checkout::checkout.onepage.checkout-card');
});

doesn't load my js file

devansh-webkul

Hi @ber-dev,

Can you share the full steps that you are trying todo?

ber.dev

Hi I am trying to create a new payment method for the checkout.com payment gateway and I have followed the same procedure as the paypal package

I need to embed the Frames payment form in my payment page.
In (Webkul\Velocity\src\Resources\views\shop\checkout\onepage.blade.php)
I added this part of code for my card form :

             <div class="mt10" id="payment-card">
                 <div id="payment-form">
                     <div class="one-liner">
                         <div class="card-frame">
                             <!-- form will be added here -->
                         </div>
                         <!-- add submit button -->
                         <button id="pay-button" disabled>
                             PAY
                         </button>
                     </div>
                 </div>
             </div>

just after :

            <div class="paypal-button-container mt10"></div>

In (packages\ACME\CheckoutDotCom\src\Resources\views\checkout\onepage\checkout-card.blade.php)
I added my script to embed my form :

        Frames.init("pk_test_19cf87d3-f7c7-4f9e-b13c-d39f1eaf6138");
        Frames.addEventHandler(
            Frames.Events.CARD_VALIDATION_CHANGED,
            function(event) {
                console.log("CARD_VALIDATION_CHANGED: %o", event);
                payButton.disabled = !Frames.isCardValid();
            }
        );
        form.addEventListener("submit", function(event) {
            event.preventDefault();
            Frames.submitCard()
                .then(function(data) {
                    Frames.addCardToken(form, data.token);
                    console.log(data.token);
                    alert(data.token);
                    document.getElementById('tokcard').value = data.token;
                    form.submit();
                })
                .catch(function(error) {
                    // handle error
                    console.log(error);
                });
        });

    });
});

</script>

I create EventServiceProvider.php in (packages\ACME\CheckoutDotCom\src\Providers\EventServiceProvider.php)
for loading my script

<?php

namespace ACME\CheckoutDotCom\Providers;

use Illuminate\Support\Facades\View;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Event;
use Webkul\Theme\ViewRenderEventManager;

class EventServiceProvider extends ServiceProvider
{
/**
* Bootstrap services.
*
* @return void
*/
public function boot()
{
// Event::listen('bagisto.shop.layout.head', static function(ViewRenderEventManager $viewRenderEventManager) {
// $viewRenderEventManager->addTemplate('checkout::checkout.onepage.layouts.style');
// });

    Event::listen('bagisto.shop.layout.body.after', static function(ViewRenderEventManager $viewRenderEventManager) {
        $viewRenderEventManager->addTemplate('checkout::checkout.onepage.checkout-card');
    });
}

}
Result :
2021-03-23 (1)_LI.jpg image url)
and my submit button doesn'twork (it doesn't submit my card form for generate a token card)
I think this is because of my script because it is loading before my form
this is my structure :
2021-03-23 (2).png

ber.dev

Hi @devansh-webkul can you help me please

devansh-webkul

Hi @ber-dev,

But if your views are loading then js should also work. Please check once again.

May I know where you have added all your script?

ber.dev

@devansh-webkul
I have added my script in that file of my package (packages\ACME\CheckoutDotCom\src\Resources\views\checkout\onepage\checkout-card.blade.php)

devansh-webkul

Hi @ber-dev,

Share the full file of this path packages\ACME\CheckoutDotCom\src\Resources\views\checkout\onepage\checkout-card.blade.php.

ber.dev

@devansh-webkul said in create new payment method:

Share the full file of this path
This file contains the script needed for embed the card form

    });
});

</script>

devansh-webkul

Hi @ber-dev,

The code seems to be fine. For debugging, I suggest you take step by step, start with the alert boxes and check whether execution has been done or not.

ber.dev

@devansh-webkul Thank you my script is working fine now.
but I have another problem when I click place order I get this route not defined
I have try the same solution as https://forums.bagisto.com/topic/2280/getting-route-not-defined-for-custom-payment-method by runing php artisan optimize and I get this error

ber.dev

Hi I have solved the problem by importing the Route facade (Illuminate\Support\Facades\Route;) instead of (Illuminate\Routing\Route;)
in (packages\Webkul\Shop\src\Http\routes.php)
Thanks !

tashiw045

Hello, i have created a payment method. when a customer selects that method, it should show options to upload and screenshot of the payment made. Where do i start from?

Recent Topics

create new payment method