Accept an EPS payment

Learn how to accept EPS, a common payment method in Austria.

Web

Mobile

Caution

The content of this section refers to a Legacy product. You should use the Accept a payment guide for the most recent integration path instead. While Stripe still supports this product, this support might end if the product is deprecated.

EPS is a single use payment method where customers are required to authenticate their payment. Customers pay with EPS by redirecting from your website, authorizing the payment, then returning to your website where you get immediate notification on whether the payment succeeded or failed.

Note

Your use of EPS must be in accordance with the EPS Terms of Service.

Set up Stripe
Server-side

First, you need a Stripe account. Register now.

Use our official libraries for access to the Stripe API from your application:

Create a PaymentIntent
Server-side

A PaymentIntent represents your intent to collect payment from a customer and tracks the lifecycle of the payment process.

Create a PaymentIntent on your server and specify the amount to collect, and the eur currency (EPS doesn’t support other currencies). If you have an existing Payment Intents integration, add eps to the list of payment method types.

Retrieve the client secret

The PaymentIntent includes a client secret that the client side uses to securely complete the payment process. You can use different approaches to pass the client secret to the client side.

Retrieve the client secret from an endpoint on your server, using the browser’s fetch function. This approach is best if your client side is a single-page application, particularly one built with a modern frontend framework like React. Create the server endpoint that serves the client secret:

And then fetch the client secret with JavaScript on the client side:

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Collect payment method details
Client-side

You’re ready to collect payment information on the client with Stripe Elements. Elements is a set of prebuilt UI components for collecting payment details.

A Stripe Element contains an iframe that securely sends the payment information to Stripe over an HTTPS connection. The checkout page address must also start with https:// rather than http:// for your integration to work.

You can test your integration without using HTTPS. Enable it when you’re ready to accept live payments.

Set up Stripe Elements

Stripe Elements is automatically available as a feature of Stripe.js. Include the Stripe.js script on your payment page by adding it to the head of your HTML file. Always load Stripe.js directly from js.stripe.com to remain PCI compliant. Don’t include the script in a bundle or host a copy of it yourself.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/stripe.js"></script>
</head>

Create an instance of Elements with the following JavaScript on your checkout page:

const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const elements = stripe.elements();

Add and configure an epsBank Element

Caution

This doc refers to a Legacy feature that’s no longer available in the latest version of Stripe.js. We recommend you use the Payment Element, a UI component for the web that accepts 40+ payment methods, validates input, and handles errors.

Elements needs a place to live in your payment form. Create empty DOM nodes (containers) with unique IDs in your payment form and then pass those IDs to Elements.

When the form above has loaded, create an instance of an epsBank Element and mount it to the Element container created above:

const options = {
  // Custom styling can be passed to options when creating an Element
  style: {
    base: {
      padding: '10px 12px',
      color: '#32325d',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      },
    },
  },
};

// Create an instance of the epsBank Element
const epsBank = elements.create('epsBank', options);

// Add an instance of the epsBank Element into
// the `eps-bank-element` <div>
epsBank.mount('#eps-bank-element');

Elements are completely customizable. You can style Elements to match the look and feel of your site, providing a seamless checkout experience for your customers. It’s also possible to style various input states, for example when the Element has focus.

Submit the payment to Stripe
Client-side

Rather than sending the entire PaymentIntent object to the client, use its client secret. This is different from your API keys that authenticate Stripe API requests. The client secret should be handled carefully as it can complete the charge. Don’t log it, embed it in URLs, or expose it to anyone but the customer.

Use stripe.confirmEpsPayment to handle the redirect away from your page and to complete the payment. Add a return_url to this function to indicate where Stripe should redirect the user after they complete the payment on their bank’s website or mobile application.

