Accept payments with Unzer UI

Accept payments through UI components created by Unzer.

Introduction

You can accept payments through ready-made UI components prepared by Unzer. This lets you quickly integrate your website with the Unzer API, with no need to prepare your website’s payment front end from scratch. You can also customize the UI components to fit your needs.

Read this guide for a general overview of how to accept payments through the Unzer UI components. For details on a specific payment method, check our tutorials on individual payment methods.

Step 1: Load our JS script and CSS stylesheet

Include Unzer’s script and stylesheet on your website.

Always load the script and stylesheet directly from https://static.unzer.com:

<link rel="stylesheet" href="https://static.unzer.com/v1/heidelpay.css" />
<script type="text/javascript" src="https://static.unzer.com/v1/heidelpay.js"></script>

Step 2: Create a heidelpayInstance

Create a heidelpayInstance with your public key:

// Creating a heidelpay instance with your public key
var heidelpayInstance = new heidelpay('s-pub-xxxxxxxxxx');

Step 3: Create your HTML form

Your HTML form depends on the payment method you choose.

For certain payment methods, you’ll need to gather input from your customer (e.g. credit card data). For other payment methods (e.g. Unzer Bank Transfer), your customer doesn’t need to enter any information, so you just need to create a simple HTML button:

<form id="payment-form">
  <button type="submit">Pay</button>
</form>

For details on a specific payment method, check our tutorials on individual payment methods.

Step 4: Create a payment type resource

Whatever payment method you use, you need to create a dedicated payment type resource:

For example, creating a payment type resource for an Unzer Bank Transfer payment looks like this:

var UnzerBankTransfer = heidelpayInstance.UnzerBankTransfer()

For details on a specific payment method, check our tutorials on individual payment methods.

Step 5: Add an event listener and submit the form

Now get the HTML form by its unique ID and add an event listener.

Inside, create a Promise. The Promise gets either resolved or rejected.

For example, Unzer Bank Transfer looks like this:

var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  UnzerBankTransfer.createResource()
    .then(function(data) {
      // Success
    })
    .catch(function(error) {
      // Error
    })
});

Step 6: Review the code

As an example, have a look at complete codes samples for implementing the Unzer Bank Transfer UI on your website:

<form id="payment-form">
  <button type="submit">Pay</button>
</form>

// Creating an Unzer instance with your public key
var heidelpayInstance = new heidelpay('s-pub-xxxxxxxxxx');
// Creating an UnzerBankTransfer instance
var UnzerBankTransfer = heidelpayInstance.UnzerBankTransfer()

// Handle payment form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  UnzerBankTransfer.createResource()
    .then(function(data) {
      // Success
    })
    .catch(function(error) {
      // Error
    })
});