Connect with us

WORDPRESS

How to Accept SEPA Payments in WordPress (2 Easy Ways)

Published

on

How to Accept SEPA Payments in WordPress (2 Easy Ways)

Do you want to accept SEPA payments in WordPress?

By accepting SEPA payments on your website, you can reach customers within the SEPA region, which contains 36 European countries. This can help you get more sales as the region generates more than 20 billion transactions every year.

In this article, we will show you how to easily accept SEPA payments in WordPress.

Accept SEPA Payments in WordPress

Why Use SEPA Payments in WordPress?

The Single European Payments Area (SEPA) is a European Union initiative that aims to make it easy and convenient to make payments within and across the 36 member countries.

It creates a single Europe-wide market for Euro payments and uses the same set of rules and standards for domestic or cross-border money transfers.

This means that you can use your bank account to make Euro payments to anyone in the SEPA area, regardless of their bank or country.

Advertisement

By using SEPA payments on your WordPress website, you can directly accept payments from your customer’s bank account, making the process smooth and simple.

This payment method streamlines the transaction process and also charges lower fees than traditional cross-border payments.

Plus, if you have an online store or membership site, then integrating SEPA payments allows you to tap into a vast customer base across Europe, expanding your potential market reach.

Having said that, let’s see how to easily accept SEPA payments in WordPress, step by step. We will cover different methods, and you can use the quick links below to jump to the one you want to use:

Method 1: Accept SEPA Payments in WordPress Using WP Simple Pay (Recommended)

This method is recommended if you have a membership site or accept donations since you can receive money through a simple payment form. It is also a good option if you have a small online store.

For this method, we will be using WP Simple Pay. It is the best WordPress Stripe plugin on the market that allows you to accept online payments without needing to set up a shopping cart.

Advertisement

It comes with a payment form builder, premade templates, secure payment processing, and lets you accept SEPA payments.

First, you need to install and activate the WP Simple Pay plugin. For detailed instructions, see our step-by-step guide on how to install a WordPress plugin.

Note: WP Simple Pay has a free plan. However, you will need the pro version of the plugin to unlock the SEPA payments template.

Upon activation, a setup wizard will be launched on your screen. Here, simply click the ‘Let’s Get Started’ button.

The WP Simple Pay Setup Wizard Will Start AutomaticallyThe WP Simple Pay Setup Wizard Will Start Automatically

You will now be taken to the next step, where you must provide your license key and click the ‘Activate and Continue’ button.

You can find this information in your account on the WP Simple Pay website.

You’ll Be Asked to Enter Your WP Simple Pay License KeyYou’ll Be Asked to Enter Your WP Simple Pay License Key

Once you do that, you will have to connect the plugin to your Stripe account. Stripe is one of the best payment gateways that lets you accept online payments easily.

To do this, click the ‘Connect with Stripe’ button.

Advertisement
Connecting WP Simple Pay to StripeConnecting WP Simple Pay to Stripe

After that, you must log in to your Stripe account to connect it with WP Simple Pay.

If you don’t have an account yet, then you must create one to accept SEPA payments in WordPress. For more information, see our tutorial on how to accept payments with Stripe in WordPress.

Once you connect your account with the plugin, the setup wizard will ask you to configure your emails.

You can toggle different switches to receive email notifications for payment receipts, upcoming invoices, and payment notifications. Next, type the email address where you want to receive these notifications.

Finally, click the ‘Save and Continue’ button.

Note: If you have trouble sending or receiving email notifications, then you can go through our guide on how to properly configure your email settings.

Configure Your WP Simple Pay EmailsConfigure Your WP Simple Pay Emails

You can now exit the setup wizard to create a payment form for SEPA payments.

For this, you must visit the WP Simple Pay » Add New page from the WordPress admin sidebar.

Advertisement

This will take you to the ‘Select a template’ screen, where you will see numerous premade templates that you can use on your website.

From here, locate the SEPA Direct Debit Form template and click the ‘Use Template’ button under it.

Choose SEPA direct debit form templateChoose SEPA direct debit form template

You will now be directed to the ‘Add New Payment Form’ page, where you can start by adding a title and description for your form.

After that, you must select your form payment type as ‘On-site payment form’.

Add title and description for the SEPA payment formAdd title and description for the SEPA payment form

Next, you have to switch to the ‘Payment’ tab from the left column. From here, select preferred tax collection rates from under the ‘Tax Collection’ option.

Once you do that, add the price for the product/service that you are creating the form for under the ‘Amount’ option.

Add payment amount in the formAdd payment amount in the form

