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>
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');
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. |