Frontend Capabilities

# Integrate Sofort

Sofort (Pay now with Klarna) (opens new window) is a popular online banking payment method in Europe. It is available in the following countries:

  • Germany
  • Austria
  • Netherlands
  • Switzerland
  • Italy
  • Spain
  • Belgium
  • Poland

The Sofort integration helps you reach a larger audience in Europe. The users in Europe can use this tutorial for creating payments using any supported method—to accept Sofort payments from customers transacted using EUR.

This tutorial guides you to integrate Sofort payments on your website using Chargebee.js and creating a subscription after the user checks out.

Currently, Chargebee JS supports the below payment options for Sofort:

# Gateway prerequisites

Connect a gateway that accepts Sofort payments to your Chargebee instance. Chargebee supports Sofort payments through the below gateways:

# 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:

  • jQuery
  • 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: 'EUR',
			payment_method_type: 'sofort'
		})
	}).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

Follow these steps to integrate Sofort on your website.

# 1. Set up Sofort

Set up Sofort using the below step:

# a. Load Sofort integration.

load Sofort integration using cbInstance.load("sofort").

# 2. Handle Payment

Pass payment method name (sofort), payment intent, and other applicable payment info mandated by the gateway as input parameters to the cbInstance.handlePayment() function, as this enables the function to handle Sofort payments.

Note:

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

# Supported paymentInfo Parameters

TIP

Parameters marked with * are mandatory inputs.

Sofort via Stripe
Supported parameters in paymentInfo
paymentInfo
↳country*
paymentInfo
↳userName*
paymentInfo
↳userEmail*

TIP

Sofort via Adyen, Mollie and Checkout.com doesn't have any mandatory input requirements for paymentInfo.

To see the entire list of supported parameters that you can send for Sofort, refer below:

Example:

cbInstance.handlePayment('sofort', {
    paymentIntent: () => {
        return createPaymentIntent();
    },
    paymentInfo: {
        userName: "John", 
        userEmail: "john.doe@gmail.com",
        country: "BE"
    }
}).then((intent) => {
    // SUCCESS!!! payment_intent is authorized.
}).catch((error) => {
    // OOPS!!! payment_intent is not authorized.
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Sample Code:

cbInstance.load("sofort").then(() => {
	cbInstance.handlePayment("sofort", {
		paymentIntent: () => {
			return createPaymentIntent();
		},
		paymentInfo: {
			userName: "John",
			userEmail: "john.doe@gmail.com",
			country: "BE"
		}
	}).then(intent => {
		// SUCCESS!!! payment_intent is authorised.
		var response = fetch('/subscriptions', {
			method: 'POST',
			body: JSON.stringify({
				paymentIntentId: intent.id,
				plan_id: 'pro_plan',
				plan_quantity: 1,
				billingAddress: {
					...
				}, // provide billing address
				customer: {
					...
				} // provide customer details if the subscription is to be created for an existing <code>customer</code> in Chargebee.
			})
		}).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
19
20
21
22
23
24
25
26
27
28
29
30
31
32

On successful authorization, the payment_intent turns authorized, and Chargebee redirects the user back to your website (payment authorization page).

# Create a subscription

Pass the ID of the successfully authorized payment_intent to Chargebee’s create a subscription API (opens new window).

  • Curl

← Wallet-based Payments →