Now scroll down to the ‘Payment Methods’ section, where you will notice that the ‘SEPA Direct Debit’ method has already been selected.

However, if you also want to add other payment gateways like Klarna, Alipay, Affirm, or iDeal, then you can check the boxes next to these options.

Add SEPA as a payment methodAdd SEPA as a payment method

Next, switch to the ‘Form Fields’ tab from the sidebar on the left. Once you are there, you can add different form fields to your payment form and configure their settings by expanding the tab.

For example, you can add a coupon field to your payment form if you regularly offer discounts and coupons on your website.

Advertisement

You can also rearrange the order of the form fields by dragging and dropping them.

Add form fields to the SEPA payment formAdd form fields to the SEPA payment form

Once you do that, switch to the ‘Confirmation Page’ tab from the left column.

Here, you can type a message that will be displayed to the users once they successfully make a payment on your website.

Add a message for the payment confirmation pageAdd a message for the payment confirmation page

If you also want to send an email to users upon successfully making a purchase, then switch to the ‘Email Notifications’ tab.

Here, type the custom email that will be sent to users upon making a purchase using the SEPA payment form.

Add an email notification message for purchase confirmationAdd an email notification message for purchase confirmation

Next, switch to the ‘Payment Page’ tab and check the ‘Enable a dedicated payment page’ option.

WP Simple Pay will now allow you to create a custom page for your SEPA payment form without making a new page on your website.

Some new settings will now appear on the page where you can add a permalink, color scheme, image, and footer text for your form.

Customize SEPA payments formCustomize SEPA payments form

Once you are done customizing, click the ‘Publish’ button on the right to store your settings.

Now, go ahead and visit your WordPress site to view the payment form page.

Advertisement
SEPA payment form previewSEPA payment form preview

Alternatively, if you want to add the SEPA payment form to an existing page, then you must click the ‘Publish’ button once you add the form fields and configure confirmation messages.

After that, open a page of your liking in the WordPress block editor and click the add block ‘+’ button.

Next, you need to find and add the WP Simple Pay block to the page and select the SEPA payment form from the dropdown menu within the block.

Add the WP Simple Pay block to the page or postAdd the WP Simple Pay block to the page or post

Finally, click the ‘Update’ or ‘Publish’ button to store your settings.

Now, you can visit your WordPress site to view the SEPA payment form in action.

SEPA payment form previewSEPA payment form preview

Method 2: Accept SEPA Payments in WooCommerce Using FunnelKit Stripe Payment Gateway Plugin (Free)

If you have a WooCommerce store and are looking for a free way to accept SEPA payments, then this method is for you.

First, you need to install and activate Stripe Payment Gateway for WooCommerce. For detailed instructions, see our beginner’s guide on how to install a WordPress plugin.

It is a free plugin by FunnelKit that lets you easily add different payment gateways.

Upon activation, visit the WooCommerce » Settings page from the WordPress dashboard and switch to the ‘Payments’ tab.

Advertisement

Here, click the ‘Stripe Gateway’ option to open further settings.

Click the Stripe gateway optionClick the Stripe gateway option

On the new page, check the ‘Enable Stripe Gateway’ box. After that, you can also add a title and description for the payment gateway.

Next, click the ‘Save Changes’ button to store your settings and then click the ‘Stripe API Settings’ link at the top.

Check the Enable Stripe gateway optionCheck the Enable Stripe gateway option

This will take you to a new page where you must click on the ‘Connect to Stripe’ button to connect the payment gateway with your online store.

You will then be taken to a new screen where you must enter your Stripe username and password. If you don’t have an account, then you can create one from here.

For more details on how to do this, see our tutorial on how to accept payments with Stripe in WordPress.

Click the Connect With Stripe buttonClick the Connect With Stripe button

Once you connect your WooCommerce store with your account, click on the ‘SEPA’ link at the top. Here, check the ‘Enable Stripe SEPA Direct Debit’ option.

After that, you can also add a title, description, company name, and selling locations where this payment method can be displayed.

Enable SEPA Payments for your WooCommerce storeEnable SEPA Payments for your WooCommerce store

Finally, click the ‘Save Changes’ button to store your settings.

You have now successfully activated the SEPA payment method on your WooCommerce store. You can now see it on the checkout page of your store.

Advertisement
Pay with SEPAPay with SEPA

Bonus: Add PayPal in WordPress and WooCommerce

Apart from Stripe and SEPA, you can also use PayPal to accept payments all across Europe.

PayPal is one of the pioneers in the payment industry and offers a variety of services suitable for personal, business, and eCommerce. It also has a large user base in Europe, with over 400 million active accounts.

