Technical Overview of Payment Integrations
The digital commerce scene has changed drastically in the last few years. The shift in digital commerce patterns has, without a shadow of a doubt, changed how customers perceive their favorite commercial brands. During the pandemic, online sales of essential daily goods boomed, reaching an unprecedented growth rate – 200% more than in previous years. This convinced many brick-and-mortar brands to start investing in their digital customer experience in order to match their customers’ demands.
Cost reduction is another reason why retailers are putting more effort into their digital presence. Most businesses were hit hard by the pandemic. For example, the retailer giant, Walgreens, experienced a $1.7B loss in the third quarter of 2020. Now put yourself in a small business owner’s shoes! This statistic would be really frightening! So, businesses are looking for any chance to cut some of their costs and e-commerce has proven that it’s a great way to do just that!
Even after the pandemic, it seems like this trend is not going anywhere. Salesforce, the digital commerce giant, has issued a report indicating that 68% of customers will continue buying their essential goods through digital commerce platforms even when the pandemic settles down.
Digital commerce platforms and digital payments markets had become dynamic battlefields, especially with their high entry barriers. So, field giants need to fight tooth and nail to gain shares in this tight niche. These providers need to provide more flexible, easy-to-use features to stay relevant in this ever-changing field that is highly affected by the trends of the millennials.
The digital payment and mobile banking markets are widening rapidly and they skyrocketed following the pandemic. In 2021, the percentage of smartphone owners in the age group 18-29 has reached a whopping 95%. Plus, 46% of consumers increased their mobile banking usage in the last year. However, industry experts might have noticed that payment providers like Stripe, PayPal, etc. are now leading the digital payments market rather than traditional banks like Chase.
This is not shocking at all. Market experts have been predicting a shift even before the pandemic. Back in 2014, Celent – a leading research and advisory firm focused on technology for financial institutions globally – predicted that 90% of US bankers expected at least a 10% decline in branch numbers over the next 5 years. Other sources have reported that 73% of users would be more excited about a new financial service offering from Google/Amazon/Apple/ Square/PayPal than their own bank.
All these facts and numbers suggest that customers really value features provided by digital payment providers. SaleCycle has even reported that 6% of customers even abandon their carts due to a lack of payment options. Because of this, retailers should analyze payment providers properly before settling on one so they can provide the easiest, most secure, and most flexible online experience for their customers.
What are Payment Providers?
Payment providers are companies that provide payment solutions that process credit card and wallet payments for digital commerce sites and traditional brick and mortar stores, like Braintree, Stripe, Square, CyberSource, and Authorize.Net.
These solutions are called payment gateways. You’ll notice that they are just like a shipping carrier, in the sense that they take a request, process it, and then deliver it. Payment gateways have two main objectives. First, to securely transmit payment data (ex: card number) from digital commerce sites to the issuing banks. Second, to authorize payment transactions. This means holsding the funds from the buyers’ accounts to be captured later on by the seller.
Each gateway is provided by a field giant and each gateway provides different features and specific special payment options. For example, CyberSource is owned by Visa and is known for its superior flexible solution and cross-channel payments. On the other hand, Braintree is owned by PayPal and offers easier integration with the most relevant wallets and local payment methods in addition to a global reach.
This head-to-head competition among the giants of the field leads to a broader range of selections for merchants and service providers alike.
Payment gateways usually are put into 3 main categories:
- Off-site redirects:
In this type, the customer would be redirected to the payment gateway’s website to enter their payment information and finalize all payment-related steps before being redirected back to the original e-commerce website. A good example of this would be Checkout.com or Balance. These gateways redirect the user from digital commerce sites to their own to fill in the payment and billing info before redirecting them back to the referring website to place the purchase.
This method offers a rapid, simple integration process for retailers as it takes care of all the heavy lifting at the checkout. But it also leaves retailers with limited control over the checkout flow. Overall, the retailers would be left at the mercy of the payment providers’ quirks and issues when customers are redirected to the gateways’ websites. In some cases, it could prevent them from providing a seamless single-page checkout.
- On-site checkout, off-site authorization:
As mentioned in the previous section, some gateways take care of all the heavy lifting in the checkout process. On the other hand, other gateways offer another solution that still takes care of the most complex parts of the checkout process but keeps the customers on the retailers’ websites when entering their payment information and billing information. These gateways will usually ask the retailers to implement a secure iframe on their websites, that shoppers can use this iframe to enter their credit card information. However, the authorization process and the tokenization process will happen at the gateway’s side. The retailer will not control any sensitive payment data and will only be dealing with abstract payment objects. Gateways like Stripe have achieved great success and were able to gain a huge market share because of this mix. This simple difference allows the merchants to provide their customers with a more customized checkout experience.
This allows the retailers to provide secure payment channels with their digital commerce sites. However, it would still deny them the chance to fully customize their authorization requests and features.
- On-site payments:
Finally, the third type of payment gateway offers merchants complete control of their checkout processes and total control of their authorization requests and features. CyberSource is a perfect example of this type as it allows merchants to have complete control over their integrations. However, this comes at a price: the retailer has all the responsibility of keeping data secure and PCI compliant.
This flexibility can play a huge factor in the success of your online experience. The shopping cart abandonment rate can be up to 75% so any advantage should be used to boost a merchant’s online presence.
How to pick the correct provider?
Picking the correct provider/s is not always a straightforward task and it’s a decision that shouldn’t be taken lightly. Retailers should look at many factors including their customer base, competitors, and market before settling on their final decision. For instance, the recommended gateway would differ based on the type of the business, particularly whether it’s a B2B or a B2C business.
Different payment gateways have different limitations. Some of these gateways don’t support specific card issuers or don’t support cards from specific regions. Other gateways might support irrelevant payment methods for specific businesses.
For example, businesses in China need to offer Alipay to their customers but that’s not the case for businesses based in the USA. So, let’s talk about the different factors retailers should look at before settling on their final decision.
What to look for in a payment method?
As I mentioned before, retailers should take into consideration the customers’ demographics, relevant payment methods within the targeted communities, and flexibility in payments, as well as other factors. These aspects should be analyzed accurately before settling on a decision because a lack of supported payment methods is one of the main reasons customers abandon their carts.
For example, data provided by Mercator Advisory Group’s Report suggest that customers’ behavior and payment preferences vary across multiple markets. Therefore, retailers should examine payment methods in depth before making a decision.
- One platform to rule them all, or stack them?
Based on all of the research we’ve been talking about earlier, retailers then should look at the available payment gateways out there. If one gateway supports all the desired methods, then we can limit our choice to that gateway. However, this is rarely the case! Payment gateways rarely support all types of needed payment methods. In that case, retailers should think of stacking multiple payment gateways on their sites.
Stacking multiple payment gateways means depending on multiple gateways to support all the desired methods. For instance, a retailer can have Braintree to support Venmo and Cybersource to support credit cards.
- Flexible features
All retailers should support credit card payments. However, that does not mean that they should limit their customers to a specific payment method. So, retailers should aim to accommodate all their customers’ preferences and provide them with the most flexible and seamless experience they can. For example, PayPal and Apple Pay are both well-known methods with high awareness and usage rates and that’s why most retailers support them.
- Integration with your Point of Sale (POS) and Order Management System (OMS)
A successful online experience should mimic the physical experience the customer expects in physical stores. Therefore, the online channels should provide the same payment methods allowed in stores. This consistency allows retailers to provide a more solid experience and a better integration with their POS and OMS systems.
- The size of your team and experience
In earlier parts of this article, we’ve talked about the different types of payment gateways out there. Some of these gateways require a simple integration process. On the other hand, other gateways require a very complex and time-consuming one. The first type would be the go-to choice for a brand that does not have the technical capabilities to take on such a complex integration. However, the latter would be relevant to a brand that has the necessary capabilities and knowledge to successfully complete such a project. So, the retailer should weigh the capabilities of their IT infrastructure before deciding on a payment gateway.
- The size of the business
It’s not a secret that payment gateways that require a complex integration process allow retailers to provide a very customized payment experience to their customers. That includes a customized checkout flow and a sophisticated payment flow.
So, such gateways might be the preferred choice for businesses dealing with immense amounts of transactions. For instance, I once worked with a multinational brand that expects huge numbers of transactions on a daily basis. Therefore, when the retailer was deciding on their preferred gateway, we automatically discounted all the simple payment gateways.
- PCI complaint or not
Don’t jump the gun and choose a gateway that is not PCI-compliant. That’s a big NO-NO! Payment Card Industry compliance ensures that high standards and high-quality security measures are upheld in the cyber-world. Shoppers shouldn’t trust a provider that’s not PCI-compliant and neither should you!
PCI compliance should be one of the major deciding factors when you weigh and do the tradeoff between different payment gateways. PCI compliance helps you make sure that your gateway follows all the required standards to keep the shoppers’ and clients’ information safe and secure.
- The best payout policy for the industry and country
For a business to receive funds, payment gateways make payouts to the business bank accounts. Different gateways have different policies that differ based on the industry and country. You need to weigh between different payout policies before deciding on one.
Get the Inside Scoop
Picking a payment gateway is not an easy decision and payment providers are not always straightforward with their potential clients. For instance, most of the payment providers out there like to talk about their strong points and features but they don’t mention their shortcomings and disadvantages.
However, I’m here to help! I’ve managed so many payment integration projects and I have also been part of a team developing a new payment gateway before. Let me share some behind-the-scenes insights.
- Unknown fees
All payment gateways like to advertise their payment fees to their customers. However, some gateways are not 100% transparent about how they calculate their fees. For instance, they don’t mention to customers the fees they charge per transaction and how many transactions are really happening in the background in each request.
When spiking payment gateways, the business should make sure that they are crystal clear about fees, how they are calculated, etc.
- Unfinished features
As we’ve mentioned before, the payment gateways market has a high entry barrier and most startups roll out their features gradually. Plus, some of these startups tend to roll out some of their features with their MVP versions first. Payment providers are usually straightforward about these things with the clients but such shortcomings are not always communicated to the clients.
I’ve been in many meetings with payment startups and providers and I’ve noticed a trend. Whenever you spot an issue or a shortcoming in their system, they’ll tell you that it’s under development and it’ll be ready soon.
Retailers should first identify all the necessary transaction types they need and should ensure that all these types are production-ready, PCI-compliant, and developed to the dot.
- Missing critical features
To build on the previous point, some providers may postpone rolling out vital features. I remember once I had a discussion with a payment startup and while we were discussing how their authorization works I noticed that they didn’t roll out their 3D security feature yet. Based on this, we couldn’t continue with that provider but other clients may not notice these issues. So, please make sure that you do your due diligence before settling on a provider.
- Accuracy of the data
There are few worse things in life than death — have you ever had to deal with an inaccurate payment gateway? Payment gateways, handlers, or any product or service associated with any form of payment should prioritize accuracy. Customer trust and brand loyalty are on the line here, they often break because of issues like this.
I was once told by one of my coworkers, who was part of the engineering team at a payment gateway startup that a bug in their hooks once lost one of their clients’ huge amounts of Swedish Kronas. The startup had to pay that back to the retailer but it was a nightmare for the retailer and their clients for sure.
- Security of the system
With this massive global expansion in online banking and digital commerce, hackers and scammers are also shifting their targets to include these fields. A 2018 Thales Data Security Report revealed that 75% of U.S. retailers have suffered at least one cybersecurity failure with their online stores. That’s a very high percentage. Payment gateways help retailers and service providers drive back against such imminent threats while increasing the availability and reliability of the platform for shoppers.
Usually, big names in this market provide higher levels of security for their clients, providing them with top-tier security layers and technologies.
Steps for major integrations with Salesforce Commerce Cloud:
Payment gateways differ a lot in functionality. However, they all share similar implementation steps. First, we need to configure a few things on the Business Manager. To be more exact, we need to set up the payment processor and the payment method.
Code-wise, payment-related operations are usually done in two major steps: payment handling and payment authorization. Payment handling usually creates the OrderPaymentInstrument object, which the order will use and validates the payment information. Payment authorization is the step that payment gateways take to validate the used payment information through the issuing bank.
Salesforces Commerce Cloud starts the payment process when the user submits their payment information. The gateway will first tokenize the card number, validate the payment information, and then create a payment instrument to link it to the order. When the order is placed, the system will then authorize the payment.
Different payment gateway types may do the same exact steps but a bit differently. So, when you start the technical implementation, you need to know the type of the payment gateway you’re dealing with.
Payment gateways that implement an off-site redirects mechanism will leverage SFCC’s payment handling step, in which they will validate the payment information and create the order’s payment instrument. However, once that’s done, the gateway will return an external link, that we can serve to the shopper as an http redirect.
var currentBasket = basket;
var cardErrors = {};
var cardNumber = paymentInformation.cardNumber.value;
var cardSecurityCode = paymentInformation.securityCode.value;
var expirationMonth = paymentInformation.expirationMonth.value;
var expirationYear = paymentInformation.expirationYear.value;
var serverErrors = [];
var creditCardStatus;
var cardType = paymentInformation.cardType.value;
var paymentCard = PaymentMgr.getPaymentCard(cardType);
// Validate payment instrument
if (paymentMethodID === PaymentInstrument.METHOD_CREDIT_CARD) {
var creditCardPaymentMethod = PaymentMgr.getPaymentMethod(PaymentInstrument.METHOD_CREDIT_CARD);
var paymentCardValue = PaymentMgr.getPaymentCard(paymentInformation.cardType.value);
var applicablePaymentCards = creditCardPaymentMethod.getApplicablePaymentCards(
req.currentCustomer.raw,
req.geolocation.countryCode,
null
);
if (!applicablePaymentCards.contains(paymentCardValue)) {
// Invalid Payment Instrument
var invalidPaymentMethod = Resource.msg('error.payment.not.valid', 'checkout', null);
return { fieldErrors: [], serverErrors: [invalidPaymentMethod], error: true };
}
}
.......
.......
Transaction.wrap(function () {
var paymentInstruments = currentBasket.getPaymentInstruments(
PaymentInstrument.METHOD_CREDIT_CARD
);
collections.forEach(paymentInstruments, function (item) {
currentBasket.removePaymentInstrument(item);
});
var paymentInstrument = currentBasket.createPaymentInstrument(
PaymentInstrument.METHOD_CREDIT_CARD, currentBasket.totalGrossPrice
);
paymentInstrument.setCreditCardHolder(currentBasket.billingAddress.fullName);
paymentInstrument.setCreditCardNumber(cardNumber);
paymentInstrument.setCreditCardType(cardType);
paymentInstrument.setCreditCardExpirationMonth(expirationMonth);
paymentInstrument.setCreditCardExpirationYear(expirationYear);
paymentInstrument.setCreditCardToken(
paymentInformation.creditCardToken
? paymentInformation.creditCardToken
: createToken()
);
});
return { fieldErrors: cardErrors, serverErrors: serverErrors, error: false };
On the other hand, other payment gateway types leverage two SFCC steps. They both use the same payment handling step mentioned above but then they also leverage the authorization hook. On-site payment gateways will build the authorization request body, add the needed http headers, send the request, and then parse it. When handling an on-site checkout, offsite authorization case, it will just call an endpoint to do all the necessary operations and return the authorization result.
var serverErrors = [];
var fieldErrors = {};
var error = false;
try {
Transaction.wrap(function () {
paymentInstrument.paymentTransaction.setTransactionID(orderNumber);
paymentInstrument.paymentTransaction.setPaymentProcessor(paymentProcessor);
});
} catch (e) {
error = true;
serverErrors.push(
Resource.msg('error.technical', 'checkout', null)
);
}
return { fieldErrors: fieldErrors, serverErrors: serverErrors, error: error };
Both steps are done using hooks. So, to follow the best practice, create two hooks; One for payment handling and one for authorization. When the system identifies that the shopper has selected your new payment gateway, your code should handle these requests from start to finish.
var paymentProcessorID = paymentProcessor !== null ? paymentProcessor.getID().toUpperCase() : 'default';
var paymentProcessorHook = 'app.payment.processor.' + paymentProcessorID;
var authorizationResult = {};
if (HookMgr.hasHook(paymentProcessorHook)) {
var hookArgs = {
'OrderNo': order.getOrderNo(),
'PaymentInstrument': myPaymentInstrument,
'paymentProcessor': paymentProcessor
};
authorizationResult = HookMgr.callHook(paymentProcessorHook, 'Authorize', hookArgs);
}
Make sure to smoke test, unit test, and do all kinds of testing before pushing these changes to a PROD environment. As we discussed at the beginning of this article, payment is a very sensitive area.
Good luck in implementing the correct gateway for your business!