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>
To make your website load faster, insert scripts at the bottom of your HTML document.
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>
We support localization. You can create your HTML form in different languages.
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:
Payment method | JavaScript method |
---|---|
Unzer Bank Transfer | heidelpayInstance.UnzerBankTransfer() |
Unzer Direct Debit | heidelpayInstance.SepaDirectDebit() |
Unzer Direct Debit Secured | heidelpayInstance.SepaDirectDebitGuaranteed() |
Unzer Prepayment | heidelpayInstance.Prepayment() |
Unzer Instalment | heidelpayInstance.HirePurchase() |
Unzer Invoice | heidelpayInstance.Invoice() |
Unzer Invoice Secured | heidelpayInstance.InvoiceSecured() |
Credit card | heidelpayInstance.Card() |
EPS | heidelpayInstance.EPS() |
Alipay | heidelpayInstance.AliPay() |
Apple Pay | heidelpayInstance.ApplePay() |
Giropay | heidelpayInstance.Giropay() |
iDEAL | heidelpayInstance.Ideal() |
PayPal | heidelpayInstance.PayPal() |
Przelewy24 | heidelpayInstance.Przelewy24() |
SOFORT | heidelpayInstance.Sofort() |
WeChat Pay | heidelpayInstance.WeChatPay() |
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
})
});