LogoLogo
System Status
  • Commerce API
    • Test and use cases
    • Roles and permissions
    • Sending API calls
  • Shopper APIs
    • Shopper basics
      • Common use cases
        • Creating a customer
        • Applying store credit
        • Private store workflow
        • Guest checkout
    • OAuth
      • Authentication
      • OAuth 2.0 APIs
      • Token
      • Access tokens
      • Session-aware access tokens
      • Authorizing a shopper
    • Shoppers
      • Managing shoppers
        • User management
        • Single sign-on (SSO)
        • Data validation
        • Bulk user management
        • Bulk user account export
      • Managing a shopper's account
      • Managing a shopper's address
      • Managing payment options
    • Product discovery
      • Categories
      • Products
      • Product variations
      • Pricing
      • Inventory status
      • Financing
      • Offers
        • Understanding offers
        • How to use point of promotions (POPs)
          • Retrieving all point of promotion offers for a specific product
          • Retrieving all offers for a specific point of promotion
        • How to use offers
      • Private stores
        • Managing private stores
        • Submitting an order for a private store
        • Useful APIs
      • Fulfillment
        • Electronic Fulfillment Service (OFI)
        • Digital rights
        • Digital rights revocation
        • Physical fulfillment
          • EDI X12 832 definition data elements
          • EDI X12 846 definition data elements
          • EDI X12 850 definition data elements
          • EDI X12 855 definition data elements
          • EDI X12 856 definition data elements
          • EDI X12 180-1 definition data elements
          • EDI X12 180-2 definition of data elements
          • EDI X12 180-3 definition of data elements
    • Cart
      • Applying a shopper to a cart
      • Getting the current cart
      • Creating or updating a cart
        • Adding a product to a cart
          • Gifting
        • Capturing the customer's IP address
        • Providing address information
        • Managing the shipping or billing address
        • Providing subscription information
        • Managing payment methods
        • Capturing the Terms of Sale (TOS) acceptance
      • Managing offers in a cart
        • Applying an offer
        • Applying a coupon or promo code
        • Getting all applied offers
        • Removing an applied offer
        • Removing eligible offers
        • Reconciling conflicting offers
        • Dynamic offers/personalization
          • Skipping Global Commerce merchandising offer arbitration
          • Triggering a promotional URL offer
          • Overriding a promotional URL offer discount
      • Pricing
        • Landed cost
          • Mixed cart support
          • Tax-included pretty price
      • Redirecting to a Digital River-hosted cart
      • Configuring taxes
        • Managing tax identifiers
      • Managing shipping options
        • Getting shipping options
        • Providing a shipping discount
      • Managing line items
      • Applying a price override
      • Managing payment sessions
      • Managing web checkout
      • Submitting a cart
        • Initiating a charge
        • Authorization declines
      • Resuming cart submission
      • HGOP2
    • Orders
      • Getting orders
      • Selling entities
      • Retrieving addresses from an order
      • Retrieving line items from an order
      • Order lookup
      • Returns
        • Initiate an authenticated session
        • Setting up returns in Global Commerce
        • Managing returns
    • Subscriptions
      • Retrieve the subscription
        • Getting all orders for a subscription
        • Getting a subscription's pending actions
        • Getting all subscriptions for a shopper
        • Getting a subscription by identifier
      • Update subscription at the next renewal
        • Changing the subscription renewal type
        • Changing the subscription renewal quantity
        • Adding or updating a perpetual unit price
        • Changing the subscription's payment option
        • Changing the subscription's payment source
      • Immediately change the subscription
        • Updating the subscription's shipping address
        • Updating a subscription's billing and shipping email address
        • Cancelling a subscription
      • Immediately apply a midterm subscription change
        • Reducing the subscription renewal quantity
  • Admin APIs
    • Admin basics
      • Available Admin API calls
    • Order management
      • Getting the order's details
      • Downloading the invoice
    • Offer management
    • Refund management
      • Authorization
      • Refund reason codes
      • Creating a satisfaction refund
      • Getting the available refunds for a specific order
      • Getting refunds for a specific order
      • Getting refunds available for a shopper's order
      • Getting the JSON schema for an order refund
      • Managing a refund for a delayed payment method
      • Refund error scenarios
    • Subscription management
      • Retrieve the subscription
        • Getting all orders for a subscription
        • Getting a subscription's pending actions
        • Getting all subscriptions for a shopper
        • Getting a subscription by identifier
      • Update the subscription at the next renewal
        • Changing the subscription renewal type
        • Changing the subscription renewal product
        • Changing the subscription renewal price
        • Changing the subscription renewal quantity
        • Adding or updating a perpetual unit price
        • Changing the subscription's payment option
        • Changing the subscription's payment source
      • Immediately change the subscription
        • Activating a subscription
        • Changing the subscription's external reference identifier
        • Updating a subscription's billing and shipping email address
        • Cancelling a subscription
        • Updating the subscription's expiration date
      • Immediately apply a midterm subscription change
        • Applying a midterm change with price override
        • Reducing the subscription renewal quantity
      • Subscription notifications
        • Updating the subscriber's email address
        • Card Account Updater
        • Sending a payment information change notification
        • Sending an expired credit card notification
        • Sending an invalid payment account notification
        • Sending a payment failure notification
        • Sending a subscription renewal reminder notification
        • Setting up subscription renewal reminders
        • Setting up trial subscription renewal reminders
        • Setting up marketing reminders
      • Using the Expired Card Optimizer
    • Customer management
      • Retrieving customer details
      • Requesting PII removal for a customer
    • Site management
      • Configuring authorized shipping and billing countries
      • Getting a site's authorized billing countries
      • Getting a site's authorized shipping countries
    • Product management
      • Getting started
      • Manage products (asynchronous API)
        • Creating or updating a product
        • Adding or updating a product variation
        • Deploying a product
        • Applying live changes
        • Retiring a product
        • Deleting a product variation
        • Deleting a base or individual product's locale
      • Retrieve products (synchronous API)
        • Getting a product by locale
        • Getting a product variation
        • Getting a product variation by locale
      • Get the task status for a product (synchronous API)
        • Getting the latest information on a product task
        • Retrieving the tasks for a specific product
        • Retrieving the tasks for products
      • Bulk operation
        • Asynchronous bulk operations
          • Creating products in bulk
          • Updating products in bulk
          • Deploying products in bulk
          • Deleting product variations in bulk
        • Bulk product upload (BPU)
        • Bulk Product Export (BPE)
          • Line-item level satisfaction refund
          • Order-level satisfaction refund
          • Auto-created line-item level return product
          • Line-item level return product
    • File management
      • Downloading a file
  • Payments
    • Payments solutions
      • Drop-in payments
        • How Drop-in payments work
        • Drop-in payments integration guide
      • DigitalRiver.js with Elements
        • Elements integration guide
        • Configuring payment methods
          • Configuring Afterpay
          • Configuring Alipay+ (cross-border)
          • Configuring Alipay (domestic)
          • Configuring Amazon Pay
          • Configuring Apple Pay
          • Configuring Bancontact
          • Configuring BLIK
          • Configuring Boleto
          • Configuring CCAvenue
          • Configuring Clearpay
          • Configuring Credit Cards
          • Configuring FPX Online Banking
          • Configuring Google Pay
          • Configuring iDEAL
          • Configuring Klarna
          • Configuring Konbini
          • Configuring Online Banking (IBP)
          • Configuring Online Banking (Korea Bank Transfer)
          • Configuring PayCo
          • Configuring PayPal
          • Configuring SEPA Direct Debit
          • Configuring Trustly
          • Configuring Wire Transfer
          • Common payment sources
          • Common payment objects
    • Supported payment methods
      • Afterpay
      • Alipay (domestic)
      • Alipay+ (cross-border)
      • Amazon Pay
      • Apple Pay
      • Bancontact
      • BLIK
      • Boleto
      • CCAvenue
      • Clearpay
      • Credit Cards
      • FPX Online Banking
      • Google Pay
      • iDEAL
      • Klarna
      • Konbini
      • Korea Bank Transfer (Online Banking)
      • Online Banking (IBP)
      • PayCo
      • PayPal
      • PayPal Billing Agreement
      • PayPal Credit
      • PayPal Pay in 3
      • PayPal Pay in 4
      • PayPal RatenZahlung (Installment Payment)
      • SEPA Direct Debit
      • Trustly
      • Wire Transfer
    • Source basics
      • Managing sources
      • Handling credit card sources
      • Retrieving sources
    • Building payment workflows
      • Flows by payment type
      • Handling redirect payment methods
    • PSD2 and SCA
    • Payment testing scenarios
      • Testing standard payment methods
      • Testing redirect payment methods
      • Testing receiver payment methods
      • Testing the CCAvenue payment method
  • Events
    • Events overview
    • Responding to events
    • Event types
      • Delayed payment event types
        • Delayed payment expired event
          • Boleto
          • Konbini
          • Wire Transfer
        • Delayed payment reminder event
          • Boleto
          • Konbini
          • Wire Transfer
      • Subscription event types
        • Subscription created event
        • Subscription updated event
        • Subscription action processed event
        • Subscription cancelled event
        • Subscription credit card expired event
        • Subscription payment information changed event
        • Subscription renewal reminder event
        • Subscription renewed event
        • Subscription trial converted event
        • Subscription trial renewal reminder event
        • Subscription payment failed event
      • Post-order event types
        • Invoice created event
        • Refund credit memo event
      • Inventory event types
        • Inventory out of stock event
        • Inventory source and management
        • Inventory self-managed updated event
        • Inventory fulfiller-managed updated event
      • Post-order Notification Integration Guide
    • Webhooks
      • Commerce API safelist
      • Searching for a webhook
      • Creating a webhook
      • Using webhooks
      • Editing a webhook
      • Turning webhooks on or off
      • Revealing a webhook's secret
      • Rotating a webhook's secret
      • Viewing the webhook details
      • Deleting a webhook
  • Developer Resources
    • Postman collection
    • Commerce API references
    • Shopper APIs reference
    • Admin APIs reference
    • DigitalRiver.js reference
      • Including DigitalRiver.js
      • Initializing DigitalRiver.js
      • DigitalRiver object
      • Elements
        • Amazon Pay element
        • Apple Pay elements
        • Google Pay elements
        • IBAN element
        • iDEAL element
        • Konbini elements
        • Compliance element
        • Offline refund element
        • Online Banking elements
        • Tax Identifier element
        • Delayed payment instructions element
        • PayPal elements
      • Guidelines for capturing payment details
      • Security
      • Digital River payment objects
      • Error types, codes, and objects
  • General resources
    • Global Commerce
    • Global Commerce
      • Company hierarchy
      • Categories
        • Getting a list of categories
      • Products
        • Product scenarios
        • Individual products
          • Creating an individual product
        • Base product with variants
          • Creating a base product with variants
        • Bundle offers
          • Creating a prorated bundle offer with a subscription
        • Product combination
          • Creating a product combination
        • Gifting
        • Inventory status
      • Customer service
        • Log a shopper's request to remove PII
      • Customers
        • Creating a customer
        • Digital River-maintained customer login
        • Client-maintained customer login
      • Transparent Commerce purchase flow
    • eCompass
    • eCompass documentation
    • Release notes
      • 2024
      • 2024 latest
      • 2023
      • 2022
      • 2021
      • 2020
