Web SDK

Last changes: 10-07-2020

Initialize Payment Form Using Transaction ID

(function () {
    
        function errorHandler(errorCode, error) {

            // handle failed payment here
            console.error({code: errorCode, message: error});
        }
            
        function successHandler(data) {

            var msg = 'Data: ' + JSON.stringify(data);

            if (data.transactionStatus !== 'ERROR')
            {
                  // process success
                  console.log(msg);
            }            
            else{
                  // process error
                  errorHandler("TRX_ERROR", data.message);    
            }        
        }

        function tryRenderPaymentForm(transactionId) {            

            app.registerErrorHandler(errorHandler);
            app.registerPaymentCompletedHandler(successHandler);
            app.renderPaymentSelection(transactionId, "widget-container");

            return true;
        }
            
        // Loading the bundle will initialize the smart pay app
        // instance and attach it to the window object.
        const app = window.SmpLibrary.SmartPayAppInstance;
        
        document.getElementById("checkout-button").addEventListener("click", function (e) {
            if (e.target) {

                // provide here transactionId received from back-end
                tryRenderPaymentForm(transactionId);

            }
        });
    })();

The BronsonStylesheet and JavaScript file must be stored locally on your server.

Please make sure that SmartPay is allowed to access ressources related to the bronson stylesheet (e.g. fonts) by configuring cross-origin ressource sharing in your webserver (Access-Control-Allow-Origin).

Get the Bronson Toolkit: https://bronson.vwfs.tools/

Include stylesheet:

<link href="bronson-style.css" rel="stylesheet">

Dynamically import the SmartPay Widget Widget bundle and include the Bronson JavaScript:

<script src="https://.../Widget/smp-bundle.js" type="text/javascript"></script>
<script src="bronson.js" type="text/javascript"></script>

Loading the bundle will initialize the SmartPay app and attach it to the specified html-element container.

The app is made up of the following Methods:

Method Name Parameters Description
renderPaymentSelection transactionId, ContainerDiv, options(optional) Renders a payment transaction based on the given configuration object.
registerErrorHandler Error Callback Optional Error Handler
registerPaymentCompletedHandler Completed Payment Callback Optional Payment Completion Handler

APP.RENDERPAYMENTSELECTION - Calling this function will trigger the SmartPay Widget to call the service and load the payment methods for the given transaction

Field Mandatory Description Type
transactionId Yes Transaction id initialized between the merchant backend and SmartPay SDK backend String
containerDiv Yes Root element id where the Widget payment panel is rendered String
options.selectedPaymentDiv No Root element id where the payment method selection informatoin can be rendered String
options. submitButtonDiv No Root element id where the button to proceed to payment can be rendered - if merchant needs to extract
the button outside the SmartPay panel
String

APP.REGISTERERRORHANDLER - Errors triggered in the SmartPay App can be handled in the merchant site by registering a callback function in the form below:

function merchantErrorHandler(errorCode, error) {
    console.error('merchant, errorCode: ' + errorCode + ', details: ' + error)
}
app.registerErrorHandler(this.merchantErrorHandler.bind(this))
Error code Description
ERR_PAYMENT_CONFIG Error while loading payment methods configuration.
ERROR_INIT_PAYMENT Error initializing ContoWorks payment.
ERROR_PAYMENT_FORM Error inside Wirecard payment form.