DEVELOPER

Back to Developer Blog

businessseries

How To Build An Ecommerce Store That Processes Credit Card Payments

By Laura Olson | October 14th, 2024

How do online payments work?

Unlike paying for products or services in a brick and mortar store, Card Not Present (CNP) payments refer to any payment where a physical credit or debit card is not involved, and the payment information is keyed in from a keyboard, keypad, or touchscreen. Businesses that want to make sales online must integrate CNP payments into their websites for customers to be able to buy goods and services. This may sound overwhelming, but payment companies have made great strides improving outdated, difficult-to-use products — now, adding highly secure payment functionality to your website is as simple or complex as you want.

Businesses that just need an ecommerce site with a basic checkout form to collect credit card information can get up and running quickly with a hosted solution where the payment company takes care of the security concerns. Those that need to build out a unique system with more control over the payment data can work with an integration specialist to connect directly to a payment API. Whatever your business’s needs are, rest assured that there are plenty of payment products available to help.

Taking Credit Card Payments using a Website Builder

If you’re using ecommerce website builders such as WordPress, the best option to start accepting credit cards or mobile wallet payments is a payment plugin. A payment plugin is pre-built software that’s added to your website with just a few clicks. Typically, you’ll just need to go to your website builder’s dashboard, find the plugins section, search for the name of the payment plugin, select it, and update any settings that apply to your needs. When you’re ready for the plugin to display on your site, there will usually be a button located on the dashboard to enable it. Enabling the plugin will add a checkout button to your site that customers can click on to open a payment form and submit their order to you. There are many plugins available for website builders, such as EPX’s BigCommerce and WooCommerce Plugin for WordPress websites.

Since website builders often include a content management system (CMS) to easily edit product descriptions, and they allow you to customize other aspects of your store with drag and drop functionality such as editing product listings and enabling features like free shipping, they are a great option for merchants who need a quick and easy low-code or no-code solution.

Get in Touch

Talk to us about creating an ecommerce store to accept online payments.

Taking Credit Card Payments from a Custom Website

If you’re building your own website with a custom domain, there are even more payment options available. The right one for you will depend on your business requirements. To start narrowing down your options, most businesses fall into one of the following three categories.

1. Basic Payments with Minimal Responsibility for Data Security

This option is suited for businesses that just want to add a basic checkout form to their website where customers can enter payment information, without having to take responsibility for payment data security. These days, most payment companies can handle data security for you by hosting the sensitive data themselves, which means the payment gateway takes responsibility for the credit card information from the moment the customer types it into the form until the sale is complete, at which point the data is completely purged. So, if your business doesn’t need direct access to raw customer payment information, and you just need to add a simple payment form to your website, the following options might work for you.

  • iFrame payment fields: With this option, a checkout button is added to the business’s website and when the payment form loads, the credit card fields are hosted by the payment provider. These fields are placed inside special divs, which are automatically turned into iFrames hosted by the payment company, so the payment company takes responsibility for handling data security for those fields. iFrame options typically allow for enough customization so that the form matches the business’s theme and branding, such as North’s iFrame JavaScript SDK. If a business does not want to redirect customers to their payment provider’s URL, iFrame solutions are a good option as they keep customers on the business’s website throughout the entire checkout process.
  • Hosted payment page: With this low-code option, a checkout button is added to the business’s website, which loads the payment form on a new page that’s entirely hosted by the payment company. The business typically builds their own HTML page that can be customized to some degree, then they provide the file to the payment provider who hosts the page on their own servers.

    Hosted payment pages typically require that the business’s website redirects to the payment company’s domain, so the URL may change while the customer is viewing the payment form. This can provide businesses with more peace of mind, since the redirect URL is a guarantee that customer payment information is going directly to the payment company, and not coming into the business’s website at all, as with EPX Hosted Checkout.

hosted payments

With these payment products, customers typically make their purchases via the hosted solution, then merchants can perform refunds or voids as needed from the payment company’s merchant dashboard. Instead of writing code to process refunds, you can generally just sign into the payment provider’s portal and refund a transaction with the click of a button.

What’s more, developers can quickly and easily build a shopping cart that connects to the hosted payment solution, enabling customers to add multiple items before checking out. Or if your business makes sales for one item at a time (such as doctor’s offices, utility services, etc.), all you need to do is make a few adjustments to your website to integrate the checkout form and you’ll be ready to start taking payments.

2. Advanced Payments with Minimal Responsible for Data Security

For businesses that need more advanced functionality than just making sales, but don’t need access to customer payment data — and don’t want the responsibility of handling data security — there’s an easy solution: the options mentioned in the previous step (a hosted payment page or iFrame payment fields) can be used to make the initial sale, then they can return a secure token that can be used for subsequent, more advanced payment functionality.

In short, you can use a hosted checkout form to make the initial sale, get the secure token in response, and pass the token to a more advanced API to do things like tip adjustments, incremental authorizations, close batches, and lookup specific details on your sales. Since this integration method still keeps all sensitive payment data out of your business’s systems, you can unlock advanced functionality without the risks and responsibility of handling payment data security yourself. One example of how this works in the real world is EPX’s Hosted Checkout, which handles the initial intake of customer credit card information, and returns a secure, non-sensitive token which can be passed to EPX’s Custom Pay API to access additional features.

3. Advanced Payments with Full Responsibility for Data Security

If your business needs to access customer payment data, you’ll be required to take full responsibility for securely handling it. Your application will intake raw customer credit card data, process and format the data for the API request, securely transmit it to the payment processor, and accept the response. The payment industry has rules that dictate how this must be handled, which are defined in the Payment Card Industry Data Security Standards (PCI-DSS). A significant investment is required to build PCI-approved data security into your software and infrastructure at every level. We recommend working with your payment provider’s team of integration specialists to understand how their APIs work and which payment solution is the best fit for your needs before beginning this type of integration.

How To Get Started

If you know which type of integration would be a good fit for your business, the next step is to review the products on the market. If they offer self-service sandbox credentials, such as North’s BigCommerce and WooCommerce plugin, you can start trying them out immediately. Otherwise, contact the payment company to discuss your integration needs and they will provide the credentials and step by step instructions to start testing the products you’re interested in.


Start your free Developer account and try it now.


©2025 North is a registered DBA of NorthAB, LLC. All rights reserved. North is a registered ISO of BMO Harris Bank N.A., Chicago, IL, Citizens Bank N.A., Providence, RI, The Bancorp Bank, Philadelphia, PA, FFB Bank, Fresno, CA, Wells Fargo Bank, N.A., Concord, CA, and PNC Bank, N.A.