SOFORT integration with Chargebee.js

Sofort (Pay now with Klarna) 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:

• Adyen. Learn more about Adyen Sofort payments.
• Checkout.com. Learn more about Checkout.com Sofort payments.
• Mollie. Learn more about Mollie Sofort payments.
• Stripe. Learn more about Stripe Sofort payments.

Gateway prerequisites

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

• Sofort via Adyen. Learn more about configuring Sofort via Adyen in Chargebee.
• Sofort via Checkout.com. Learn more about configuring Sofort via Checkout.com in Chargebee.
• Sofort via Mollie. Learn more about configuring Sofort via Mollie in Chargebee.
• Sofort via Stripe. Learn more about configuring Sofort via Stripe in Chargebee.

Set up Chargebee.js

Include the Chargebee.js script on your page and initialize a Chargebee instance before you start. For the script tag, the Chargebee.init options, and the tearDown() caveat, see Set up Chargebee.js.

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 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.

Example:

const express = require('express');
const app = express();
const axios = require('axios');
//API call to Chargebee to create payment_intent
app.post('/payment-intents', async (req, res) => {
	axios.request({
		url: 'https://{site-name}.chargebee.com/api/v2/payment_intents',
		method: 'POST',
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded',
			'Authorization': 'Basic {API_KEY}'
		},
		data: {
			amount: req.body.amount,
			currency_code: req.body.currency_code,
			payment_method_type: req.body.payment_method_type,
		}
	}).then(result => {
		res.status(result.status).json({
			payment_intent: result.data.payment_intent
		});
	})
});
app.listen(3000, () => {
	console.log('Running on port 3000');
});

curl  https://{site-name}.chargebee.com/api/v2/payment_intents \
-u {fullaccess_api_key}: \
-d amount=500 \
-d currency_code="EUR" \
-d payment_method_type="sofort"

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

Frontend 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;
	});
}

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.

For Stripe, pass country, userName, and userEmail in paymentInfo. Adyen, Mollie, and Checkout.com do not require paymentInfo fields. Because Smart routing can select any of your configured gateways, pass the Stripe fields whenever Stripe is enabled for SOFORT. For the complete paymentInfo reference, see SOFORT handlePayment().

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

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

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

Create a subscription (server)

Pass the ID of the successfully authorized payment_intent to Chargebee’s create a subscription API.

curl  https://{site}.chargebee.com/api/v2/customers/__test__8asz8Ru9WhHOJO/subscription_for_items \
     -X POST \
     -u {site_api_key}: \
     -d payment_intent[id]="<Id of authorized payment_intent recieved in last step.>" \
     -d subscription_items[item_price_id][0]="basic-EUR" \
     -d subscription_items[billing_cycles][0]=2 \
     -d subscription_items[quantity][0]=1 \
     -d subscription_items[item_price_id][1]="day-pass-EUR" \
     -d subscription_items[unit_price][1]=100