Integrating a new payment method

So you’ve decided to create a new payment option for Ecwid users — awesome! Check out the guides below to speed up the review process and provide a great experience for your potential users.

Table of Contents

  1. Display connection settings in Ecwid Control Panel
  2. Show payment method icons at checkout
  3. Process order discounts, taxes, shipping

Display connection settings in Ecwid Control Panel

Payment method integrations via the Ecwid API work very similarly to any other payment method Ecwid offers out of the box. This also includes the connection settings with the payment method. To provide the best experience for your potential users, embed your merchant settings pages into Ecwid Control Panel.

When you are working on a payment integration app, make sure it is a native application. Native apps display within Ecwid Control Panel and look similar to any other interface a user might see there. If your app is already registered and you want to switch it to native — contact the Ecwid team to update it. Check out the links below on how to create a native app.

Read also:

Show payment method icons at checkout

When your customer is at the checkout, it is important to show them the payment methods your store has to offer: Visa, MasterCard, AmEx, PayPal, BitCoin, etc. By default, a payment application only displays the payment option name. To help customers pick your payment option, display the available payment methods below the payment option name.

To add an icon below your payment method, you will need to create a custom JavaScript code, loaded from your server in the storefront. It will detect the “CHECKOUT_PAYMENT_DETAILS” page in the storefront, find the payment method in the list of available payments, and add the icons below it by modifying the DOM. Merchants can rename the default name of your payment, so make sure you get its name via the Ecwid REST API with a public token.

Here is an example of how the app interface can be designed:

It’s easy to find the payment method your customer can useNot clear which payment method to use

Read also:

Process order discounts, taxes, shipping

When your customer goes to pay via your payment method, Ecwid sends all the information it has about the order to your endpoint. It contains details about ordered items, shipping and billing address, applied taxes, shipping rates, discounts, and so on. To process the order correctly, make sure you take the values from the correct fields of the “cart” object.

The “cart” object contains several important pieces of information you should use when processing the order: total, subtotal, discounts, items, shipping option, taxes, handling fee. Make sure all these fields are processed depending on how your payment method works. This will be checked when your app is reviewed by the Ecwid team.

Read also: