Build a site on a single domain, but detect mobile, and render a separate mobile site
Build a separate mobile site on a subdomain
It’s funny how quickly huge industry-defining conversations fade from view. This was probably the biggest question in web design and development1 this past decade, and we came up with an answer: It’s #1, you should build a responsive website. Any other answer and you’re building multiple websites and the pain from that comes from essentially doubling the workload, splitting teams, communication problems across those teams, inconsistencies across the sites, and an iceberg of other pain points this industry has struggled with for ages.
But, the web is a big place.
This emailer specifically mentioned imdb.com as their example. IMDB is an absolutely massive site with a large team (they are owned by Amazon) and lots of money flying around. If the IMDB team decides they would be better off building multiple websites, well that’s their business. They’ve got the resources to do whatever the hell they want.
In this article, I’m going to introduce a CSS Specification that has just become a W3C Recommendation. The CSS Containment Specification defines a single property, contain, and it can help you to explain to the browser which parts of your layout are independent and will not need recalculating if some other part of the layout changes.
While this property exists for performance optimization reasons, it can also affect the layout of your page. Therefore, in this article, I’ll explain the different types of containment you can benefit from, but also the things you need to watch out for if applying contain to elements in your site.
The Problem Of Layout Recalculation
If you are building straightforward web pages that do not dynamically add or change elements after they have loaded using JavaScript, you don’t need to worry about the problem that CSS Containment solves. The browser only needs to calculate your layout once, as the page is loaded.
Where Containment becomes useful is when you want to add elements to your page without the user needing to reload it. In my example, I created a big list of events. If you click the button, the first event is modified, a floated element is added, and the text is changed:
When the content of our box is changed, the browser has to consider that any of the elements may have changed. Browsers are in general pretty good at dealing with this, as it’s a common thing to happen. That said, as the developer, you will know if each of the components is independent, and that a change to one doesn’t affect the others, so it would be nice if you could let the browser know this via your CSS. This is what containment and the CSS contain property gives you.
How Does Containment Help?
An HTML document is a tree structure which you can see when inspecting any element with DevTools. In my example above, I identify one item that I want to change by using JavaScript, and then make some changes to the internals. (This means that I’m only changing things inside the subtree for that list item.)
Inspecting a list item in DevTools
Applying the contain property to an element tells the browser that changes are scoped to the subtree of that element, so that the browser can do any possible optimizations — safe in the knowledge that nothing else outside of that element will change. Exactly what a particular browser might do is down to the engine. The CSS property simply gives you — as the developer and expert on this layout — the chance to let it know.
In many cases, you will be safe to go right ahead and start using the contain property, however, the different values come with some potential side effects which are worth understanding before adding the property to elements in your site.
Using Containment
The contain property can set three different types of containment:
layout
paint
size
Note: There is a style value in the Level 2 Specification. It was removed from Level 1, so does not appear in the Recommendation, and is not implemented in Firefox.
Layout
Layout containment brings the biggest benefits. To turn on layout containment, use the following snippet:
.item {
contain: layout;
}
With layout containment enabled, the browser knows that nothing outside the element can affect the internal layout, and nothing from inside the element can change anything about the layout of things outside it. This means that it can make any possible optimizations for this scenario.
A few additional things happen when layout containment is enabled. These are all things which ensure that this box and contents are independent of the rest of the tree.
The box establishes an independent formatting context. This ensures that the content of the box stays in the box — in particular floats will be contained and margins will not collapse through the box. This is the same behavior that we switch on when we use display: flow-root as in explained in my article “Understanding CSS Layout And The Block Formatting Context”. If a float could poke out of your box, causing following text to flow around the float, that would be a situation where the element was changing the layout of things outside it, making it a poor candidate for containment.
The containing box acts as the containing block for any absolutely or fixed position descendants. This means it will act as if you had used position: relative on the box you have applied contain: layout.
The box also creates a stacking context. Therefore z-index will work on this element, it’s children will be stacked based on this new context.
If we look at the example, this time with contain: layout, you can see that when the floated element is introduced it no longer pokes out the bottom of the box. This is our new Block Formatting Context in action, containing the float.
With paint containment enabled, the same side effects as seen with layout containment occur: The containing box becoming an independent formatting context, a containing block for positioned elements, and establishing a stacking context.
What paint containment does is indicate to the browser that elements inside the containing block will not be visible outside of the bounds of that box. The content will essentially be clipped to the box.
We can see this happen with a simple example. Even if we give our card a height, the floated item still pokes out the bottom of the box, due to the fact that the float is taken out of flow.
The float is not contained by the list item
With paint containment turned on the floated item is now clipped to the size of the box. Nothing can be painted outside of the bounds of the element with contain: paint applied.
Size containment is the value that is most likely to cause you a problem if you aren’t fully aware of how it works. To apply size containment, use:
.item {
contain: size;
}
If you use size containment then you are telling the browser that you know the size of the box and it is not going to change. This does mean that if you have a box which is auto-sized in the block dimension, it will be treated as if the content has no size, therefore the box will collapse down as if it had no contents.
In the example below, I have not given the li a height; they also have contain: size applied. You can see that all of the items have collapsed as if they had no content at all, making for a very peculiar looking listing!
If you give the boxes a height then the height will be respected when contain: size is used. Alone, size containment will not create a new formatting context and therefore does not contain floats and margins as layout and paint containment will do. It’s less likely that you would use it alone; instead, it is most likely you would apply it along with other values of contain to be able to get the most possible containment.
Shorthand Values
In most cases, you can use one of two shorthand values to get the best out of containment. To turn on layout and paint containment, use contain: content;, and to turn on all possible containment (keeping in mind that items which do not have a size will then collapse), use contain: strict.
“contain: content is reasonably “safe” to apply widely; its effects are fairly minor in practice, and most content won’t run afoul of its restrictions. However, because it doesn’t apply size containment, the element can still respond to the size of its contents, which can cause layout-invalidation to percolate further up the tree than desired. Use contain: strict when possible, to gain as much containment as you can.”
Therefore, if you do not know the size of the items in advance, and understand the fact that floats and margins will be contained, use contain: content. If you do know the size of items in addition to being happy about the other side effects of containment, use contain: strict. The rest is down to the browser, you have done your bit by explaining how your layout works.
Can I Use Containment Now?
The CSS Containment specification is now a W3C Recommendation which is what we sometimes refer to as a web standard. In order for the spec to get to this stage, there needed to be two implementations of the feature which we can see in both Firefox and Chrome:
Browser support for containment (Source: Can I Use)
As this property is transparent to the user, it is completely safe to add to any site even if you have lots of visitors in browsers that do not support it. If the browser doesn’t support containment then the visitor gets the experience they usually get, those in supporting browsers get the enhanced performance.
I would suggest that this is a great thing to add to any components you create in a component or pattern library, if you are working in this way it is likely each component is designed to be an independent thing that does not affect other elements on the page, making contain: content a useful addition.
Therefore, if you have a page which is adding content to the DOM after load, I would recommend giving it a try — if you get any interesting results let me know in the comments!
Related Resources
The following resources will give you some more detail about the implementation of containment and potential performance benefits:
One of my mottos in life, and in business is this: “If Google tells you to do something, you better get it done.”
And when it comes to using HTML meta tags for SEO, none of us should be messing around.
That said, you know how it is with Google search. The algorithms are always changing and what Google deems important one year easily falls by the wayside the next. Which is why some of the meta tags you might run into are nothing more than legacy remnants of what Google used to care about.
This guide will help you focus on the meta tags you absolutely need to use and what you can do with them.
What Are HTML Meta Tags?
The head of a web page contains a lot of information about the content found there. This is where you’ll find your HTML meta tags along with any CSS or JavaScript links that apply to the page.
Here’s an example of how the looks for a recent WebDesigner Depot post about CSS libraries:
You can glean a few important details about the page just from this snippet:
The (meta) title
The meta description
The meta content type and viewport
These are all meta tags. Most of the time, they’re written in HTML as a name/value pair. For instance
<meta property="og:title" content="15 Best CSS Libraries for 2019 | Webdesigner Depot" />
Essentially, meta tags are nothing more than data about your web page’s data. They never show up on the page. They’re just in the background, waiting for search bots to detect the HTML and use it to improve the page’s search result. They’re also useful for browsers, RSS feeds, and social media platforms that feed these details (and display the content) to users.
Which Meta Tags Do You Need to Use?
One could argue that all meta tags recognized by Google and other search engines are worth using. But like with everything you do in web design and development, you should pick your battles wisely.
So, rather than spend your time filling your web pages with every meta tag possible, familiarize yourself with which ones are available and which of them are worth using.
Title
HTML sample
<title>5 Ways to Beef Up Your WordPress Security Today</title>
What does it do?
This indicates the name of the page.
Do you really need it?
Yes, this one is non-negotiable as it tells search engines what the name of the page is.
This tag comes in handy if you want to tailor your title specifically for search results, too. So, let’s say you wrote a clickbait title so that visitors who see it on the site are compelled to click. Something like:
How to Earn a Six-figure Salary with Nothing More Than Your Laptop, Passport, and Your Best Friend
That title string is 98 characters long and there’s no way Google would ever display it in full. Rather than rewrite the title for your site, you can use the title tag to give Google one that’s more up to its standards, like:
<title>Earn 6 Figures with Your Laptop, Passport, and Your Best Friend</title>
That’s 56 characters, within Google’s title limit, and works just as well as the original
Description
HTML sample
<meta name="description" content="Tired of running on the hourly wage treadmill? Learn how to become a travel writer and influencer and make a six-figure salary today.">
What does it do?
This is a brief summary of what’s to be found on the page. In search, this is the page description that appears beneath the page title and URL.
Do you really need it?
Yep, this is another essential meta tag.
If you leave it up to Google to craft a description for the page, it will more than likely be nothing more than the first 160 characters of what it finds there. And if you have ads at the top of the page, image alt text, or anything else its machines can read, you might get stuck with a crappy meta description.
So, take the time to write one up.
Character Set
HTML sample
<meta charset="UTF-8">
What does it do?
This meta tag defines which character set the browser should use to interpret the content.
Do you really need it?
UTF-8 isn’t the only character set nor is it universally acceptable. So, make sure you’ve defined the default character set for your website using this meta tag.
If you’re unsure if your website needs a different character one, refer to this list. It’s safe to say that if the website is to be translated for an international audience, you’ll definitely need to use a different charset tag than UTF-8.
It provides direction on how Google should render your page on all devices, but it’s especially important in this mobile-first world.
Do you really need it?
Yes. The viewport meta tag is one that Google has gone to great lengths to explain. Basically, if you don’t include it, or it’s used incorrectly, you could disrupt the viewing experience for users on mobile devices.
That’s why Google recommends setting the content to width=device-width, initial-scale=1 every time. If you try to introduce variables like minimum-scale, you could hurt the appearance of your website as it transforms from something as simple as portrait orientation to landscape.
When you have duplicate content on your website, or pages that are very similar to one another, the canonical meta tag tells Google which page is the original and should have traffic driven to it.
Do you really need it?
Google doesn’t take kindly to duplicate content. But let’s say your “5 Ways to Beef Up Your WordPress Security Today” piece is a rewrite of a post called “7 Ways to Beef Up WordPress Security” from 2015.
Rather than let Google penalize you for having lookalike content on your website (and, thus, trying to rank twice for the same thing), you’ll use this meta tag to show Google where the original lives.
This would also come in handy if you changed your URL structure and want to make sure all traffic goes to the most current link.
The robots meta tags tell all search bots (“robots”) or specific crawler bots (“googlebot”, “bingbot”, “duckduckbot”, etc.) how to treat a page. It usually has to do with how a page should be indexed.
Do you really need it?
By default, search engines are going to index and follow links on every page you create on your website.
There are a few reasons why you might direct the search engines to do otherwise:
noindex: Use this when you want to hide a page from search. (Do not rely on this for security, remember: it’s only a suggestion.)
nofollow: This is useful for blogs that accept content from contributors but don’t vet the content. That way, if affiliate links are planted on the page, Google won’t follow them.
nosnippet or max-snippet: This controls how your text, image, or video snippet appears in search.
noarchive: If there are older cached versions of a page, use this to prohibit search engines from showing them.
unavailable_after:[date]: This is a good one for a limited promotion, like around Black Friday sales. While you might want to drive traffic to the page from October to December, it makes sense to get it out of search once the holidays are done and the deals are no longer valid.
This is one of the methods you can use to verify your site ownership for Google Search Console.
Do you really need it?
You don’t need this meta tag if you’ve chosen one of the other options. For instance, you can verify site ownership through your Google Analytics tracking code or by updating your DNS record. If you’d prefer, you can just add the HTML meta tag to your header.
Twitter Cards and Open Graph (Social Media)
HTML sample
<meta property="og:type" content="article" /> <meta property="og:title" content="5 Ways to Beef Up Your WordPress Security Today" /> <meta property=”og:description” content="Tired of running on the hourly wage treadmill? Learn how to become a travel writer and influencer and make a six-figure salary today." /> <meta property="og:image" content="https://mywebsite.com/media/wordpress-security-lock/" /> <meta property="og:url" content="https://mywebsite.com/blog/5-ways-wordpress-security/" /> <meta property=”og:site_name” content="My Website" />
What does it do?
Open Graph meta tags (like the snippet above) tell Facebook and LinkedIn how to display the metadata for a page or post shared on those social media platforms.
Twitter Card meta tags do the same, except for Twitter and usually ask for your handle (@) as well.
Do you really need it?
It can help, but it’s far from essential. In my experience, when I fill in the basic metadata (i.e. title, meta description, featured image) for a page on my website, that’s exactly what shows up when I promote it on social.
Wrap-Up
This is by no means an exhaustive list of all of the meta tags that exist.
For instance, you might run into web pages that contain legacy meta tags like the ones that declare the author, copyright, or rating. These are no longer necessary and you shouldn’t waste your time on them.
What this is, is an exhaustive list of the HTML meta tags you should be using when it’s relevant to do so.
So, focus on letting the search engines know exactly what they need to index your page while keeping your HTML docs from getting overrun by unnecessary tags.
The most likely answer from the thread: DOS was a massive operating system for PCs for a long time and it had a three-character limit on file extensions.
Interesting that the first book on HTML covers this specifically:
Where my mind went was server software. I know that web servers automatically do different things with different file types. In a test on my own server (set up to serve a WordPress site), I put some files at the root that all contain the exact same content:
Cool
file.text = file is rendered as plain text in browser (Content-Type: text/plain)
file.html = file renders as HTML in browser (Content-Type: text/html)
file.htm = file renders as HTML in browser (Content-Type: text/html)
file.fart = file is downloaded by browser (Content-Type: application/octet-stream)
You can write code to serve files with whatever content types you want, but in lieu of that, file extensions do matter because they affect how default web servers choose to serve file type headers.
With stuff like template literals in JavaScript and templating languages, like JSX, I’ve gotten used to wanting to write my HTML templates in one nice chunk and sprinkling in variables wherever I need them.
I had a situation where I needed to do that in “raw” PHP the other day, so I’m just documenting it here.
Say I have some data like…
$title = "The Title";
$desc = "Some information about this thing blah blah.";
$img = "/images/header.jpg";
But that data changes, or there might be multiple sets of it, and I want to be able to pass that data into a function and have it spit out some HTML. That way, it’s easy to change the template and have it affect everywhere that uses it.
One of the more powerful concepts I’ve stumbled across recently is the idea of abstract syntax trees, or ASTs. If you’ve ever studied alchemy, you may recall that the whole motivation for alchemists was to discover some way to transform not-gold into gold through scientific or arcane methods.
ASTs are kind of like that. Using ASTs, we can transform Markdown into HTML, JSX into JavaScript, and so much more.
Why are ASTs useful?
Early in my career, I tried to change files using a find-and-replace method. This ended up being fairly complicated, so I tried using regular expressions. I ended up abandoning the idea because it was so brittle; the app broke all the time because someone would enter text in a way I hadn’t anticipated and it would break my regular expressions causing the whole app to fall down.
The reason this was so hard is that HTML is flexible. That makes it extremely hard to parse using regular expressions. String-based replacement like this is prone to breaking because it might miss a match, match too much, or do something weird that results in invalid markup that leaves the page looking janky.
ASTs, on the other hand, turn HTML into something far more structured, which makes it much simpler to dive into a text node and do replacements on only that text, or to mess with elements without needing to deal with the text at all.
This makes AST transformation safer and less error-prone than a purely string-based solution.
What are ASTs used for?
To start, let’s take a look at a minimal document using a couple lines of Markdown. This will be saved as a file called home.md, which we’ll save in the content folder of our website.
# Hello World!
 An adorable corgi!
