Internet Bank Payment (IBP)

Internet Bank Payment (IBP), also sometimes called Online Banking, is a Browser Redirect processing method where customers authorize a debit from their bank account.
IBP allows customers to use the online banking service provided by their bank.
Create an Online Banking payment method for your app or website in four easy steps:
​Build Online Banking objects​
​Create an Online Banking source or display​
​Authorize an Online Banking source​
​Use the authorized source​
Step 1. Build Online Banking objects
Build the Online Banking Source Request Details objects. 
Online Banking source request object
The Online Banking Source Request object requires the following fields.
Field
Value
Type
onlineBanking
amount
The total value of the transaction.
currency
The currency of the transaction. When using an Online Banking element, the currency must match the currency specified when creating the element.
owner
An Owner object.
onlineBanking
 An Online Banking Source Details object.
Online Banking source details object
The Online Banking Details object requires the following fields.
{
    "returnUrl": "https://example.com/success",
    "cancelUrl": "https://example.com/cancel",
    "bankCode": "123"
}
Field
Required/Optional
Description
returnUrl
Required
Where you will redirect your customer to after authorization within the Bank authorization experience.
cancelUrl
Required
Where the Customer will be redirected to after cancellation within the Bank authorization experience.
bankCode
Required
The identifier of the bank the customer has chosen and will be redirected to when finished. If using the DigitalRiver.js Internet Banking Payment element, this populated for you. If constructing the request yourself, this is a required field.
Step 2. Create an Online Banking source or display
Choose one of the following options:
​Create an Online Banking source using DigitalRiver.js​
​Create your Online Banking display using DigitalRiver.js​
Create an Online Banking source using DigitalRiver.js
To create an IBP payment source, you must use the createSource method exposed via DigitalRiver.js, or you can assemble the information and then send it using the standard calls in DigitalRiver.js.
Create the IBP element using DigitalRiver.js functionality
The IBP element creation follows the same pattern as other elements and exposes the same customizations and events. However, to properly display an accurate list of available banks, you must provide an additional onlineBanking object which holds the country and currency appropriate for your Customer.
Field
Value
onlineBanking.currency
The currency your customer uses to purchase products.
onlineBanking.country
The country where your customer resides.
var onlineBankingOptions = {
    classes: {
        base: "DRElement",
        complete: "onlineBanking-complete",
        empty: "onlineBanking-empty",
        focus: "onlineBanking-focus"
    },
    style: {
        base: {
            color: '#495057',
            height: '35px',
            fontSize: '1rem',
            fontFamily: 'apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif',
            ':hover': {
                color: '#ccc',
            },
            '::placeholder': {
                color: '#495057'
            }
        },
        focus: {
            ':hover': {
                color: '#495057',
            },
        },
        empty: {
            ':hover': {
                color: '#495057',
            },
        },
        complete: {
            ':hover': {
                color: '#495057',
            },
        }
    },
    onlineBanking: {
        currency: "EUR",
        country: "DE",
    }
};
 
