Frontend Capabilities

# Integrate Dotpay

Dotpay is an online banking payment method specific to Poland.

This tutorial guides you on using Chargebee.js to integrate Dotpay on your website.

Note:

This feature is currently available for Private Beta Testing. Contact support to enable Adyen Dotpay for your site.

# Gateway prerequisites

# Setting up Chargebee JS

# Inserting chargebee.js script in your application

Include the following script in your HTML page. You need to do this only once per page.

<script src="https://js.chargebee.com/v2/chargebee.js"></script>
1

# Initializing a Chargebee instance

Inside your JavaScript code, initialize chargebee with the publishable key (opens new window) once the page is loaded and get 'chargebee instance' object. This object is used further to create components.

Example:

var cbInstance = Chargebee.init({
	site: "site-name", // your test site
	domain: "https://mybilling.acme.com" // this is an optional parameter.
    publishableKey: "test__"
})
1
2
3
4
5

Learn more about ​​initializing a Chargebee instance.

# Create a Payment Intent

You should create a payment intent before submitting the form to authorize the payments.

payment_intent performs the essential function of tracking different events involved in a transaction. This includes:

  • Automatically changing its status based on the outcome of authorization and capture events.

  • Automatically refunding in case of an error post-payment.

A payment_intent can be created at your server-side using create a payment intent API (opens new window) and returned to the client side. The payment method handler uses the created payment_intent internally to perform authorization.

Here's the sample code to create a payment_intent.

TIP

This must be done from your backend to avoid exposing sensitive data.

Example:

  • Curl

The above step should be initiated as a request from your front end.

Front end code:

function createPaymentIntent() {
  return fetch('/payment-intents', {
    method: 'POST',
    body: JSON.stringify({
      amount: 500,
      currency_code: 'PLN',
      payment_method_type: 'dotpay'
    })
  }).then(function(response) {
    return response.json();
  }).then(function(responseJson) {
    return responseJson.payment_intent;
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Authorize payment intent

Authorize the payment intent by following the below steps:

# 1. Create a container element in the DOM

Create a DOM container to hold and display the dotpay bank selector component.

<div id='dotpay-container'></div>
1

# 2. Setup Dotpay

Setup Dotpay using the steps below:

# a. Load Dotpay integration.

load Dotpay integration using cbInstance.load('dotpay').

# b. Set payment intent.

Pass the payment_intent object to dotPayHandler.setPaymentIntent(payment_intent).

# c. Mount dotpay component

Assign the ID of the DOM container to the mountBankList function. This attaches a drop-down list of supported banks to that DOM node. Chargebee validates whether a bank is selected before initiating the transaction.

cbInstance.load('dotpay').then(dotPayHandler => {
  dotPayHandler.mountBankList('#dotpay', {
    currency: 'PLN'
  });
});
1
2
3
4
5
6

# 4. Handle Payment.

Use dotpay as the input parameter to handlePayment function, as this enables the function to handle Dotpay payments. On receiving the payment_intent the transaction is initiated.

Note:

Currently, Chargebee JS does not support payments via in-app browsers of Instagram, Facebook and Snapchat.

Sample code:

cbInstance.handlePayment('dotpay', {
  paymentIntent: () => {
    return createPaymentIntent()
  }
}).then(intent => {
  // SUCCESS!!! payment_intent is authorised.
  var response = fetch('/collect_payment', {
    method: 'POST',
    body: JSON.stringify({
      "paymentIntentId": intent.id,
      "invoiceId[0]": 'INV_1234'
    })
  }).then(function(response) {
    return response.json();
  });
}).catch(err => {
  // OOPS!!! payment_intent is not authorised.
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

The handlePayment function resolves to an authorized payment intent once the user authorizes the payment using Dotpay.

Learn more about the additional functions for Dotpay.

# Complete your transaction

Pass the ID of the successfully authorized payment_intent to payment_intent[id] in Chargebee’s collect payment for customer API (opens new window).

Sample code:


/*
collects payment for the customer using new payment source.
*/

var chargebee = require("chargebee");
chargebee.configure({site : "{site}",
  api_key : "{site_api_key}"})
chargebee.customer.collect_payment("__test__KyVnHhSBWl78A2bV",{
  card : {
    number : "378282246310005",
    expiry_month : 10,
    expiry_year : 2022,
    cvv : "999"
    },
  invoice_allocations : [
    {
      invoice_id : "__demo_inv__2"
    }]
}).request(function(error,result) {
  if(error){
    //handle error
    console.log(error);
  }else{
    console.log(result);
    var customer = result.customer;
    var transaction = result.transaction;
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

← Integrate iDEAL →