Build a Kobini source request object. A Konbini Source Request object requires the following fields.
Field
Value
Konbini Source Details object
{
"storeId": "010"
}
Field
Required/Optional
Description
Step 2: Create a Konbini source using DigitalRiver.js
Use the DigitalRiver.js library to create and mount elements to the HTML container. If you are using the DigitalRiver.js element (option 1), the storeId value is automatically populated based on the customer's selected store. If you are not using the DigitalRiver.js element (option 2), you must construct the request to include the storeId parameter.
Option 1: Create a Konbini element using DigitalRiver.js functionality
The pattern for creating the Konbini element follows the same pattern as other elements and exposes the same customization and events. You can customize the look and feel through options and then place it on the page.
DigitalRiver.js will create and render a select element that populates with the store logo and localized store name of the available stores where the customer can pay using this payment method.
The same events and structures appear in the Konbini element, and you should listen to the Change event to determine when the user has selected. When the change event response contains "complete": true, the shopper has selected a store.
konbiniElement.on('blur',function (event) {console.log('konbini blur', event);});konbiniElement.on('focus',function (event) {console.log('konbini focus', event);});konbiniElement.on('ready',function (event) {console.log('konbini ready', event);});konbiniElement.on('change',function (event) {console.log('konbini change', event);if (event.complete) {//the user has selected a store, and you may create the source } elseif(event.error) {//do something with the error message }});
To create a Konbini source, reference the created element and the supplemental data in your createSource request. DigitalRiver.js will retrieve and assemble the request on your behalf.
The address object must contain postal code and state/province data thatadheres to a standardized format 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.
var data = {"type":"konbini","sessionId":"ea03bf6f-84ef-4993-b1e7-b7d5ecf71d1f","owner": {"firstName":"John","lastName":"Doe","email":"john.doe@digitalriver.com","phoneNumber":"000-000-0000","address": {"line1":"6 Chome-10-1 Roppongi, Minato","state":"Tokyo","postalCode":"106-0032","country":"JP" } },"konbini": {"storeId":"010" }}digitalriver.createSource(data).then(function(result) {if (result.error) {//handle errors } else {var source =result.source;//send the source to back endsendToBackend(source); }});
Option 2. Using DigitalRiver.js to create your own Konbini display
If you decide that you do not want to use the out-of-the-box functionality provided with the Konbini element, you may also use the digitalriver.retrieveKonbiniStores() method, which will allow you to build your own experience.
Retrieving available stores
DigitalRiver.js exposes a method that allows you to retrieve the available stores where Konbini is accepted. If stores are available, the response returns an array of objects. If stores are not available, the response returns an empty array.
digitalriver.retrieveKonbiniStores().then(function(response) {//use the returned values to create your display});
Once you reach a point in your flow where the customer has selected a store, you can use the createSource function to assemble and pass the data to Digital River to create your payment.
Additional Fields Required: If you are creating a Konbini source without using the DigitalRiver.js Konbini element, you are required to pass an additional field storeId.
var sourceData = {"type":"konbini","sessionId":"ea03bf6f-84ef-4993-b1e7-b7d5ecf71d1f","owner": {"firstName":"John","lastName":"Doe","email":"john.doe@digitalriver.com","phoneNumber":"000-000-0000","address": {"line1":"6 Chome-10-1 Roppongi, Minato","state":"Tokyo","postalCode":"106-0032","country":"JP" } },"konbini": {"storeId":"010" }digitalriver.createSource(sourceData).then(function(result) {if (result.error) {//handle errors } else {var source =result.source;//send the source to the back endsendToBackend(source); } });
Once the order has been submitted, the source remains in a pending_funds state. At this point, direct your customer to go to the store they chose and pay the invoice. These details are reflected in the konbini block of the payment source.
