Redirect Payments

Implement the payment redirect UI on your website.

Introduction

When embedding payment methods on your website, an iframe element is inserted and the customer is required to enter some sort of data - all on your website. With redirect payments the user gets forwarded to a dedicated payment site like PayPal or SOFORT.

Because of that, the integration of these payment services is very simple - here’s a quick overview of the redirect payment methods Unzer supports:

PayPal (with the integration guide)
SOFORT (with the integration guide)
Giropay (with the integration guide)
Przelewy24 (with the integration guide)
Alipay (with the integration guide)
WeChat Pay (with the integration guide)
Unzer Bank Transfer (with the integration guide)

https://heidelpay.github.io/heidelpayUIExamples/iframes/others.html

Although the integration for redirect payments follows the same concepts and overall steps as the web integration guide, it is much simpler.

Step 1: Setup

First, you need to include Unzer’s script and stylesheet on your website. They must always be loaded 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>

Good practice
Even though it’s not mandatory in html, it’s considered good practice to place scripts at the bottom of your HTML document. This way your website will display and load faster.

Next, create a Unzer instance with your public key:

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

Showcase keys
In the example above, we’ve used a random API key for showcase purposes. For production usage you should replace it with your personal public key.

If you don’t have a public and private key yet, you can get them by sending an e-mail to our support.

Additionally we support localization, in case you want your form to be be in a specific language.

Step 2: Create a button

Regardless of what redirect payment you want to integrate, you have to create a button for each one. It doesn’t matter what name you give the ID, as long as it’s unique and you don’t mix them up.

We chose PayPal as an example, but the process is the same for all the other redirect payments:

<div class="field">
  <button id="paypal" class="heidelpayUI primary button fluid">PayPal</button>
</div>

Step 3: Create a payment instance and add an event listener

Just like in every other payment method, you have to create a payment instance and add an event listener to the button.

Here’s the PayPal example again:

// Creating a PayPal instance
var Paypal = heidelpayInstance.Paypal()
// Adding the event listener
var btnPaypal = document.getElementById('paypal');
btnPaypal.addEventListener('click', function(event) {
  event.preventDefault();
  Paypal.createResource()
    .then(function(data) {
    // Success
    var resourceId = data.id;
    var method = data.method;
  })
    .catch(function(error) {
    // Error
  })
});

As you can see, we’re creating a PayPal instance by calling the .Paypal() constructor on the previously created heidelpayInstance object.
After that, a simple event listener takes care of the “click” event on the button and creates a promise, which either gets resolved or rejected.

If it gets resolved, you receive a resourceId and the specified payment method back. All that’s left to do now, is to pass those variables to your back-end.

Congratulations! You’ve successfully integrated PayPal as a payment method on your website!

You can find completed Paypal, SOFORT, Giropay and Przelewy24 examples with their respective references in the All Redirect Payments section below.

All Redirect Payments

PayPal

Down below you can find the entire code for implementing PayPal on your website. But before you start, make sure you read through the step-by-step instructions up top.

<div class="field">
  <button id="paypal" class="heidelpayUI primary button fluid">PayPal</button>
</div>

// Creating an Unzer instance with your public key
var heidelpayInstance = new heidelpay('s-pub-xxxxxxxxxx');
// Creating a PayPal instance
var Paypal = heidelpayInstance.Paypal()
// Adding the event listener
var btnPaypal = document.getElementById('paypal');
btnPaypal.addEventListener('click', function(event) {
  event.preventDefault();
  Paypal.createResource()
    .then(function(data) {
    // Success
    var resourceId = data.id;
    var method = data.method;
  })
    .catch(function(error) {
    // Error
  })
});

SOFORT

Down below you can find the entire code for implementing SOFORT on your website. But before you start, make sure you read through the step-by-step instructions up top.

<div class="field" style="width:250px">
  <button id="sofort" class="heidelpayUI primary button fluid">Pay with Sofort</button>
</div>

// Creating an Unzer instance with your public key
var heidelpayInstance = new heidelpay('s-pub-xxxxxxxxxx');
// Creating a Sofort instance
var Sofort = heidelpayInstance.Sofort()
// Adding the event listener
var btnSofort = document.getElementById('sofort');
btnSofort.addEventListener('click', function(event) {
  event.preventDefault();
  Sofort.createResource()
    .then(function(data) {
    // Success
    var resourceId = data.id;
    var method = data.method;
  })
    .catch(function(error) {
    // Error
  })
});

Giropay

Down below you can find the entire code for implementing Giropay on your website. But before you start, make sure you read through the step-by-step instructions up top.

<div class="field" style="width:250px">
  <button id="giropay" class="heidelpayUI primary button fluid">Pay with GiroPay</button>
</div>