Powered by GitBook
On this page
  • Step 1: Build Online Banking objects
  • Online Banking source details object
  • Step 2: Create an Online Banking source or display
  • Create an Online Banking source using DigitalRiver.js
  • Create the Online Banking element using DigitalRiver.js functionality
  • Create your Online Banking display using DigitalRiver.js
  • Retrieving available banks
  • Retrieved banks
  • Example Online Banking source
  • Step 3: Authorize an Online Banking source
  • Redirecting the customer for Online Banking authorization
  • Step 4: Use the authorized source
  • Testing Online Banking (IBP)

Was this helpful?

  1. Payments
  2. Payments solutions
  3. DigitalRiver.js with Elements
  4. Configuring payment methods

Configuring Online Banking (IBP)

Online Banking, also sometimes called Internet Bank Payment (IBP), is a Browser Redirect processing method where customers authorize a debit from their bank account.

PreviousConfiguring KonbiniNextConfiguring Online Banking (Korea Bank Transfer)

Last updated 4 months ago

Was this helpful?

If you're using, you can create an payment method for your app or website in four easy steps:

Step 1: Build Online Banking objects

Build the Online Banking Source Request Details object. The Online Banking Source Request object requires the following fields.

Field
Value

type

onlineBanking

sessionId

The payment session identifier.