var onlineBankingElement = digitalriver.createElement('onlinebanking', onlineBankingOptions);
onlineBankingElement.mount('online-banking');
To create an online banking source, you must reference the created element and the supplemental data in your createSource request. DigitalRiver.js will retrieve and assemble the request on your behalf.
var data = {
    "type": "onlineBanking",
    "sessionId": "ea03bf6f-84ef-4993-b1e7-b7d5ecf71d1f",
    "owner": {
        "firstName": "John",
            "lastName": "Doe",
            "email": "john.doe@digitalriver.com",
            "phoneNumber": "000-000-0000",
            "address": {
                "line1": "52-58 Neue Mainzer Straße",
                "line2": "",
                "city": "Frankfurt am Main",
                "state": "HE",
                "postalCode": "60311",
                "country": "DE"
            }
        },
        "onlineBanking": {
            "returnUrl": "https://myurl.com/success",
            "cancelUrl": "https://myurl.com/cancel",
            "bankCode": "82"
        }
}
 
  
digitalriver.createSource(data).then(function(result) {
    if (result.error) {
        //handle errors
    } else {
        var source = result.source;
        //send source to back end
        sendToBackend(source);
    }
});
Create your Online Banking display using DigitalRiver.js
If you decide not to use the out-of-the-box functionality provided with the Online Banking elements, you can use the digitalriver.retrieveOnlineBankingBanks() method to build your own experience.
Retrieving available banks
DigitalRiver.js exposes a method that allows you to retrieve the available banks for a country and currency combination. If banks are available, DigitalRiver.js returns an array of objects. If banks are not available, DigitalRiver.js returns an empty array.
JSON
JSON
digitalriver.retrieveOnlineBankingBanks("DE","EUR").then(function(response) {
    //use the returned values to create your own display
});
Retrieved banks
JSON
JSON
[{
    "bankCode": "86",
    "bankName": "Sofortüberweisung"
}, {
    "bankCode": "21",
    "bankName": "Giropay"
}]
With the retrieved banks, you can build an experience suitable for your needs.
JavaScript
JavaScript
<select>
    <option value="86">Sofortüberweisung</option>
    <option value="21">Giropay</option>
