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

# Include the Chargebee.js script

To use Chargebee.js, you must include the script in your HTML page. You only need to do this once per page.

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

# Initialize a Chargebee instance

After including the script, initialize Chargebee.js in your JavaScript code. The initialization creates a Chargebee instance object that you can use to access Chargebee.js features.

Initialize Chargebee.js after the page has loaded and provide your site configuration. This object is used to create components.

# Example

var cbInstance = Chargebee.init({
  site: "YOUR_CHARGEBEE_BILLING_SUBDOMAIN", // Your test site.
  domain: "https://mybilling.acme.com", // Optional: custom domain.
  publishableKey: "test__" 
});
1
2
3
4
5

WARNING

Call tearDown() to clean up before calling init() again within the same session.

# 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.
*/

const chargebee = new Chargebee({
  site : "{site}",
  apiKey : "{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
31
32

← Integrate iDEAL →