NAV

Set up payment method

To set up a payment method, Ecwid team needs this data:

  • your payment request URL
  • merchant settings page URL

Send your payment URL to the Ecwid team to set them for your app.

If you don’t have an app yet, visit the registration page

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: https://developers.ecwid.com/api-documentation/access-tokens#public-access-token
//
// Store profile: https://developers.ecwid.com/api-documentation/store-information#get-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;}";

    document.querySelector('body').appendChild(customStyleForPaymentIcons);

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

    var iconsSrcList = [
        'https://d35z3p2poghz10.cloudfront.net/apps/ecwid-api-docs/payment-icons-svg/paypal.svg',
        'https://d35z3p2poghz10.cloudfront.net/apps/ecwid-api-docs/payment-icons-svg/mastercard.svg',
        'https://d35z3p2poghz10.cloudfront.net/apps/ecwid-api-docs/payment-icons-svg/visa.svg',
        'https://d35z3p2poghz10.cloudfront.net/apps/ecwid-api-docs/payment-icons-svg/amex.svg'
    ];

// 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';
            label.parentNode.appendChild(container[0]);
        }
          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
                    && 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) {
                            image.style.marginLeft = '5px';
                        }
                        container.appendChild(image);
                    }
                }
            }
        }
    }


// Execute the code after the necessary page has loaded

    Ecwid.OnPageLoaded.add(function(page){
        if(page.type == "CHECKOUT_PAYMENT_DETAILS"){
            ecwidUpdatePaymentData();
        }
    });

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

We use cookies and similar technologies to remember your preferences, measure effectiveness of our campaigns, and analyze depersonalized data to improve performance of our site. By choosing «Accept», you consent to the use of cookies.