</select>
Once you have reached a point in your flow where the customer has selected a bank, you can use the createSource function to assemble and pass the data to Digital River to create your payment.
Important:  If you create an online banking source without using the DigitalRiver.js online banking element, you must pass an additional field bankCode.
JSON
JSON
var sourceData = {
        "type": "onlineBanking",
        "amount": 100,
        "currency": "EUR",
        "owner": {
            "firstName": "John",
            "lastName": "Doe",
            "email": "john.doe@digitalriver.com",
            "phoneNumber": "000-000-0000",
            "address": {
                "line1": "52-58 Neue Mainzer Straße",
                "line2": "",
                "city": "Frankfurt am Main",
                "state": "HE",
                "postalCode": "60311",
                "country": "DE"
            }
        },
        "onlineBanking": {
            "returnUrl": "https://myurl.com/success",
            "cancelUrl": "https://myurl.com/cancel",
            "bankCode": "82"
        }
 
        digitalriver.createSource(sourceData).then(function(result) {
            if (result.error) {
                //handle errors
            } else {
                var source = result.source;
                //send source to back end
                sendToBackend(source);
            }
        });
Example Online Banking source
JSON
JSON
{
    "clientId": "gc",
    "channelId": "drdod15",
    "liveMode": false,
    "id": "8c4ef38f-d156-4e9d-bb37-bdb8849ef54b",
    "clientSecret": "8c4ef38f-d156-4e9d-bb37-bdb8849ef54b_0906601e-8a4b-42e1-962a-35333dd9b22d",
    "type": "onlineBanking",
    "reusable": false,
    "owner": {
        "firstName": "John",
        "lastName": "Doe",
        "email": "john.doe@digitalriver.com",
        "phoneNumber": "000-000-0000",
        "address": {
            "line1": "10380 Bren Road West",
            "line2": "Suite 123",
            "city": "Minnetonka",
            "state": "MN",
            "country": "DE",
            "postalCode": "55343"
        }
    },
    "amount": "100.00",
    "currency": "EUR",
    "state": "pending_redirect",
    "creationIp": "209.87.180.1",
    "createdTime": "2019-09-13T18:01:42.092Z",
    "updatedTime": "2019-09-13T18:01:42.092Z",
    "flow": "redirect",
    "redirect": {
        "redirectUrl": "https://api.digitalriver.com:443/payments/redirects/c0447656-3d11-4dda-a472-43057565160f?apiKey=pk_hc_e03ee62c0d964bb3ac75595b1203d13c",
        "returnUrl": "https://chrismiller.me/dev/dr/test-dr/example/test-drive?locale=en_US&action=paymentSuccess",
        "cancelUrl": "https://chrismiller.me/dev/dr/test-dr/example/test-drive?locale=en_US&action=paymentFailue"
    },
    "onlineBanking": {
        "bankCode": "86"
    }
}
Step 3. Authorize an Online Banking source
When you create an Online Banking source, the customer is required to authorize the charge through their payment provider. You can accomplish this by redirecting the customer to their payment provider.
Redirecting the customer for Online Banking authorization
To redirect your customer to the payment provider for authorization, use the redirectUrl parameter in your createSource response.
window.location.href = sourceResponse.redirect.redirectUrl;
The payment provider will present the customer with the transaction details where they can authorize or cancel the transaction. A successful authorization redirects the customer to the Online Banking Return URL parameter you specified when you created the source. 
Once authorized, the source state will change to chargeable.
{
    "clientId": "gc",
    "channelId": "drdod15",
    "liveMode": false,
    "id": "8c4ef38f-d156-4e9d-bb37-bdb8849ef54b",
    "clientSecret": "8c4ef38f-d156-4e9d-bb37-bdb8849ef54b_0906601e-8a4b-42e1-962a-35333dd9b22d",
    "type": "onlineBanking",
    "reusable": false,
    "owner": {
        "firstName": "John",
        "lastName": "Doe",
        "email": "john.doe@digitalriver.com",
        "phoneNumber": "000-000-0000",
        "address": {
            "line1": "10380 Bren Road West",
            "line2": "Suite 123",
            "city": "Minnetonka",
            "state": "MN",
            "country": "DE",
            "postalCode": "55343"
        }
    },
    "amount": "100.00",
    "currency": "EUR",
    "state": "chargeable",
    "creationIp": "209.87.180.1",
    "createdTime": "2019-09-13T18:01:42.092Z",
    "updatedTime": "2019-09-13T18:01:42.092Z",
    "flow": "redirect",
    "redirect": {
        "redirectUrl": "https://api.digitalriver.com:443/payments/redirects/c0447656-3d11-4dda-a472-43057565160f?apiKey=pk_hc_e03ee62c0d964bb3ac75595b1203d13c",
        "returnUrl": "https://chrismiller.me/dev/dr/test-dr/example/test-drive?locale=en_US&action=paymentSuccess",
        "cancelUrl": "https://chrismiller.me/dev/dr/test-dr/example/test-drive?locale=en_US&action=paymentFailue"
    },
    "onlineBanking": {
        "bankCode": "86"
    }
}
Step 4.  Use the authorized source
Once authorized, you can use the source by attaching it to a cart.
Attach the source to a cart
POST /v1/shoppers/me/carts/active/apply-payment-method
POST /v1/shoppers/me/carts/active/apply-payment-method
{
  "paymentMethod": {
    "sourceId": "e7ba0595-059c-460c-bad8-2812123b9313"
  }
}
Supported geographies
IBP supports the following geographies and currencies.
Supported geographies
Austria (AT), Finland (FI), Germany (DE), Netherlands (NL), Poland (PL), Sweden (SE)
Supported currencies
EUR, PLN, SEK
Google Pay
Japan COD
Last updated 1 week ago
Field	Value
Type	onlineBanking
amount	The total value of the transaction.
currency	The currency of the transaction. When using an Online Banking element, the currency must match the currency specified when creating the element.
owner	An Owner object.
onlineBanking	An Online Banking Source Details object.
Field	Required/Optional	Description
returnUrl	Required	Where you will redirect your customer to after authorization within the Bank authorization experience.
cancelUrl	Required	Where the Customer will be redirected to after cancellation within the Bank authorization experience.
bankCode	Required	The identifier of the bank the customer has chosen and will be redirected to when finished. If using the DigitalRiver.js Internet Banking Payment element, this populated for you. If constructing the request yourself, this is a required field.
Field	Value
onlineBanking.currency	The currency your customer uses to purchase products.
onlineBanking.country	The country where your customer resides.