How do online payments work?
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
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.
Taking Credit Card Payments from a Custom Website
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.

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