Some more text goes here.
Assuming we know Markdown, we can infer that when this Markdown is parsed, it’ll end up being an
that says, “Hello World!” and a that says, “This is some Markdown.”
But how does it get transformed from Markdown to HTML?
First, we need to install the dependencies required to parse the Markdown into an AST and convert it to HTML. To do that, we need to make sure we’ve initialized the folder as a package. Run the following command in your terminal:
# make sure you're in your root folder (where `content` is)
# initialize this folder as an npm package
npm init
# install the dependencies
npm install unified remark-parse remark-html
If we assume our Markdown is stored in home.md, we can get the AST with the following code:
This code takes advantage of Node’s built-in fs module, which allows us to access and manipulate the filesystem. For more information on how this works, check out the official docs.
If we save this as src/index.js and use Node to execute this script from the command line, we’ll see the following in our terminal:
$ node src/index.js
<h1>Hello World!</h1>
<p><img src="<https://images.dog.ceo/breeds/corgi-cardigan/n02113186_1030.jpg>" alt="cardigan corgi"> An adorable corgi!</p>
<p>Some more text goes here.</p>
We tell unified to use remark-parse to turn the Markdown file into an AST, then to use remark-html to turn the Markdown AST into a HTML — or, more specifically, it turns it into something called a VFile. Using the toString() method turns that AST into an actual string of HTML we can display in the browser!
Thanks to the hard work of the open-source community, remark does all the hard work of turning Markdown into HTML for us. (See the diff)
Next, let’s look at how this actually works.
What does an AST look like?
To see the actual AST, let’s write a tiny plugin to log it:
Note that the position values have been truncated to save space. They contain information about where the node is in the document. For the purposes of this tutorial, we won’t be using this information. (See the diff)
This is a little overwhelming to look at, but if we zoom in we can see that each part of the Markdown becomes a type of node with a text node inside it.
The type tells us what kind of node we’re dealing with.
Each node type has additional properties that describe the node. The depth property on the heading tells us what level heading it is — a depth of 1 means it’s an tag, 2 means , and so on.
The children array tells us what’s inside this node. In both the heading and the paragraph, there’s only text, but we could also see inline elements here, like .
This is the power of ASTs: We’ve now described the Markdown document as an object that a computer can understand. If we want to print this back to Markdown, a Markdown compiler would know that a “heading” node with a depth of 1 starts with #, and a child text node with the value “Hello” means the final line should be # Hello.
How AST transformations work
Transforming an AST is usually done using the visitor pattern. It‘s not important to know the ins and outs of how this works to be productive, but if you’re curious, JavaScript Design Patterns for Humans by Soham Kamani has a great example to help explain how it works. The important thing to know is that the majority of resources on AST work will talk about “visiting nodes,” which roughly translates to “find part of the AST so we can do stuff with it.” The way this works practice is that we write a function that will be applied to AST nodes matching our criteria.
A few important notes about how it works:
ASTs can be huge, so for performance reasons we will mutate nodes directly. This runs counter to how I would usually approach things — as a general rule I don’t like to mutate global state — but it makes sense in this context.
Visitors work recursively. That means that if we process a node and create a new node of the same type, the visitor will run on the newly created node as well unless we explicitly tell the visitor not to.
We’re not going to go too deep in this tutorial, but these two ideas will help us understand what’s going on as we start to mess with the code.
How do I modify the HTML output of the AST?
What if we want to change the output of our Markdown, though? Let’s say our goal is to wrap image tags with a figure element and supply a caption, like this:
To accomplish this, we’ll need transform the HTML AST — not the Markdown AST — because Markdown doesn’t have a way of creating figure or figcaption elements. Fortunately, because unified is interoperable with multiple parsers, we can do that without writing a bunch of custom code.
Convert a Markdown AST to an HTML AST
To convert the Markdown AST to an HTML AST, add remark-rehype and switch to rehype-stringify for turning the AST back to HTML.
npm install remark-rehype rehype-stringify
Make the following changes in src/index.js to switch over to rehype:
This is the AST for the HTML representation of the image, so we can start changing it over to use the figure element. (See the diff)
Write a plugin for unified
To wrap our img element with a figure element, we need to write a plugin. In unified, plugins are added with the use() method, which accepts the plugin as a first argument and any options as a second argument:
.use(plugin, options)
The plugin code is a function (called an “attacher” in unified jargon) that receives option. These options are used to create a new function (called a “transformer”) that receives the AST and does work to, er, transform it. For more details on plugins, check out the plugin overview in the unified docs.
The function it returns will receive the entire AST as its argument, and it doesn’t return anything. (Remember, ASTs are mutated globally.) Create a new file called img-to-figure.js in the same folder as index.js, then put the following inside:
module.exports = options => tree => {
console.log(tree);
};
Next, we need to add a visitor. This will let us actually get at the code. Unified takes advantage of a number of utility packages, all prefixed with unist-util-*, that allow us to do common things with our AST without writing custom code.
We can use unist-util-visit to modify nodes. This gives us a visit helper that takes three arguments:
The entire AST we’re working with
A predicate function to identify which nodes we want to visit
A function to make any changes to the AST we want to make
To install, run the following in your command line:
npm install unist-util-visit
Let’s implement a visitor in our plugin by adding the following code:
const visit = require('unist-util-visit');
module.exports = options => tree => {
visit(
tree,
// only visit p tags that contain an img element
node =>
node.tagName === 'p' && node.children.some(n => n.tagName === 'img'),
node => {
console.log(node);
}
);
};
When we run this, we can see there’s only one paragraph node logged:
Now that we have the image attributes, we can start to change the AST. Remember, because ASTs can be really large, we mutate them in place to avoid creating lots of copies and potentially slowing our script down.
We start by changing the node’s tagName to be a figure instead of a paragraph. The rest of the details can stay the same for now.
Make the following changes in src/img-to-figure.js:
const visit = require('unist-util-visit');
module.exports = options => tree => {
visit(
tree,
// only visit p tags that contain an img element
node =>
node.tagName === 'p' && node.children.some(n => n.tagName === 'img'),
node => {
node.tagName = 'figure';
}
);
};
If we run our script again and look at the output, we can see that we’re getting closer!
<h1>Hello World!</h1>
<figure><img src="<https://images.dog.ceo/breeds/corgi-cardigan/n02113186_1030.jpg>" alt="cardigan corgi">An adorable corgi!</figure>
<p>Some more text goes here.</p>
To avoid needing to write custom syntax, we’re going to use any text passed inline with an image as the image caption.
We can make an assumption that usually images don’t have inline text in Markdown, but it’s worth noting that this could 100% cause unintended captions to appear for people writing Markdown. We’re going to take that risk in this tutorial. If you’re planning to put this into production, make sure to weigh the trade-offs and choose what’s best for your situation.
To use the text, we’re going to look for a text node inside our parent node. If we find one, we want to grab its value as our caption. If no caption is found, we don’t want to transform this node at all, so we can return early.
Make the following changes to src/img-to-figure.js to grab the caption:
const visit = require('unist-util-visit');
module.exports = options => tree => {
visit(
tree,
// only visit p tags that contain an img element
node =>
node.tagName === 'p' && node.children.some(n => n.tagName === 'img'),
node => {
// find the text node
const textNode = node.children.find(n => n.type === 'text');
// if there's no caption, we don't need to transform the node
if (!textNode) return;
const caption = textNode.value.trim();
console.log({ caption });
node.tagName = 'figure';
}
);
};
Now that we have our caption text, we can add a figcaption to display it. We could do this by creating a new node and deleting the old text node, but since we’re mutating in place it’s a little less complicated to just change the text node into an element.
Elements don’t have text, though, so we need to add a new text node as a child of the figcaption element to display the caption text.
Make the following changes to src/img-to-figure.js to add the caption to the markup:
const visit = require('unist-util-visit');
module.exports = options => tree => {
visit(
tree,
// only visit p tags that contain an img element
node =>
node.tagName === 'p' && node.children.some(n => n.tagName === 'img'),
node => {
// find the text node
const textNode = node.children.find(n => n.type === 'text');
// if there's no caption, we don't need to transform the node
if (!textNode) return;
const caption = textNode.value.trim();
// change the text node to a figcaption element containing a text node
textNode.type = 'element';
textNode.tagName = 'figcaption';
textNode.children = [
{
type: 'text',
value: caption
}
];
node.tagName = 'figure';
}
);
};
If we run the script again with node src/index.js, we see the transformed image wrapped in a figure element and described with a figcaption!
<h1>Hello World!</h1>
<figure><img src="<https://images.dog.ceo/breeds/corgi-cardigan/n02113186_1030.jpg>" alt="cardigan corgi"><figcaption>An adorable corgi!</figcaption></figure>
<p>Some more text goes here.</p>
Now that we’ve made a bunch of transformations, we want to save those adjustments to an actual file so we can share them.
Since the Markdown doesn’t include a full HTML document, we’re going to add one more rehype plugin called rehype-document to add the full document structure and a title tag.
Run the script again and we’ll be able to see a new folder in root called public, and inside that we’ll see home.html. Inside, our transformed document is saved!
If we open public/home.html in a browser, we can see our transformed Markdown rendered as a figure with a caption.
Holy buckets! Look at that adorable corgi! And we know it’s adorable because the caption tells us so.
What to do next
Transforming files using ASTs is extremely powerful — with it, we’re able to create pretty much anything we can imagine in a safe way. No regexes or string parsing required!
From here, you can dig deeper into the ecosystem of plugins for remark and rehype to see more of what’s possible and get more ideas for what you can do with AST transformation, from building your own Markdown-powered static site generator; to automating performance improvements by modifying code in-place; to whatever you can imagine!
GoGetSSL is a company that sells SSL certificates. You know, those things that are required to make your site use https://, not http:// which doesn’t feel like an optional choice these days with browsers making sites looks scarily insecure without it and search engines telling us is a ranking factor. I’m talking to developers that generally know this though, and I bet your question is exactly the same as the first question I had:
Why would I pay money for an SSL certificate when I can use Let’s Encrypt for free?
So I asked them. This way I could make sure I understand it and then relay that information to you. Turns out, there is a bunch of stuff you get for a buying an SSL certificate from GoGetSSL. One is particularly interesting: they have free certificates too, and you don’t have to do fancy command-line stuff to get one, and include customer support and other benefits. So there is that.
Here’s a dozen other things they told me.
Paid SSL can use ECC (Elliptic Curve Cryptography, an popular alternative to RSA). All GoGetSSL certificates have ECC included.
Paid SSL has Multi-Domain and Multi-Domain Wildcard SSL certificate which allow protecting up to 250 different wildcard domains with the same certificate.
Let’s Encrypt can be painful for some users who don’t have knowledge of using the command line and configuring servers.
Paid SSL provides SSL management for you, like letting you know when your certificate is going to expire. Let’s Encrypt has automatic 90-day renewals, but it has a volume limit. If someone floods them with new certificates, you may not receive your renewal SSL in time and could potentially leave your site unprotected.
Paid SSL verifies the business organization, which is an extra level of trust for customers. You can actually check the owner of a website within the certificate.
Paid SSL can include an LEI code, which is a cross-check verification for the organization. Let’s Encrypt would never have that, as it is a paid feature.
Paid SSL offers a dynamic site seal logo with identity verification.
Paid SSL can protect the public IP address (a very popular product right now).
Paid SSL can have a warranty (the certificate vendor must provide reimbursement for end-users who are charged fraudulently).
Paid SSL has premium customer support.
Paid SSL may issue Code Signing Certificates (assurance that a piece of software is from a particular developer and has not been tampered with). Let’s Encrypt does not offer this.
Paid SSL may issue Personal Authentication / S/MIME SSL certificates (like an SSL certificate for email), another thing Let’s Encrypt does not offer.
Sound good? Try GoGetSSL for your SSL certificates.
The EU’s second payment services directive (PSD2) will be in full force come September 14, 2019. With the deadline looming, everyone in the payment industry is concerned about becoming compliant before it’s too late. Of the main players — banks, payment service providers, and business owners — the latter has the least amount of insight on the matter.
To help business owners bridge this knowledge gap, we put together this guide on how to be PSD2 compliant. It includes approaches you can take to meet PSD2’s applicable regulations and what changes to expect from the directive. Check out the chapter synopsis below to get a high-level picture of the information we’re presenting, then dive right in to learn all about PSD2.
Chapter synopsis
Chapter 1: Introduction.
Chapter 2: Why the EU needed the payment services directive. PSD2 is the updated version of PSD. See why PSD was needed in the first place, what it covered, and why it became outdated.
Chapter 3: PSD2 compliant payment services. This chapter will help you learn more on the progress of major payment gateway services on their quest to become PSD2 compliant.
Chapter 4: PSD2 compliance examples. This section will serve as a compilation of PSD2 compliance announcements.
Chapter 5: What changes to expect from PSD2. PSD2 is bringing a lot of changes to the payment industry, most notably strong customer authentication. Learn more about this important payment concept in this chapter.
Chapter 6: PSD2’s impact on payment service providers. In this chapter, learn more about how PSD2 is impacting payment service providers and which widely used providers are or will be PSD2 compliant.
Chapter 7: PSD2’s impact on online businesses. In this chapter, learn more about PSD2’s impact from the perspective of online businesses — namely, their concerns and how they can become PSD2 compliant.
Chapter 8: PSD2 and JotForm. This chapter builds on the business concerns presented in the previous chapter and talks about a tool that helps business owners improve their customer experience.
Remember to bookmark this guide for later reference. You’ll undoubtedly have questions about PSD2 as the deadline nears and even afterward. This guide will provide you with the answers.
How to be PSD2 Compliant
As a business owner, there are two primary approaches you can take to comply with PSD2:
Choose a PSD2-compliant PSP. Many payment service providers (PSPs) offer hosted checkout options that take on the burden of PSD2 compliance themselves, assuming they are or will be compliant by the deadline. If you engage with one of these PSPs, you’ll be in the clear. “You’ll also be able to better focus on your core business instead of the legal and administrative concerns of compliance,” says Sandra Wróbel-Konior of SecurionPay.
Build authentication into your checkout flow. Whether you want to retain control over the checkout experience directly, or you use a PSP without a hosted checkout option, you’ll have to handle implementing 3D Secure 2.0 into your payment flow yourself. But once you do, you’ll be compliant.
An example application 3D Secure 2.0 with Two-Factor Authentication
Whichever approach you choose, you’ll need the right tools to keep your business running smoothly after PSD2 is in full force. Check out how JotForm can help, along with its efforts in being PSD2 compliant, in the next chapter.
PSD2-compliant providers
PSD2 will have significant consequences for nearly all banks, online payment processors, and third-party payment providers. Here’s a rundown of the short- and long-term PSD2 compliance action plans a few major payment providers have announced.
Stripe is planning to be compliant by the September 14 deadline. EU customers using products such as Stripe and Stripe Connect shouldn’t have any compliance issues. Plus, JotForm has completed the necessary technical steps to become PSD2 compliant for Stripe users.
PayPal also pledges to be fully compliant with the new PSD2 regulations by the deadline. Third-party PayPal providers should research the steps they need to take to be compliant.
CyberSource has announced that they will be able to support 3D Secure 2.0, which is a crucial part of SCA and PSD2. However, they require their third-party users to upgrade to their latest integration.
Unlike many payment methods, Square has not made any public statements about PSD2. At the moment, it’s unclear if they are planning to be compliant. They haven’t provided any information about what their customers should do.
Authorize.Net has also remained silent about PSD2. It’s likely that they will not be PSD2 compliant. One option is to move to CyberSource, an Authorize.Net sister company that has announced they will be PSD2 compliant.
European-based online payment processors Klarna, Ingenico, and Wordline have been working hard to be in line with PSD2 legislation. In fact, Ingenico declared themselves PSD2 compliant as of May 29, 2018.
PSD2 compliance examples
Below are some of the news and press releases from payment gateways about their PSD2 compliance efforts.
PayPal will be ready for PSD2-compliant checkout.Stripe is working to be PSD2 compliant for their European customers before the deadline.Cybersource, a subsidiary of Visa Inc. also promises to be PSD2 compliant.European-based Ingenico is already PSD2 compliant.
Why the EU needed the payment services directive
Currently, the entire payment industry is focused on PSD2 — and for good reason. But to truly understand something, you have to know where it came from. That’s why we’re exploring the EU’s first payment services directive (PSD) and the reason it was created.
The origin of PSD
Much-needed regulation
In the early 2000s, payment services began extending beyond the walls of traditional financial institutions. New entrants to the payment industry, like intermediaries and other service providers, meant banks were no longer the only players. These new entrants offered payment services that didn’t necessarily fit within the boundaries of existing rules.
According to Jeremy Bellino of Worldpay, “PSD’s aim was to boost competition across Europe by allowing nonbanks access to the industry, and to create a more level playing field for both consumers and payment providers.”
In addition, the EU felt it necessary to make sure customers were confident that the payments they made were secure. So it created a framework in the form of PSD to better regulate payment services across the EU, replacing individual countries’ national rules.
What PSD covered
PSD created a number of rules, regulations, and guiding points that impacted consumers, merchants, and PSPs alike, including the following:
Conditions and information requirements for payment services should be transparent.
Consumers should receive relevant information (for free) before entering into any binding payment service contracts. They should also be able to request their contracts, in writing, at any point during the contract term — again, without being charged.
Consumers should be able to terminate their contracts with payment service providers after a year without incurring charges. And while consumers need only provide a month’s notice prior to termination, the PSP must provide at least two months’ notice.
PSPs must not hold consumers liable for losses due to a compromised payment instrument (such as a lost or stolen credit card) once the consumer has notified the PSP of the situation. Along with this rule, the consumer should be held liable for a “limited amount” to provide an incentive for them to notify the PSP of the situation quickly.
In all, there are hundreds of points the EU put forth in PSD that helped shape the payment industry into a more regulated space. You can read them all in the European Commission’s legislative text on PSD.
Why PSD became outdated
While PSD set a clear precedent for providing structure and security within the payment landscape, it couldn’t remain relevant forever. Even as PSD came into force, the payment industry continued to evolve, introducing new technology, processes, and use cases that tested the limits of the original framework. The rise of e-commerce and the introduction of smartphones and other mobile devices are key examples of the type of modern elements PSD could not account for.
Some of the language PSD used showcases why its framework can’t hold up in today’s digitally connected world:
“As the payer is usually present when he gives the payment order, it is not necessary to require that information should in every case be provided on paper or on another durable medium. The payment service provider may give information orally over the counter or make it otherwise easily accessible, for example by keeping the conditions on a notice board on the premises.”
To be fair, PSD did account for some digital aspects of the payment industry, namely e-commerce transactions; however, the space has grown and changed since then, leaving PSD obsolete. Hence the need for PSD2.
Now that we’ve covered the origin story of PSD, let’s get into the changes PSD2 will bring to the payment industry.
What changes to expect after PSD2
Nearly a decade after PSD went into force, the EU determined that an updated version of the directive was necessary. Enter its replacement, PSD2. The regulations put forth in PSD2 account for the modernization of the payment industry in ways PSD couldn’t.
Bellino calls out a key distinction between the first and second versions: “While more innovation and competition remains a central objective, the primary intention of PSD2 is increasing security and reducing overall fraud in the payments ecosystem.”
This fact isn’t surprising given concerning stats about fraud from a 2018 report by the European Central Bank: Within the Single Euro Payments Area (SEPA), the value of CNP fraud losses in 2016 was €1.32 billion. This made it the largest category of fraud in absolute value. In addition, unlike ATM and POS fraud, CNP fraud was the only fraud category that increased compared to the previous year.
What changes does PSD2 enact, and how do they impact the payment industry and fraud rates? Keep reading to find out.
Exploring PSD2
What is PSD2?
PSD2, or the second payment services directive, is a collection of rules and guiding points for regulating the payment industry. According to the European Commission, the purpose of the directive is to “improve the existing EU rules for electronic payments,” making the international payment process (within the EU) easier and more secure.“It takes into account emerging and innovative payment services, such as internet and mobile payments.”
“PSD2 will revolutionize the payment industry, particularly with its open banking initiative,” says Bellino. The initiative provides regulated third-party providers (TPPs) access to consumer and business bank accounts, provided the account holders have consented. This enables consumers to more easily pay for online purchases directly from their bank accounts, reducing processing costs and chargeback risks. It also paves the way for TPPs to identify and create new payment methods — a tieback to PSD2’s intention to increase innovation in the industry.
We provide more details about the entities PSD2 impacts, the important deadlines surrounding the directive, and more in our post that answers the question, “What is PSD2?”
Introducing SCA
PSD2 introduces another big change in the form of strong customer authentication (SCA). Since it’s performed at the time of purchase, SCA is PSD2’s main weapon to combat fraud. Having users verify their identities immediately before remitting payment is the last line of defense before money and items are potentially lost as the result of a fraudulent transaction.
The European Commission defines SCA as an authentication that uses at least two of three verification elements:
Knowledge — something only the user knows. “These are things like a password or a PIN,” explains Bellino.
Possession — something only the user possesses. “Think debit or credit card, or a mobile phone,” Bellino says.
Inherence — something the user is. “This will involve some type of biometric identifier, such as facial recognition or a fingerprint scan,” Bellino notes.
Check out this post that goes into more detail on who SCA is for, how it’s delivered, and more.
SCA exemptions
All countries within the European Economic Area (EEA), including the U.K. (regardless of the outcome of Brexit), are subject to SCA enforcement. Additionally, every business that accepts electronic payments within the EEA is required to be SCA compliant. No businesses are excluded, regardless of the vertical. However, there are several exclusions and exemptions business owners may be able to take advantage of.
“SCA exclusions are out of scope of the SCA mandate, meaning SCA will not be performed,” Bellino explains. These include
One leg out transactions — payments where the card issuer or acquirer is based outside of the EEA. “For example, if I am a U.S.-based consumer with a U.S.-issued credit card and I want to make a purchase from a U.K.-based business, SCA would not be required,” Bellino explains.
Merchant-initiated transactions — transactions initiated by the payee (merchant) on behalf of the consumer, such as recurring metered billing and fixed or variable subscriptions/installments. “However,” Bellino cautions, “SCA does apply on the first transaction, when the consumer is establishing the recurring agreement.”
Mail orders/telephone orders (MOTOs) — These are excluded because the technology to perform SCA does not yet exist for these channels. “We strongly believe this will change in the future as fraudsters turn their attention to MOTOs as the e-commerce space becomes tougher to crack,” notes Bellino.
“SCA exemptions are within the scope of the SCA mandate but must be requested by the merchant, acquirer, or PSP,” says Bellino. These include
Low-risk transactions — transactions that have been assessed as low risk in real time via a process called transaction risk. To request this exemption, the PSP fraud rate must be below the approved threshold, and the transaction value may not exceed €500.
Low-value transactions — remote electronic payments less than or equal to €30. This exemption applies to up to five consecutive payments or when the cumulative amount since the last SCA is less than or equal to €100.
Whitelists of beneficiaries — when a cardholder adds a merchant to a whitelist maintained by the issuing bank, the merchant doesn’t have to use SCA for authentication. “We expect whitelisting support to be more widely available in 2020,” adds Bellino.
Corporate payments — B2B payments using a secure, dedicated process. These are usually corporate cards that are tied to an entity, not an individual. They are typically used for lodging or are virtual.
Now that we’ve covered PSD2 and its changes from a broad perspective, the next chapter will consider the perspective of payment gateways, processors, and other payment service providers.
PSD2’s impact on online businesses
Like PSPs, online business owners must comply with PSD2 to operate successfully in the EU. And though many of their concerns may overlap with PSPs, online business owners have a different perspective. Keep reading to see how PSD2 impacts your business and what you can do to be compliant.
PSD2 and online businesses
Declined payments
The biggest issue facing online businesses that don’t comply with PSD2 is declined payments. Failure to execute SCA during the payment process means that banks, which ultimately decide whether to accept a transaction, will decline the payment.
Not only does this result in a failed sale, but it also frustrates customers. Some customers may decide to use another payment method, such as a bank draft if it’s available, but many will not.
Wróbel-Konior explains the implications: “European businesses, in aggregate, can lose billions of euros in the first months after SCA is brought into force, as a number of merchants have no idea what these new requirements really mean for their businesses and how they can impact the bottom line.”
Conversion rates
Though online business owners know SCA is required, they are also keenly aware that adding any friction in the checkout or payment experience negatively impacts conversion rates. “They are concerned about SCA from a conversion perspective, as it impacts the customer experience,” says Wróbel-Konior.
Moving people from interested visitors to paying customers for products and services is a delicate dance that, when interrupted, can result in an unfortunate tumble. In this metaphor, that tumble is akin to a failed sale — a nightmare for any business owner.
SCA adds a mandatory step, namely authorization, which is additional friction for customers. As mentioned previously, the primary method of enacting SCA is through 3D Secure 2.0. Even though this method will be common across the payment landscape, the payment experience may differ depending on how a business or PSP has designed the payment flow.
Wróbel-Konior calls out another consideration: “The challenge will be to provide a smooth user experience depending on the transaction type. For example, it can get more complex with recurring payments.”
Most subscription-based payments are perceived as merchant-initiated, meaning they are outside the scope of SCA. (We discussed this exclusion in Chapter 3.) However, the decision on whether the transaction should be authenticated is ultimately up to the bank.
“Imagine how frustrating it would be for customers to authenticate each of their recurring payments every month. This is why payment platforms need to advance their systems to simplify the purchase process for customers, and aim to help merchants retain their conversion rates,” explains Wróbel-Konior.
How to be PSD2 compliant
As a business owner, there are two primary approaches you can take to comply with PSD2:
Choose a PSD2-compliant PSP. Many PSPs offer hosted checkout options that take on the burden of PSD2 compliance themselves, assuming they are or will be compliant by the deadline. If you engage with one of these PSPs, you’ll be in the clear. “You’ll also be able to better focus on your core business instead of the legal and administrative concerns of compliance,” says Wróbel-Konior.
Build authentication into your checkout flow. Whether you want to retain control over the checkout experience directly, or you use a PSP without a hosted checkout option, you’ll have to handle implementing 3D Secure 2.0 into your payment flow yourself. But once you do, you’ll be compliant.
Whichever approach you choose, you’ll need the right tools to keep your business running smoothly after PSD2 is in full force. Check out how JotForm can help, along with its efforts in being PSD2 compliant, in the next chapter.
Impact on payment service providers
Payment service providers (PSPs) in the EU must abide by PSD2 regulations to operate successfully within the region. In the previous chapter, we discussed SCA and why it’s an important aspect of PSD2.
The directive calls for all member states within the EU to enforce the use of SCA with PSPs anytime a user
Accesses their payment account online
Initiates a digital transaction
Performs any action through a remote channel where payment fraud could occur
PSPs will also need to institute appropriate security measures to protect the confidentiality and integrity of users’ credentials.
“PSPs shouldn’t look at complying with PSD2 as only unintentional burdens that need to be managed,” cautions Bellino. “The innovation aspect is an important one to consider as well.” (As a reminder, we noted how PSD2’s open banking initiative provides the opportunity for PSPs of all types to formulate new methods of payment.)
For example, according to a Worldpay report on global payments, by 2022, the number of European consumers paying online with a bank transfer is expected to exceed those using a credit card.
“Consider the Netherlands, where 57 percent of consumers use iDEAL, a direct online transfer from the consumer bank account to the bank account of a merchant. These examples showcase that identifying and providing the preferred payment method for consumers is essential to increasing sales and revenue, increasing security, and reducing fraud,” explains Bellino.
PSD2 and PSPs
3D Secure 2.0
Closely related to SCA is 3D Secure 2.0, which is how SCA is performed at the time of purchase. For added clarity, Bellino defines 3D secure 2.0 as “the new standard through which SCA is achieved when using a credit or debit card in ecommerce and similar spaces, where transactions are primarily made through digital means.”
SCA and 3D Secure 2.0 are the main determinants of whether a PSP is PSD2 compliant. We looked into four of the major PSPs used by EU businesses to see whether each is or will be instituting these components to become compliant by the deadline:
PayPal. This PSP has made it very clear that they are or will be compliant with PSD2. However, business owners may need to take extra steps depending on their payment setup.
Stripe. This is another PSP that has said they are or will be PSD2 compliant, though not all of their products are currently included.
Authorize.Net. Though Authorize.Net appears to have no plans for becoming PSD2 compliant, it has a sister brand that is compliant.
Square. Square is a special case, as it remains unclear whether it will be PSD2 compliant as of September 2019.
Consequences of failing to comply with PSD2
Failure to comply with PSD2 means businesses that serve EU customers will seek out other PSPs that are PSD2 compliant. This effectively ensures the noncompliant PSP will suffer a significant loss of business or, in the case of PSPs that have only EU customers, a complete loss of business. Simply put, a PSP that serves the EU cannot hope to operate successfully if it doesn’t comply with PSD2 regulations, specifically SCA.
While understanding PSPs’ perspectives is important, business owners have concerns about how PSD2 will impact them. We explore these in the next chapter.
JotForm Payment Forms
As an online business owner, you’re always looking for the best way to convert site visitors to paying customers. Unfortunately, SCA adds an extra step in the payment process, which means more friction for your customers.
For the many reasons laid out in previous chapters, implementing SCA is unavoidable when serving EU customers; however, there are alternative ways for you to improve the customer experience.
Enter JotForm, the easy-to-use online form builder. With JotForm, you can
Enjoy a selection of more than 10,000 online form templates
Create branded, amazing-looking order forms to improve customer perception and conversion on your digital goods and physical products
Collect customer information that’s important for delivering your products and services
Accept payments by integrating order forms with your payment processor of choice
Is JotForm PSD2 compliant? Recall that the onus for PSD2 compliance is primarily on banks and payment service providers (PSPs) — the entities that hold, manage, and are otherwise accountable for your funds at any point during the payment process.
Since JotForm acts as a convenient connector to PSPs, our main focus is ensuring the gateway between us and the PSP is set up appropriately. So the real question is whether the PSP you want to use is compliant. We discussed the PSD2 compliance of several widely used PSPs in Chapter 5.
Your order form options
With more than 10,000 form templates on JotForm, it can be hard to know where to begin. We call out a few forms you might like below, depending on what type of business you’re running. (FYI, our forms come in classic and card versions, which offer visually distinct differences. Choose which style your customers prefer.)
T-shirt order form
Do you sell preprinted or custom-made T-shirts? Here’s an order form template that’s been used more than 1,800 times. Make the form yours by adding high-quality images of your T-shirts and a compelling description.
By default, customers can select the shirt quantity and size, but you can add additional fields if you need more information from them.
Own a bakery? Yum! This themed cake order form has been used 7,000+ times. It could be just what you need to give your customers the opportunity to describe their dream cake.
Besides contact information, this form allows customers to indicate the date they need the cake, serving size, flavor, filling, theme, and more. Customers can even add images of cakes to help you deliver the perfect tasty centerpiece.
Are you a wedding or party photographer? Do you shoot portrait or scenery photos? Then you need a form for people to request the photo packages you offer.
This form comes with prebuilt options customers can pick from. You can, of course, adjust the options to suit your pricing and package offerings. Or feel free to add even more packages.
Any of the above order form templates (or hundreds of others) will ensure you’re ready for business once PSD2 comes fully into force — assuming you’ve used one of the compliance approaches we laid out in Chapter 4.
More about your PSD2 guides
Jeremy Bellino
Bellino is the specialist sales manager at Worldpay, a global acquirer headquartered in London, United Kingdom, and Cincinnati, Ohio. With a decade of experience in payments and payment technology, he’s responsible for supporting customers to make sure they comply with PSD2 SCA in the United States.
“PSD2 is a complex topic that takes a lot of explaining. I’m happy to help anyone who doesn’t quite grasp the topic,” he says.
Sandra Wróbel-Konior
Wróbel-Konior is the content marketing manager at SecurionPay, an online payment platform based in Switzerland. She helps spread the word about PSD2 and how her company is PSD2 compliant to make sure that each SecurionPay client is on the same page.
“We know how confusing PSD2 can be, and we have taken every stride to make compliance as easy as possible for merchants to understand and abide by,” she says.
The EU’s second payment services directive (PSD2) will be in full force come September 14, 2019. With the deadline looming, everyone in the payment industry is concerned about becoming compliant before it’s too late. Of the main players — banks, payment service providers, and business owners — the latter has the least amount of insight on the matter.
To help business owners bridge this knowledge gap, we put together this guide on how to be PSD2 compliant. It includes approaches you can take to meet PSD2’s applicable regulations and what changes to expect from the directive. Check out the chapter synopsis below to get a high-level picture of the information we’re presenting, then dive right in to learn all about PSD2.
Chapter synopsis
Chapter 1: Introduction.
Chapter 2: Why the EU needed the payment services directive. PSD2 is the updated version of PSD. See why PSD was needed in the first place, what it covered, and why it became outdated.
Chapter 3: PSD2 compliant payment services. This chapter will help you learn more on the progress of major payment gateway services on their quest to become PSD2 compliant.
Chapter 4: PSD2 compliance examples. This section will serve as a compilation of PSD2 compliance announcements.
Chapter 5: What changes to expect from PSD2. PSD2 is bringing a lot of changes to the payment industry, most notably strong customer authentication. Learn more about this important payment concept in this chapter.
Chapter 6: PSD2’s impact on payment service providers. In this chapter, learn more about how PSD2 is impacting payment service providers and which widely used providers are or will be PSD2 compliant.
Chapter 7: PSD2’s impact on online businesses. In this chapter, learn more about PSD2’s impact from the perspective of online businesses — namely, their concerns and how they can become PSD2 compliant.
Chapter 8: PSD2 and JotForm. This chapter builds on the business concerns presented in the previous chapter and talks about a tool that helps business owners improve their customer experience.
Remember to bookmark this guide for later reference. You’ll undoubtedly have questions about PSD2 as the deadline nears and even afterward. This guide will provide you with the answers.
How to be PSD2 Compliant
As a business owner, there are two primary approaches you can take to comply with PSD2:
Choose a PSD2-compliant PSP. Many payment service providers (PSPs) offer hosted checkout options that take on the burden of PSD2 compliance themselves, assuming they are or will be compliant by the deadline. If you engage with one of these PSPs, you’ll be in the clear. “You’ll also be able to better focus on your core business instead of the legal and administrative concerns of compliance,” says Sandra Wróbel-Konior of SecurionPay.
Build authentication into your checkout flow. Whether you want to retain control over the checkout experience directly, or you use a PSP without a hosted checkout option, you’ll have to handle implementing 3D Secure 2.0 into your payment flow yourself. But once you do, you’ll be compliant.
An example application 3D Secure 2.0 with Two-Factor Authentication
Whichever approach you choose, you’ll need the right tools to keep your business running smoothly after PSD2 is in full force. Check out how JotForm can help, along with its efforts in being PSD2 compliant, in the next chapter.
PSD2-compliant providers
PSD2 will have significant consequences for nearly all banks, online payment processors, and third-party payment providers. Here’s a rundown of the short- and long-term PSD2 compliance action plans a few major payment providers have announced.
Stripe is planning to be compliant by the September 14 deadline. EU customers using products such as Stripe and Stripe Connect shouldn’t have any compliance issues. Plus, JotForm has completed the necessary technical steps to become PSD2 compliant for Stripe users.
PayPal also pledges to be fully compliant with the new PSD2 regulations by the deadline. Third-party PayPal providers should research the steps they need to take to be compliant.
CyberSource has announced that they will be able to support 3D Secure 2.0, which is a crucial part of SCA and PSD2. However, they require their third-party users to upgrade to their latest integration.
Unlike many payment methods, Square has not made any public statements about PSD2. At the moment, it’s unclear if they are planning to be compliant. They haven’t provided any information about what their customers should do.
Authorize.Net has also remained silent about PSD2. It’s likely that they will not be PSD2 compliant. One option is to move to CyberSource, an Authorize.Net sister company that has announced they will be PSD2 compliant.
European-based online payment processors Klarna, Ingenico, and Wordline have been working hard to be in line with PSD2 legislation. In fact, Ingenico declared themselves PSD2 compliant as of May 29, 2018.
PSD2 compliance examples
Below are some of the news and press releases from payment gateways about their PSD2 compliance efforts.
PayPal will be ready for PSD2-compliant checkout.Stripe is working to be PSD2 compliant for their European customers before the deadline.Cybersource, a subsidiary of Visa Inc. also promises to be PSD2 compliant.European-based Ingenico is already PSD2 compliant.
Why the EU needed the payment services directive
Currently, the entire payment industry is focused on PSD2 — and for good reason. But to truly understand something, you have to know where it came from. That’s why we’re exploring the EU’s first payment services directive (PSD) and the reason it was created.
The origin of PSD
Much-needed regulation
In the early 2000s, payment services began extending beyond the walls of traditional financial institutions. New entrants to the payment industry, like intermediaries and other service providers, meant banks were no longer the only players. These new entrants offered payment services that didn’t necessarily fit within the boundaries of existing rules.
According to Jeremy Bellino of Worldpay, “PSD’s aim was to boost competition across Europe by allowing nonbanks access to the industry, and to create a more level playing field for both consumers and payment providers.”
In addition, the EU felt it necessary to make sure customers were confident that the payments they made were secure. So it created a framework in the form of PSD to better regulate payment services across the EU, replacing individual countries’ national rules.
What PSD covered
PSD created a number of rules, regulations, and guiding points that impacted consumers, merchants, and PSPs alike, including the following:
Conditions and information requirements for payment services should be transparent.
Consumers should receive relevant information (for free) before entering into any binding payment service contracts. They should also be able to request their contracts, in writing, at any point during the contract term — again, without being charged.
Consumers should be able to terminate their contracts with payment service providers after a year without incurring charges. And while consumers need only provide a month’s notice prior to termination, the PSP must provide at least two months’ notice.
PSPs must not hold consumers liable for losses due to a compromised payment instrument (such as a lost or stolen credit card) once the consumer has notified the PSP of the situation. Along with this rule, the consumer should be held liable for a “limited amount” to provide an incentive for them to notify the PSP of the situation quickly.
In all, there are hundreds of points the EU put forth in PSD that helped shape the payment industry into a more regulated space. You can read them all in the European Commission’s legislative text on PSD.
Why PSD became outdated
While PSD set a clear precedent for providing structure and security within the payment landscape, it couldn’t remain relevant forever. Even as PSD came into force, the payment industry continued to evolve, introducing new technology, processes, and use cases that tested the limits of the original framework. The rise of e-commerce and the introduction of smartphones and other mobile devices are key examples of the type of modern elements PSD could not account for.
Some of the language PSD used showcases why its framework can’t hold up in today’s digitally connected world:
“As the payer is usually present when he gives the payment order, it is not necessary to require that information should in every case be provided on paper or on another durable medium. The payment service provider may give information orally over the counter or make it otherwise easily accessible, for example by keeping the conditions on a notice board on the premises.”
To be fair, PSD did account for some digital aspects of the payment industry, namely e-commerce transactions; however, the space has grown and changed since then, leaving PSD obsolete. Hence the need for PSD2.
Now that we’ve covered the origin story of PSD, let’s get into the changes PSD2 will bring to the payment industry.
What changes to expect after PSD2
Nearly a decade after PSD went into force, the EU determined that an updated version of the directive was necessary. Enter its replacement, PSD2. The regulations put forth in PSD2 account for the modernization of the payment industry in ways PSD couldn’t.
Bellino calls out a key distinction between the first and second versions: “While more innovation and competition remains a central objective, the primary intention of PSD2 is increasing security and reducing overall fraud in the payments ecosystem.”
This fact isn’t surprising given concerning stats about fraud from a 2018 report by the European Central Bank: Within the Single Euro Payments Area (SEPA), the value of CNP fraud losses in 2016 was €1.32 billion. This made it the largest category of fraud in absolute value. In addition, unlike ATM and POS fraud, CNP fraud was the only fraud category that increased compared to the previous year.
What changes does PSD2 enact, and how do they impact the payment industry and fraud rates? Keep reading to find out.
Exploring PSD2
What is PSD2?
PSD2, or the second payment services directive, is a collection of rules and guiding points for regulating the payment industry. According to the European Commission, the purpose of the directive is to “improve the existing EU rules for electronic payments,” making the international payment process (within the EU) easier and more secure.“It takes into account emerging and innovative payment services, such as internet and mobile payments.”
“PSD2 will revolutionize the payment industry, particularly with its open banking initiative,” says Bellino. The initiative provides regulated third-party providers (TPPs) access to consumer and business bank accounts, provided the account holders have consented. This enables consumers to more easily pay for online purchases directly from their bank accounts, reducing processing costs and chargeback risks. It also paves the way for TPPs to identify and create new payment methods — a tieback to PSD2’s intention to increase innovation in the industry.
We provide more details about the entities PSD2 impacts, the important deadlines surrounding the directive, and more in our post that answers the question, “What is PSD2?”
Introducing SCA
PSD2 introduces another big change in the form of strong customer authentication (SCA). Since it’s performed at the time of purchase, SCA is PSD2’s main weapon to combat fraud. Having users verify their identities immediately before remitting payment is the last line of defense before money and items are potentially lost as the result of a fraudulent transaction.
The European Commission defines SCA as an authentication that uses at least two of three verification elements:
Knowledge — something only the user knows. “These are things like a password or a PIN,” explains Bellino.
Possession — something only the user possesses. “Think debit or credit card, or a mobile phone,” Bellino says.
Inherence — something the user is. “This will involve some type of biometric identifier, such as facial recognition or a fingerprint scan,” Bellino notes.
Check out this post that goes into more detail on who SCA is for, how it’s delivered, and more.
SCA exemptions
All countries within the European Economic Area (EEA), including the U.K. (regardless of the outcome of Brexit), are subject to SCA enforcement. Additionally, every business that accepts electronic payments within the EEA is required to be SCA compliant. No businesses are excluded, regardless of the vertical. However, there are several exclusions and exemptions business owners may be able to take advantage of.
“SCA exclusions are out of scope of the SCA mandate, meaning SCA will not be performed,” Bellino explains. These include
One leg out transactions — payments where the card issuer or acquirer is based outside of the EEA. “For example, if I am a U.S.-based consumer with a U.S.-issued credit card and I want to make a purchase from a U.K.-based business, SCA would not be required,” Bellino explains.
Merchant-initiated transactions — transactions initiated by the payee (merchant) on behalf of the consumer, such as recurring metered billing and fixed or variable subscriptions/installments. “However,” Bellino cautions, “SCA does apply on the first transaction, when the consumer is establishing the recurring agreement.”
Mail orders/telephone orders (MOTOs) — These are excluded because the technology to perform SCA does not yet exist for these channels. “We strongly believe this will change in the future as fraudsters turn their attention to MOTOs as the e-commerce space becomes tougher to crack,” notes Bellino.
“SCA exemptions are within the scope of the SCA mandate but must be requested by the merchant, acquirer, or PSP,” says Bellino. These include
Low-risk transactions — transactions that have been assessed as low risk in real time via a process called transaction risk. To request this exemption, the PSP fraud rate must be below the approved threshold, and the transaction value may not exceed €500.
Low-value transactions — remote electronic payments less than or equal to €30. This exemption applies to up to five consecutive payments or when the cumulative amount since the last SCA is less than or equal to €100.
Whitelists of beneficiaries — when a cardholder adds a merchant to a whitelist maintained by the issuing bank, the merchant doesn’t have to use SCA for authentication. “We expect whitelisting support to be more widely available in 2020,” adds Bellino.
Corporate payments — B2B payments using a secure, dedicated process. These are usually corporate cards that are tied to an entity, not an individual. They are typically used for lodging or are virtual.
Now that we’ve covered PSD2 and its changes from a broad perspective, the next chapter will consider the perspective of payment gateways, processors, and other payment service providers.
PSD2’s impact on online businesses
Like PSPs, online business owners must comply with PSD2 to operate successfully in the EU. And though many of their concerns may overlap with PSPs, online business owners have a different perspective. Keep reading to see how PSD2 impacts your business and what you can do to be compliant.
PSD2 and online businesses
Declined payments
The biggest issue facing online businesses that don’t comply with PSD2 is declined payments. Failure to execute SCA during the payment process means that banks, which ultimately decide whether to accept a transaction, will decline the payment.
Not only does this result in a failed sale, but it also frustrates customers. Some customers may decide to use another payment method, such as a bank draft if it’s available, but many will not.
Wróbel-Konior explains the implications: “European businesses, in aggregate, can lose billions of euros in the first months after SCA is brought into force, as a number of merchants have no idea what these new requirements really mean for their businesses and how they can impact the bottom line.”
Conversion rates
Though online business owners know SCA is required, they are also keenly aware that adding any friction in the checkout or payment experience negatively impacts conversion rates. “They are concerned about SCA from a conversion perspective, as it impacts the customer experience,” says Wróbel-Konior.
Moving people from interested visitors to paying customers for products and services is a delicate dance that, when interrupted, can result in an unfortunate tumble. In this metaphor, that tumble is akin to a failed sale — a nightmare for any business owner.
SCA adds a mandatory step, namely authorization, which is additional friction for customers. As mentioned previously, the primary method of enacting SCA is through 3D Secure 2.0. Even though this method will be common across the payment landscape, the payment experience may differ depending on how a business or PSP has designed the payment flow.
Wróbel-Konior calls out another consideration: “The challenge will be to provide a smooth user experience depending on the transaction type. For example, it can get more complex with recurring payments.”
Most subscription-based payments are perceived as merchant-initiated, meaning they are outside the scope of SCA. (We discussed this exclusion in Chapter 3.) However, the decision on whether the transaction should be authenticated is ultimately up to the bank.
“Imagine how frustrating it would be for customers to authenticate each of their recurring payments every month. This is why payment platforms need to advance their systems to simplify the purchase process for customers, and aim to help merchants retain their conversion rates,” explains Wróbel-Konior.
How to be PSD2 compliant
As a business owner, there are two primary approaches you can take to comply with PSD2:
Choose a PSD2-compliant PSP. Many PSPs offer hosted checkout options that take on the burden of PSD2 compliance themselves, assuming they are or will be compliant by the deadline. If you engage with one of these PSPs, you’ll be in the clear. “You’ll also be able to better focus on your core business instead of the legal and administrative concerns of compliance,” says Wróbel-Konior.
Build authentication into your checkout flow. Whether you want to retain control over the checkout experience directly, or you use a PSP without a hosted checkout option, you’ll have to handle implementing 3D Secure 2.0 into your payment flow yourself. But once you do, you’ll be compliant.
Whichever approach you choose, you’ll need the right tools to keep your business running smoothly after PSD2 is in full force. Check out how JotForm can help, along with its efforts in being PSD2 compliant, in the next chapter.
Impact on payment service providers
Payment service providers (PSPs) in the EU must abide by PSD2 regulations to operate successfully within the region. In the previous chapter, we discussed SCA and why it’s an important aspect of PSD2.
The directive calls for all member states within the EU to enforce the use of SCA with PSPs anytime a user
Accesses their payment account online
Initiates a digital transaction
Performs any action through a remote channel where payment fraud could occur
PSPs will also need to institute appropriate security measures to protect the confidentiality and integrity of users’ credentials.
“PSPs shouldn’t look at complying with PSD2 as only unintentional burdens that need to be managed,” cautions Bellino. “The innovation aspect is an important one to consider as well.” (As a reminder, we noted how PSD2’s open banking initiative provides the opportunity for PSPs of all types to formulate new methods of payment.)
For example, according to a Worldpay report on global payments, by 2022, the number of European consumers paying online with a bank transfer is expected to exceed those using a credit card.
“Consider the Netherlands, where 57 percent of consumers use iDEAL, a direct online transfer from the consumer bank account to the bank account of a merchant. These examples showcase that identifying and providing the preferred payment method for consumers is essential to increasing sales and revenue, increasing security, and reducing fraud,” explains Bellino.
PSD2 and PSPs
3D Secure 2.0
Closely related to SCA is 3D Secure 2.0, which is how SCA is performed at the time of purchase. For added clarity, Bellino defines 3D secure 2.0 as “the new standard through which SCA is achieved when using a credit or debit card in ecommerce and similar spaces, where transactions are primarily made through digital means.”
SCA and 3D Secure 2.0 are the main determinants of whether a PSP is PSD2 compliant. We looked into four of the major PSPs used by EU businesses to see whether each is or will be instituting these components to become compliant by the deadline:
PayPal. This PSP has made it very clear that they are or will be compliant with PSD2. However, business owners may need to take extra steps depending on their payment setup.
Stripe. This is another PSP that has said they are or will be PSD2 compliant, though not all of their products are currently included.
Authorize.Net. Though Authorize.Net appears to have no plans for becoming PSD2 compliant, it has a sister brand that is compliant.
Square. Square is a special case, as it remains unclear whether it will be PSD2 compliant as of September 2019.
Consequences of failing to comply with PSD2
Failure to comply with PSD2 means businesses that serve EU customers will seek out other PSPs that are PSD2 compliant. This effectively ensures the noncompliant PSP will suffer a significant loss of business or, in the case of PSPs that have only EU customers, a complete loss of business. Simply put, a PSP that serves the EU cannot hope to operate successfully if it doesn’t comply with PSD2 regulations, specifically SCA.
While understanding PSPs’ perspectives is important, business owners have concerns about how PSD2 will impact them. We explore these in the next chapter.
JotForm Payment Forms
As an online business owner, you’re always looking for the best way to convert site visitors to paying customers. Unfortunately, SCA adds an extra step in the payment process, which means more friction for your customers.
For the many reasons laid out in previous chapters, implementing SCA is unavoidable when serving EU customers; however, there are alternative ways for you to improve the customer experience.
Enter JotForm, the easy-to-use online form builder. With JotForm, you can
Enjoy a selection of more than 10,000 online form templates
Create branded, amazing-looking order forms to improve customer perception and conversion on your digital goods and physical products
Collect customer information that’s important for delivering your products and services
Accept payments by integrating order forms with your payment processor of choice
Is JotForm PSD2 compliant? Recall that the onus for PSD2 compliance is primarily on banks and payment service providers (PSPs) — the entities that hold, manage, and are otherwise accountable for your funds at any point during the payment process.
Since JotForm acts as a convenient connector to PSPs, our main focus is ensuring the gateway between us and the PSP is set up appropriately. So the real question is whether the PSP you want to use is compliant. We discussed the PSD2 compliance of several widely used PSPs in Chapter 5.
Your order form options
With more than 10,000 form templates on JotForm, it can be hard to know where to begin. We call out a few forms you might like below, depending on what type of business you’re running. (FYI, our forms come in classic and card versions, which offer visually distinct differences. Choose which style your customers prefer.)
T-shirt order form
Do you sell preprinted or custom-made T-shirts? Here’s an order form template that’s been used more than 1,800 times. Make the form yours by adding high-quality images of your T-shirts and a compelling description.
By default, customers can select the shirt quantity and size, but you can add additional fields if you need more information from them.
Own a bakery? Yum! This themed cake order form has been used 7,000+ times. It could be just what you need to give your customers the opportunity to describe their dream cake.
Besides contact information, this form allows customers to indicate the date they need the cake, serving size, flavor, filling, theme, and more. Customers can even add images of cakes to help you deliver the perfect tasty centerpiece.
Are you a wedding or party photographer? Do you shoot portrait or scenery photos? Then you need a form for people to request the photo packages you offer.
This form comes with prebuilt options customers can pick from. You can, of course, adjust the options to suit your pricing and package offerings. Or feel free to add even more packages.
Any of the above order form templates (or hundreds of others) will ensure you’re ready for business once PSD2 comes fully into force — assuming you’ve used one of the compliance approaches we laid out in Chapter 4.
More about your PSD2 guides
Jeremy Bellino
Bellino is the specialist sales manager at Worldpay, a global acquirer headquartered in London, United Kingdom, and Cincinnati, Ohio. With a decade of experience in payments and payment technology, he’s responsible for supporting customers to make sure they comply with PSD2 SCA in the United States.
“PSD2 is a complex topic that takes a lot of explaining. I’m happy to help anyone who doesn’t quite grasp the topic,” he says.
Sandra Wróbel-Konior
Wróbel-Konior is the content marketing manager at SecurionPay, an online payment platform based in Switzerland. She helps spread the word about PSD2 and how her company is PSD2 compliant to make sure that each SecurionPay client is on the same page.
“We know how confusing PSD2 can be, and we have taken every stride to make compliance as easy as possible for merchants to understand and abide by,” she says.