// Creating an Unzer instance with your public key
var heidelpayInstance = new heidelpay('s-pub-xxxxxxxxxx');
// Creating a Giropay instance
var Giropay = heidelpayInstance.Giropay()
// Adding the event listener
var btnGiropay = document.getElementById('giropay');
btnGiropay.addEventListener('click', function(event) {
  event.preventDefault();
  Giropay.createResource()
    .then(function(data) {
    // Success
    var resourceId = data.id;
    var method = data.method;
  })
    .catch(function(error) {
    // Error
  })
});

Przelewy24

Down below you can find the entire code for implementing Przelewy24 on your website. But before you start, make sure you read through the step-by-step instructions up top.

<div class="field" style="width:250px">
  <button id="przelewy24" class="heidelpayUI primary button fluid">Pay with Przelewy24</button>
</div>

// Creating an Unzer instance with your public key
var heidelpayInstance = new heidelpay('s-pub-xxxxxxxxxx');
// Creating a Przelewy24 instance
var Przelewy24 = heidelpayInstance.Przelewy24()
// Adding the event listener
var btnPrzelewy24 = document.getElementById('przelewy24');
btnPrzelewy24.addEventListener('click', function(event) {
  event.preventDefault();
  Przelewy24.createResource()
    .then(function(data) {
    // Success
    var resourceId = data.id;
    var method = data.method;
  })
    .catch(function(error) {
    // Error
  })
});

Unzer Bank Transfer

Down below you can find the entire code for implementing Unzer Bank Transfer on your website. But before you start, make sure you read through the step-by-step instructions up top.

<div class="field" style="width:250px">
  <button id="flexipay-direct" class="heidelpayUI primary button fluid">Pay with Unzer Bank Transfer</button>
</div>

// Creating an Unzer instance with your public key
var heidelpayInstance = new heidelpay('s-pub-xxxxxxxxxx');
// Creating a Unzer Bank Transfer instance
var FlexiPayDirect = heidelpayInstance.FlexiPayDirect()
// Adding the event listener
var btnFlexiPayDirect = document.getElementById('flexipay-direct');
btnFlexiPayDirect.addEventListener('click', function(event) {
  event.preventDefault();
  FlexiPayDirect.createResource()
    .then(function(data) {
    // Success
    var resourceId = data.id;
    var method = data.method;
  })
    .catch(function(error) {
    // Error
  })
});

Alipay

Down below you can find the entire code for implementing Alipay on your website. But before you start, make sure you read through the step-by-step instructions up top.

<div class="field" style="width:250px">
  <button id="alipay" class="heidelpayUI primary button fluid">Pay with Alipay</button>
</div>

// Creating an Unzer instance with your public key
var heidelpayInstance = new heidelpay('s-pub-xxxxxxxxxx');
// Creating an Alipay instance
var Alipay = heidelpayInstance.Alipay()
// Adding the event listener
var btnAlipay = document.getElementById('alipay');
btnAlipay.addEventListener('click', function(event) {
  event.preventDefault();
  Alipay.createResource()
    .then(function(data) {
    // Success
    var resourceId = data.id;
    var method = data.method;
  })
    .catch(function(error) {
    // Error
  })
});

WeChat Pay

Down below you can find the entire code for implementing WeChat Pay on your website. But before you start, make sure you read through the step-by-step instructions up top

<div class="field" style="width:250px">
  <button id="wechatpay" class="heidelpayUI primary button fluid">Pay with WeChat Pay</button>
</div>

// Creating an Unzer instance with your public key
var heidelpayInstance = new heidelpay('s-pub-xxxxxxxxxx');
// Creating a WeChat Pay instance
var Wechatpay = heidelpayInstance.Wechatpay()
// Adding the event listener
var btnWechatpay = document.getElementById('wechatpay');
btnWechatpay.addEventListener('click', function(event) {
  event.preventDefault();
  Wechatpay.createResource()
    .then(function(data) {
    // Success
    var resourceId = data.id;
    var method = data.method;
  })
    .catch(function(error) {
    // Error
  })
});

References

Constructors

Constructor	Description
`heidelpay.Paypal()`	Initializes the PayPal object.
`heidelpay.Sofort()`	Initializes the SOFORT object.
`heidelpay.Giropay()`	Initializes the Giropay object.
`heidelpay.Przelewy24()`	Initializes the Przelewy24 object.
`heidelpay.Alipay()`	Initializes the Alipay object.
`heidelpay.Wechatpay()`	Initializes the WeChat Pay object.
`heidelpay.FlexiPayDirect()`	Initializes the Unzer Bank Transfer object.

Method summary

Type	Method	Description
Promise	createResource()	Creates a promise object for input validation. Either gets resolved (validation passed) or rejected (validation didn’t pass).

createResource

Method

Object createResource()

Description

Creates a promise and submits the form’s data. One of the following payment types is created: /types/paypal, /types/sofort, /types/giropay, /types/przelewy24, /types/flexipaydirect, /types/alipay or /types/wechatpay, and either gets resolved or rejected. In both cases an object is returned.

Returns

An object with the following structure:

Success: {id: String, method: String}
Error: {}

Type	Property	Description
String	id	The returned resource ID.
String	method	The payment method.