Set up payment method

Make sure you have a registered application for Ecwid.

Let Ecwid team know that you need to add new payment method and an interface within Ecwid Control Panel (Native app).

Send your payment URL to the Ecwid team to update it. Install your registered app to your test Ecwid store.

Ecwid will be sending order details requests to payment URL endpoint and expect the order status to be changed after the payment is complete.

Next, start working on payment processing page according to the documentation:

You can get started quicker with our payment integration template.

Show payment options as icons

Add payment options icons below your payment method example

// Set payment method title that matches merchant's payment method title set in Ecwid Control Panel. Use public access token to get it from payment settings in store profile
// Public token:
// Store profile:

    var paymentMethodTitle = "PayPal";

// Custom styles for icons for our application

    var customStyleForPaymentIcons = document.createElement('style');
    customStyleForPaymentIcons.innerHTML = ".ecwid-PaymentMethodsBlockSvgCustom { display: inline-block; width: 40px; height: 26px; background-color: #fff !important; border: 1px solid #e2e2e2 !important;}";


// Set your custom icons or use your own URLs to icons here

    var iconsSrcList = [

// Function to process current payment in the list

    var getPaymentContainer = function(label) {
        var container = label.parentNode.getElementsByClassName('payment-methods');
        if (container.length === 0) {
            container = [document.createElement('div')];
            container[0].className += 'payment-methods';
            container[0].style.paddingLeft = '18px';
          return container[0];

// Function to process the payment page

    var ecwidUpdatePaymentData = function() {
        var optionsContainers = document.getElementsByClassName('ecwid-Checkout')[0].getElementsByClassName('ecwid-PaymentMethodsBlock-PaymentOption');

        for (var i = 0; i < optionsContainers.length; i++) {
            var radioContainer = optionsContainers[i].getElementsByClassName('gwt-RadioButton')[0];
            var label = radioContainer.getElementsByTagName('label')[0];

// If current payment method title matches the one you need

            if (paymentMethodTitle && label.innerHTML.indexOf(paymentMethodTitle) !== -1) {
                var container = getPaymentContainer(label);
                if (
                    && container.getElementsByTagName('img').length === 0
                ) {
                    for (i=0; i<iconsSrcList.length; i++) {
                        var image = document.createElement('img');
                        image.setAttribute('src', iconsSrcList[i]);
                        image.setAttribute('class', 'ecwid-PaymentMethodsBlockSvgCustom');
                        if (container.children.length !== 0) {
                   = '5px';

// Execute the code after the necessary page has loaded

        if(page.type == "CHECKOUT_PAYMENT_DETAILS"){

To show various payment options, i.e. Paypal, MasterCard, Visa, etc. you can add a custom JavaScript code to add the icons below your payment method.

Check the example of that code on the right.

To add a new custom JS to the storefront, check Customizing Storefront