client.js
const form = document.getElementById('payment-form');
const accountholderName = document.getElementById('accountholder-name');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  // Redirects away from the client
  const {error} = await stripe.confirmEpsPayment(
    '{{PAYMENT_INTENT_CLIENT_SECRET}}',
    {
      payment_method: {
        eps: epsBank,
        billing_details: {
          name: accountholderName.value,
        },
      },
      return_url: 'https://example.com/checkout/complete',
    }
  );
});

When your customer submits a payment, Stripe redirects them to the return_url and includes the following URL query parameters. The return page can use them to get the status of the PaymentIntent so it can display the payment status to the customer.

When you specify the return_url, you can also append your own query parameters for use on the return page.

Parameter	Description
`payment_intent`	The unique identifier for the `PaymentIntent`.
`payment_intent_client_secret`	The client secret of the `PaymentIntent` object. For subscription integrations, this client_secret is also exposed on the `Invoice` object through `confirmation_secret`

When the customer is redirected back to your site, you can use the payment_intent_client_secret to query for the PaymentIntent and display the transaction status to your customer.

You can find details about the bank account the customer used to complete the payment on the resulting Charge under the payment_method_details property.

{
  "charges": {
    "data": [
      {
        "payment_method_details": {
          "eps": {
            "bank": "bank_austria",
            "verified_name": "JENNY ROSEN"
          },
          "type": "eps"
        },
        "id": "src_16xhynE8WzK49JbAs9M21jaR",
        "object": "source",
        "amount": 1099,
        "client_secret": "src_client_secret_UfwvW2WHpZ0s3QEn9g5x7waU",

Test your integration

Select any bank in the EPS bank list with your test API keys. After confirming the payment, you’re redirected to a test page with options to succeed or fail the payment. You can test the successful payment case by authenticating the payment on the redirect page. The PaymentIntent will transition from requires_action to succeeded.

To test the case where the user fails to authenticate, select any bank with your test API keys. On the redirect page, click Fail test payment. Your PaymentIntent will transition from requires_action to requires_payment_method.

OptionalHandle post-payment events
Server-side

Stripe sends a payment_intent.succeeded event when the payment completes. Use the Dashboard, a custom webhook, or a partner solution to receive these events and run actions, like sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow.

Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events also helps you accept more payment methods in the future. Learn about the differences between all supported payment methods.

Receive events and run business actions

There are a few options for receiving and running business actions.

Manually

Use the Stripe Dashboard to view all your Stripe payments, send email receipts, handle payouts, or retry failed payments.

View your test payments in the Dashboard

Custom code

Build a webhook handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

Build a custom webhook

Prebuilt apps

Handle common business events, like automation or marketing and sales, by integrating a partner application.

OptionalHandle EPS Bank Element changes
Client-side

The EPS Bank Element outputs the customer’s selected bank as it changes. To perform additional logic with the bank value (for example, requiring the field for form validation), you can listen to the change event:

epsBank.on('change', (event) => {
  const bank = event.value;
  // Perform any additional logic here...
});

The change event contains other parameters that can help to build a richer user experience. Refer to the Stripe.js reference for more detail.

OptionalHandle EPS redirect manually
Server-side

We recommend relying on Stripe.js to handle EPS redirects and payments with confirmEpsPayment. However, you can also manually redirect your customers by:

Providing the URL where your customers is redirected after they complete their payment.
Optionally providing the customer’s bank, where they’re be redirected to authorize the payment. You can find the list of available banks under the Bank values section.

Confirming the PaymentIntent has a status of requires_action. The type for the next_action will be redirect_to_url.

{
  "next_action": {
    "type": "redirect_to_url",
    "redirect_to_url": {
      "url": "https://hooks.stripe.com/...",
      "return_url": "https://example.com/checkout/complete"
    }
  },
  "charges": {
    "data": [
      {
        "payment_method_details": {
          "eps": {
          "bank": "bank_austria",
          "verified_name": "JENNY ROSEN"

Redirecting the customer to the URL provided in the next_action property.

const action = intent.next_action;
if (action && action.type === 'redirect_to_url') {
  window.location = action.redirect_to_url.url;
}

When the customer finishes the payment process, they’re sent to the return_url destination. The payment_intent and payment_intent_client_secret URL query parameters are included and you can pass through your own query parameters, as described above.

OptionalStore the customer's bank preference
Client-side

You can’t reuse EPS PaymentMethods or save them to customers. You must create a new EPS PaymentMethod each time your customer selects this method of payment in your checkout, using the EPS Bank Element. To track your customer’s bank preference, store their preference in your own database or use the metadata property on the Customer object.

You can prefill the EPS Bank Element with the customer’s bank preference when creating the Element:

const options = {
  // Include the bank name along with any custom styling
  value: "bank_austria",
  style: {
    base: {
      padding: '10px 12px',
      color: '#32325d',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      },
    },
  },
}

// Create an instance of the Element
const epsBank = elements.create('epsBank', options);

// Mount the Element
epsBank.mount('#eps-bank-element');
TODO: highlight: [3]

Bank values

Bank name	Value
Ärzte- und Apothekerbank	arzte_und_apotheker_bank
Austrian Anadi Bank AG	austrian_anadi_bank_ag
Bank Austria	bank_austria
Bankhaus Carl Spängler & Co.AG	bankhaus_carl_spangler
Bankhaus Schelhammer & Schattera AG	bankhaus_schelhammer_und_schattera_ag
BAWAG P.S.K. AG	bawag_psk_ag
BKS Bank AG	bks_bank_ag
Brüll Kallmus Bank AG	brull_kallmus_bank_ag
BTV VIER LÄNDER BANK	btv_vier_lander_bank
Capital Bank Grawe Gruppe AG	capital_bank_grawe_gruppe_ag
Dolomitenbank	dolomitenbank
Easybank AG	easybank_ag
Erste Bank und Sparkassen	erste_bank_und_sparkassen
Hypo Alpe-Adria-Bank International AG	hypo_alpeadriabank_international_ag
HYPO NOE LB für Niederösterreich u. Wien	hypo_noe_lb_fur_niederosterreich_u_wien
HYPO Oberösterreich, Salzburg, Steiermark	hypo_oberosterreich_salzburg_steiermark
Hypo Tirol Bank AG	hypo_tirol_bank_ag
Hypo Vorarlberg Bank AG	hypo_vorarlberg_bank_ag
HYPO-BANK BURGENLAND Aktiengesellschaft	hypo_bank_burgenland_aktiengesellschaft
Marchfelder Bank	marchfelder_bank
Oberbank AG	oberbank_ag
Raiffeisen Bankengruppe Österreich	raiffeisen_bankengruppe_osterreich
Schoellerbank AG	schoellerbank_ag
Sparda-Bank Wien	sparda_bank_wien
Volksbank Gruppe	volksbank_gruppe
Volkskreditbank AG	volkskreditbank_ag
VR-Bank Braunau	vr_bank_braunau

Accept an EPS payment

Learn how to accept EPS, a common payment method in Austria.

Caution

Note

Set up StripeServer-side

Create a PaymentIntentServer-side

Retrieve the client secret

Collect payment method detailsClient-side

Set up Stripe Elements

Add and configure an epsBank Element

Caution

Submit the payment to StripeClient-side

Test your integration

OptionalHandle post-payment eventsServer-side

Receive events and run business actions

Manually

Custom code

Prebuilt apps

OptionalHandle EPS Bank Element changesClient-side

OptionalHandle EPS redirect manuallyServer-side

OptionalStore the customer's bank preferenceClient-side

Bank values

Set up Stripe
Server-side

Create a PaymentIntent
Server-side

Collect payment method details
Client-side

Submit the payment to Stripe
Client-side

OptionalHandle post-payment events
Server-side

OptionalHandle EPS Bank Element changes
Client-side

OptionalHandle EPS redirect manually
Server-side

OptionalStore the customer's bank preference
Client-side