Plus, the payment gateway has a robust security system and seamless cross-border transactions, making PayPal an ideal choice.

You can easily add PayPal to your site using WPForms. It is the best WordPress PayPal plugin on the market that offers a drag-and-drop builder, premade form templates, and complete spam protection.

The plugin also comes with a PayPal addon that you can use to easily accept payments, donations, and online orders from your WordPress website. For detailed instructions, see our tutorial on how to connect WordPress to PayPal Commerce.

WPFormsWPForms

Other than that, you can also use WPForms to create contact forms, polls and surveys, registration forms, login forms, and so much more.

For more information, just see our complete WPForms review.

We hope this article helped you learn how to easily accept SEPA payments in WordPress. You may also want to see our article on how to accept credit card payments on your WordPress site and our top picks for the best PayPal alternatives for freelancers to collect payments in WordPress.

Advertisement

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address

WORDPRESS

10 Amazing WordPress Design Resouces – WordPress.com News

Published

on

By

10 Amazing WordPress Design Resouces – WordPress.com News

Whether you’re a design pro or a total newbie, you’ll find a great tool in this list that will take your website skills to the next level.

Designing a beautiful website from scratch can be difficult for developers of all skill levels. Luckily, in today’s Build and Beyond video, Jamie Marsland reveals his ten favorite WordPress design tools and websites to elevate your next build.

Get inspiration for your next website’s design and then start building with WordPress.com. Ready to get going? Click below to embark on your free trial today:

Here are the sites and resources mentioned in the video:

1713497163 978 10 Amazing WordPress Design Resouces – WordPresscom News

Heikei

Stunning backgrounds and visuals

1713497163 497 10 Amazing WordPress Design Resouces – WordPresscom News
1713497163 315 10 Amazing WordPress Design Resouces – WordPresscom News
1713497163 599 10 Amazing WordPress Design Resouces – WordPresscom News
1713497163 270 10 Amazing WordPress Design Resouces – WordPresscom News

Shots

Easy mockups for products and thumbnails

1713497163 518 10 Amazing WordPress Design Resouces – WordPresscom News
1713497163 631 10 Amazing WordPress Design Resouces – WordPresscom News

Coolors

Generate color palettes with a click

1713497163 689 10 Amazing WordPress Design Resouces – WordPresscom News
1713497163 719 10 Amazing WordPress Design Resouces – WordPresscom News
10 Amazing WordPress Design Resouces – WordPresscom News

Join 110.1M other subscribers

Advertisement

Source link

Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address
Continue Reading

WORDPRESS

[GET] The7 Website And Ecommerce Builder For WordPress

Published

on

By

The7 website and ecommerce builder for wordpress is the most customizable WordPress, Elementor, and WooCommerce theme available on the market up to …

Source link

Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address
Continue Reading

WORDPRESS

Making 43% of the Web More Dynamic with the WordPress Interactivity API – WordPress.com News

Published

on

By

Making 43% of the Web More Dynamic with the WordPress Interactivity API – WordPress.com News

Creating rich, engaging, and interactive website experiences is a simple way to surprise, delight, and attract attention from website readers and users. Dynamic interactivity like instant search, form handling, and client-side “app-like” navigation where elements can persist across routes, all without a full page reload, can make the web a more efficient and interesting place for all.

But creating those experiences on WordPress hasn’t always been the easiest or most straightforward, often requiring complex JavaScript framework setup and maintenance. 

Now, with the Interactivity API, WordPress developers have a standardized way for doing that, all built directly into core. 

The Interactivity API started as an experimental plugin in early 2022, became an official proposal in March 2023, and was finally merged into WordPress core with the release of WordPress 6.5 on April 2, 2024. It provides an easier, standardized way for WordPress developers to create rich, interactive user experiences with their blocks on the front-end.

ELI5: The Interactivity API and the Image Block

Several core WordPress blocks, including the Query Loop, Image, and Search blocks, have already adopted the Interactivity API. The Image block, in particular, is a great way to show off the Interactivity API in action. 

Advertisement

At its core, the Image blocks allow you to add an image to a post or page. When a user clicks on an image in a post or page, the Interactivity API launches a lightbox showing a high-resolution version of the image.

The rendering of the Image block is handled server-side. The client-side interactivity, handling resizing and opening the lightbox, is now done with the new API that comes bundled with WordPress. You can bind the client-side interactivity simply by adding the wp-on--click directive to the image element, referencing the showLightbox action in view.js.

You might say, “But I could easily do this with some JavaScript!” With the Interactivity API, the code is compact and declarative, and you get the context (local state) to handle the lightbox, resizing, side effects, and all of the other needed work here in the store object.