owner

onlineBanking

Online Banking source details object

The Online Banking Details object requires the following fields.

{
    "returnUrl": "https://example.com/success",
    "bankCode": "123"
}
Field
Required/Optional
Description

returnUrl

Required

Where you will redirect your customer to after authorization within the Bank authorization experience.

cancelUrl

Required

If you choose to use the full redirect flow, this is where your Customer will be redirected to after cancelling within the Online Banking 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

To create an Online Banking payment source, use the DigitalRiver.js library to create and mount elements to the HTML container, or you can assemble the information and then send it using the standard calls in DigitalRiver.js.

Create the Online Banking element using DigitalRiver.js functionality

The Online Banking 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 that 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');
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",
            "bankCode": "82"
        }
}
 
  
digitalriver.createSource(data).then(function(result) {
    if (result.error) {
        //handle errors
    } else {
        var source = result.source;
        //send the source to the 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 by 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.

digitalriver.retrieveOnlineBankingBanks("DE","EUR").then(function(response) {
    //use the returned values to create your display
});

Retrieved banks

[{
    "bankCode": "86",
    "bankName": "Sofortüberweisung"
}, {
    "bankCode": "21",
    "bankName": "Giropay"
}]

You can build an experience suitable for your needs with the retrieved banks.

<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 the data and pass it 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.

var sourceData = {
        "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",
            "bankCode": "82"
        }
 
        digitalriver.createSource(sourceData).then(function(result) {
            if (result.error) {
                //handle errors
            } else {
                var source = result.source;
                //send the source to the back end
                sendToBackend(source);
            }
        });

Example Online Banking source

{
    "clientId": "gc",
    "channelId": "drdod15",
    "liveMode": false,
    "id": "8c4ef38f-d156-4e9d-bb37-bdb8849ef54b",
    "sessionId": "ea03bf6f-84ef-4993-b1e7-b7d5ecf71d1f",    
    "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",
    },
    "onlineBanking": {
        "bankCode": "86"
    }
}

Step 3: Authorize an Online Banking source

When you create an Online Banking source, the customer must 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

Use the redirectUrl parameter in your createSource response to redirect your customer to the payment provider for authorization.

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",
    "sessionId": "ea03bf6f-84ef-4993-b1e7-b7d5ecf71d1f",    
    "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",
    },
    "onlineBanking": {
        "bankCode": "86"
    }
}

Step 4: Use the authorized source

{
  "paymentMethod": {
    "sourceId": "e7ba0595-059c-460c-bad8-2812123b9313"
  }
}

Testing Online Banking (IBP)

An .

An .

To create an online banking source, you must reference the created element and supplemental data in your request to create an online banking source. DigitalRiver.js will retrieve and assemble the request on your behalf.

The address object must contain postal code and state/province data that using the state attribute. Note that the state attribute listed below corresponds to the countrySubdivision attribute used when providing address information. The payment session manages the correct field name on the backend.

Once authorized, you can use the source by .

See for testing instructions.

adheres to a standardized format
DigitalRiver.js with Elements
Online Banking
Step 1: Build an Online Banking source request object
Step 2: Create an Online Banking source or display
Step 3: Authorize an Online Banking source
Step 4: Use the authorized source
Create an Online Banking source using DigitalRiver.js
Create your Online Banking display using DigitalRiver.js
Online Banking Source Details object
attaching it to a cart
Owner object
Testing redirect payment methods
createSource