Skip to main content

How can we help you?

Orderform-Widget for the users of your platform

If you run a platform, and your user are vendors on Digistore24, you can offer your users a customizable order form widget.

It is integrated on the sales pages on your platform and enables direct orders to be placed from Digistore24.

The order form widget is configurable via an API and can complete orders in one, two or three steps.

api-kochbuch-multi-step-orderbox.png

Requirements

  • You run a platform
  • The users of your platform are vendors on Digistore24
  • The vendors have a Digistore24 API key, which is stored in your platform.

Basics

As a test, you can manually create an order form widget on Digistore24.

In the vendor view, select Account – Order forms – New order form widget.

You can adjust all the settings of the order form editor via the Digistore24 API.

Process

Order form editor in your platform

On your platform, you provide an editor for the settings of the order form widget.

You can create or update the widget using the API functions createOrderform() and updateOrderform(). The order form widget is integrated via iframe. If you have changed the settings, reload the iframe.

Displays of the order form

Include this HTML code on your page. You use this code for the editor and for the productive version of your sales page.

<script src='https://www.digistore24.com/service/js/orderform_widget.js'></script><script>const DS24_ORIGIN='https://www.digistore24.com';</script>
<iframe id='ds24_payIFrame' style='overflow: hidden; width: 100%; height: 600px; border: none; background: transparent;' src='https://www.digistore24.com/product/PRODUCT_ID/ORDERFORM_ID'></iframe>

Replace the placeholders PRODUCT_ID and ORDERFORM_ID accordingly.

The product and order form must belong to the same Digistore24 vendor.

Editor mode

While editing the order form, the user will often want to switch between tabs. To make this process easier, add the following JavaScript code in your editor:

<script>
     window.addEventListener("ds24-msob-onload", function( e ) {
         ds24_setEditorMode();
     } );
</script>

Design possibilities

Your platform can provide graphics for the tabs, as well as the custom CSS code that allows you to customize the order form widget. These can then be created using the API functions createOrderform() or updateOrderform() on the widget (using the fields tab_image_1_url, tab_image_2_url and tab_image_3_url and custom_css, respectively).

Important: The Digistore24 logo at the bottom of the order form must remain visible and unchanged. This is a requirement set by our payment provider.

API functions

To create and maintain the order form on Digistore, use the following API functions:

Other useful functions are also possible:

If you want Digistore24 to manage the images of your users:

Digistore24 order form widget JS API

You can change the order form from your sales page or from the editor using the following JavaScript API.

Call functions after document loading

The multistep order box triggers the ds24-msob-onload event, after it has been fully loaded. When using the following functions, make sure, you use them after this event.

<script>
     window.addEventListener("ds24-msob-onload", function( e ) {
         console.log( e.detail );
     } );
</script>

function ds24_setEditorMode();

Activates the editor mode. The user can then change the tabs without having to fill in the entry fields correctly.

The editor mode can also be set via the GET parameter editor_mode=1, e.g.:

...
<iframe ... src='https://www.digistore24.com/product/PRODUCT_ID/ORDERFORM_ID?editor_mode=1'></iframe>

function ds24_reloadIframe();

Reloads the iframe. Use this in your editor if changes to the order form have been saved and should now be displayed.

function ds24_setStep( step_no );

Sets the current step number. For two-step order forms step_no is 1 or 2. For three-step order forms, it is 1, 2 or 3.

The current step can also be selected via the GET parameter step.

function ds24_addEventListener( event_name, event_handler );

Adds an event listener.

The event listener is following function-type: function ( event_name, event_details )

Supported events:

  • Change of the tab:
    event_name: stepChange
    event_details: { newStep: NUMBER }

function ds24_setContactData( address );

Fills in the form with the contacts. Address is an object with these fields (all are optional):

  • i_order_as – ‘private' or ‘business'
  • company
  • first_name
  • last_name
  • street
  • street_number
  • zip code
  • city
  • country – the country as a 2-digit country code e.g. DE, AT or CH.
  • phone_no
  • tax_id -the VAT ID is only available if i_order_as == ‘business' and if the order was placed from an EU country other than Germany.

Important: Changing the country reloads the iframe. To prevent this, the country can also be transferred as the GET parameter country, for example:

...
<iframe ... src='https://www.digistore24.com/product/PRODUCT_ID/ORDERFORM_ID?country=AT'></iframe>

The other fields (i_order_as, company, first_name, etc.) can also be transferred as GET parameters.

function ds24_setPaymentPlan( plan_index_or_id );

Selects a payment plan.

plan_index_or_id is either the ID of the payment plan (e.g. 123456) or the index of the payment plan beginning with 1. i.e. plan_index_or_id == 2 selects the second payment plan.

function ds24_setQuantity( product_index_or_id, quantity );

Sets the quantity for a product.

product_index_or_id is either the ID of the product (e.g. 123456) or the index of the product beginning with 1. i.e. product_index_or_id == 2 selects the second product.

function ds24_setCurrency( currency );

Sets the currency.

  • currency – three-digit currency code, e.g. EUR, USD…

Available currencies are returned via the API function listCurrencies().

Important: Changing the currency reloads the iframe. To prevent this, the currency can also be transferred as the GET parameter currency, for example:

...
<iframe ... src='https://www.digistore24.com/product/PRODUCT_ID/ORDERFORM_ID?currency=USD'></iframe>

function ds24_setDiscountVoucher( voucher_code, lock_input, show_msg )

The purchase is made with the discount code provided (if it is valid for the purchase).

  • voucher_code – the discount code
  • lock_input – if TRUE, the voucher field is write-protected (if the voucher was valid). If FALSE, the buyer can change the code. Default is TRUE
  • show_message – If TRUE, a popup window with a note about the discount is displayed if the discount is valid. Not for FALSE. Then the discount is applied without a popup. In both cases, the discounted prices are displayed in red and the original prices are crossed out. The default is TRUE.

You can also pass the voucher code as a GET parameter “voucher” to the iframe url.

ds24_setCustomParam( custom )

Sets the custom parameter, which is also passed to the order form via the GET custom parameter. The parameter is then looped through and passed as a custom field in the IPN message and at the Api call getPurchase() or listPurchases().

  • custom – string, maximum 1023 characters consisting of digits, A-Z, a-z, spaces and the special characters dot ., comma ,, tilde ~, hyphen - and underscore _.

You can also pass the voucher code as a GET parameter “custom” to the iframe url.

function ds24_currentStep();

Returns the current step number: 1, 2 or 3.

function ds24_totalStepCount();

Returns the total number of steps possible: 1, 2 or 3.

Example

This code selects the second step on the order form widget.

 <script src='https://www.digistore24.com/service/js/orderform_widget.js'></script><script>const DS24_ORIGIN='https://www.digistore24.com';</script> <iframe id='ds24_payIFrame' style='overflow: hidden; width: 100%; height: 600px; border: none; background: transparent;' src='https://www.digistore24.com/product/1234/5689'></iframe>
<script type="text/javascript">
     window.onload = function() {
         ds24_setStep(2);
     };
 </script>