actions: {
			showLightbox() {
				const ctx = getContext();

				// Bails out if the image has not loaded yet.
				if ( ! ctx.imageRef?.complete ) {
					return;
				}

				// Stores the positons of the scroll to fix it until the overlay is
				// closed.
				state.scrollTopReset = document.documentElement.scrollTop;
				state.scrollLeftReset = document.documentElement.scrollLeft;

				// Moves the information of the expaned image to the state.
				ctx.currentSrc = ctx.imageRef.currentSrc;
				imageRef = ctx.imageRef;
				buttonRef = ctx.buttonRef;
				state.currentImage = ctx;
				state.overlayEnabled = true;

				// Computes the styles of the overlay for the animation.
				callbacks.setOverlayStyles();
			},
...

The lower-level implementation details, like keeping the server and client side in sync, just work; developers no longer need to account for them.

This functionality is possible using vanilla JavaScript, by selecting the element via a query selector, reading data attributes, and manipulating the DOM. But it’s far less elegant, and up until now, there hasn’t been a standardized way in WordPress of handling interactive events like these.

With the Interactivity API, developers have a predictable way to provide interactivity to users on the front-end. You don’t have to worry about lower-level code for adding interactivity; it’s there in WordPress for you to start using today. Batteries are included.

Advertisement

How is the Interactivity API different from Alpine, React, or Vue?

Prior to merging the Interactivity API into WordPress core, developers would typically reach for a JavaScript framework to add dynamic features to the user-facing parts of their websites. This approach worked just fine, so why was there a need to standardize it?

At its core, the Interactivity API is a lightweight JavaScript library that standardizes the way developers can build interactive HTML elements on WordPress sites.

Mario Santos, a developer on the WordPress core team, wrote in the Interactivity API proposal that, “With a standard, WordPress can absorb the maximum amount of complexity from the developer because it will handle most of what’s needed to create an interactive block.”

The team saw that the gap between what’s possible and what’s practical grew as sites became more complex. The more complex a user experience developers wanted to build, the more blocks needed to interact with each other, and the more difficult it became to build and maintain sites. Developers would spend a lot of time making sure that the client-side and server-side code played nicely together.

For a large open-source project with several contributors, having an agreed-upon standard and native way of providing client-side interactivity speeds up development and greatly improves the developer experience.

Five goals shaped the core development team’s decisions as they built the API: 

Advertisement
  1. Block-first and PHP-first: Prioritizing blocks for building sites and server side rendering for better SEO and performance. Combining the best for user and developer experience.
  2. Backward-compatible: Ensuring compatibility with both classic and block themes and optionally with other JavaScript frameworks, though it’s advised to use the API as the primary method. It also works with hooks and internationalization.
  3. Declarative and reactive: Using declarative code to define interactions, listening for changes in data, and updating only relevant parts of the DOM accordingly.
  4. Performant: Optimizing runtime performance to deliver a fast and lightweight user experience.
  5. Send less JavaScript: Reduce the overall amount of JavaScript being sent on the page by providing a common framework that blocks can reuse.  So the more that blocks leverage the Interactivity API, the less JavaScript will be sent overall.

Other goals are on the horizon, including improvements to client-side navigation, as you can see in this PR.

Interactivity API vs. Alpine

The Interactivity API shares a few similarities to Alpine—a lightweight JavaScript library that allows developers to build interactions into their web projects, often used in WordPress and Laravel projects.

Similar to Alpine, the Interactivity API uses directives directly in HTML and both play nicely with PHP. Unlike Alpine, the Interactivity API is designed to seamlessly integrate with WordPress and support server-side rendering of its directives.

With the interactivity API, you can easily generate the view from the server in PHP, and then add client-side interactivity. This results in less duplication, and its support in WordPress core will lead to less architectural decisions currently required by developers. 

So while Alpine and the Interactivity API share a broadly similar goal—making it easy for web developers to add interactive elements to a webpage—the Interactivity API is even more plug-and-play for WordPress developers.

Interactivity API vs. React and Vue

Many developers have opted for React when adding interactivity to WordPress sites because, in the modern web development stack, React is the go-to solution for declaratively handling DOM interactivity. This is familiar territory, and we’re used to using React and JSX when adding custom blocks for Gutenberg.

Loading React on the client side can be done, but it leaves you with many decisions: “How should I handle routing? How do I work with the context between PHP and React? What about server-side rendering?”

Advertisement

Part of the goal in developing the Interactivity API was the need to write as little as little JavaScript as possible, leaving the heavy lifting to PHP, and only shipping JavaScript when necessary.

The core team also saw issues with how these frameworks worked in conjunction with WordPress. Developers can use JavaScript frameworks like React and Vue to render a block on the front-end that they server-rendered in PHP, for example, but this requires logic duplication and risks exposure to issues with WordPress hooks.

For these reasons, among others, the core team preferred Preact—a smaller UI framework that requires less JavaScript to download and execute without sacrificing performance. Think of it like React with fewer calories.

Luis Herranz, a WordPress Core contributor from Automattic, outlines more details on Alpine vs the Interactivity API’s usage of Preact with a thin layer of directives on top of it in this comment on the original proposal.

Preact only loads if the page source contains an interactive block, meaning it is not loaded until it’s needed, aligning with the idea of shipping as little JavaScript as possible (and shipping no JavaScript as a default).

In the original Interactivity API proposal, you can see the run-down and comparison of several frameworks and why Preact was chosen over the others.

Advertisement

What does the new Interactivity API provide to WordPress developers?

In addition to providing a standardized way to render interactive elements client-side, the Interactivity API also provides developers with directives and a more straightforward way of creating a store object to handle state, side effects, and actions.

Graphic from Proposal: The Interactivity API – A better developer experience in building interactive blocks on WordPress.org

Directives

Directives, a special set of data attributes, allow you to extend HTML markup. You can share data between the server-side-rendered blocks and the client-side, bind values, add click events, and much more. The Interactivity API reference lists all the available directives.

These directives are typically added in the block’s render.php file, and they support all of the WordPress APIs, including actions, filters, and core translation APIs. 

Here’s the render file of a sample block. Notice the click event (data-wp-on--click="actions.toggle"), and how we bind the value of the aria-expanded attributes via directives.

<div
	<?php echo get_block_wrapper_attributes(); ?>
	data-wp-interactive="create-block"
	<?php echo wp_interactivity_data_wp_context( array( 'isOpen' => false ) ); ?>
	data-wp-watch="callbacks.logIsOpen"
>
	<button
		data-wp-on--click="actions.toggle"
		data-wp-bind--aria-expanded="context.isOpen"
		aria-controls="<?php echo esc_attr( $unique_id ); ?>"
	>
		<?php esc_html_e( 'Toggle', 'my-interactive-block' ); ?>
	</button>

	<p
		id="<?php echo esc_attr( $unique_id ); ?>"
		data-wp-bind--hidden="!context.isOpen"
	>
		<?php
			esc_html_e( 'My Interactive Block - hello from an interactive block!', 'my-interactive-block' );
		?>
	</p>
</div>

Do you need to dynamically update an element’s inner text? The Interactivity API allows you to use data-wp-text on an element, just like you can use v-text in Vue.

You can bind a value to a boolean or string using wp-bind– or hook up a click event by using data-wp-on–click on the element. This means you can write PHP and HTML and sprinkle in directives to add interactivity in a declarative way.

Advertisement

Handling state, side effects, and actions

The second stage of adding interactivity is to create a store, which is usually done in your view.js file. In the store, you’ll have access to the same context as in your render.php file.

In the store object, you define actions responding to user interactions. These actions can update the local context or global state, which then re-renders and updates the connected HTML element. You can also define side effects/callbacks, which are similar to actions, but they respond to state changes instead of direct user actions.

import { store, getContext } from '@wordpress/interactivity';

store( 'create-block', {
	actions: {
		toggle: () => {
			const context = getContext();
			context.isOpen = ! context.isOpen;
		},
	},
	callbacks: {
		logIsOpen: () => {
			const { isOpen } = getContext();
			// Log the value of `isOpen` each time it changes.
			console.log( `Is open: ${ isOpen }` );
		},
	},
} );

Try it out for yourself

The Interactivity API is production-ready and already running on WordPress.com! With any WordPress.com plan, you’ll have access to the core blocks built on top of the Interactivity API. 

If you want to build your own interactive blocks, you can scaffold an interactive block by running the below code in your terminal:

npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template 

This will give you an example interactive block, with directives and state handling set up. 

You can then play around with this locally, using wp-env, using a staging site, or by uploading the plugin directly to your site running a plugin-eligible WordPress.com plan

Advertisement

If you want a seamless experience between your local dev setup and your WordPress.com site, try using it with our new GitHub Deployments feature! Developing custom blocks is the perfect use case for this new tool.

The best way to learn something new is to start building. To kick things off, you may find the following resources a good starting point:


Join 106.9M other subscribers

Source link

Advertisement
Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address
Continue Reading

Trending

Follow by Email
RSS