create new payment method](/topic/2328/create-new-payment-method

tashiw045

Re: create new payment method
i have followed the steps shown here but my component do no get rendered. If there is anyone who could correct me.

devansh-webkul

Please share steps that you have implemented.

tashiw045

i have followed these steps. https://forums.bagisto.com/topic/2328/create-new-payment-method

tashiw045

I have created a custom payment method in the path, packages/Payment\BankTransfer.
In my BankTransferServiceProvider.php i have

<?php

namespace Payment\BankTransfer\Providers;

use Illuminate\Support\ServiceProvider;

class BankTransferServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap services.
     *
     * @return void
     */
    public function boot()
    {

        include __DIR__ . '/../Http/routes.php';

        $this->loadTranslationsFrom(__DIR__ . '/../Resources/lang', 'banktransfer');

        $this->loadViewsFrom(__DIR__ . '/../Resources/views', 'banktransfer');

        $this->app->register(EventServiceProvider::class);
    }

    /**
     * Register services.
     *
     * @return void
     */
    public function register()
    {
        $this->registerConfig();
    }
    
    /**
     * Register package config.
     *
     * @return void
     */
    protected function registerConfig()
    {
        $this->mergeConfigFrom(
            dirname(__DIR__) . '/Config/paymentmethods.php', 'paymentmethods'
        );

        $this->mergeConfigFrom(
            dirname(__DIR__) . '/Config/system.php', 'core'
        );
    }
}

And I have

<?php

namespace Payment\BankTransfer\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.body.after', static function(ViewRenderEventManager $viewRenderEventManager) {
            $viewRenderEventManager->addTemplate('banktransfer::checkout.onepage.checkout-card');
        });
    }
}

in my EventServiceProvider.php file of my package.

I then created checkout-card.blade.php in Resources/checkout/onepage folder of my package with

<script src="https://cdn.checkout.com/js/framesv2.min.js"></script>
<script>
window.onload = (function() {
eventBus.$on('after-payment-method-selected', function(payment) {
var payButton = document.getElementById("pay-button");
var form = document.getElementById("payment-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>

Then I added this code in In \Webkul\Velocity\src\Resources\views\shop\checkout\onepage.blade.php

             <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>

below

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

But the view does not get rendered when I choose The payment method added in the checkout page.

devansh-webkul

But how this will get loaded, I haven't seen any event listener for the main core view.

tashiw045

I suppose this

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

loads the view.

devansh-webkul

Is this event triggered or not have you verified in the front.