Web SDK

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

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

<div id="selector-container"></div>
<div id="selection-container"></div> <!-- optional -->
<div id="button-container"></div> <!-- optional -->
<div id="registration-continue-button-container"></div> <!-- optional -->
<div id="payment-continue-button-container"></div> <!-- optional -->

const app = window.SmpLibrary.SmartPayAppInstance;

void renderWidget ( options );

// Simple CIT
app.renderWidget({
    paymentCheckoutToken: checkoutToken,
    container: "smp-panel",
    successHandler: function(data) { ... },
    errorHandler: function(errorCode, error) { ... },
    paypalButtonStyle: {
      layout:  'vertical',
      color:   'blue',
      shape:   'rect',
      label:   'paypal'
    }
});
 
// MIT and detailed CIT (optional)
app.renderWidget({
    subscriptionCheckoutToken: checkoutToken,
    container: "smp-panel",
    successHandler: function(data) { ... },
    errorHandler: function(errorCode, error) { ... },
    onBeforeSubmit: function(data) { ... },
    onBeforeDeleteSpo: function(data) { ... },
    paypalButtonStyle: {
      layout:  'vertical',
      color:   'blue',
      shape:   'rect',
      label:   'paypal'
    }
});

void renderMultiPageWidget ( options );

// Checkout Page. Render Selector
app.renderMultiPageWidget({
    paymentCheckoutToken: checkoutToken,
    container: "smp-panel",
    successHandler: function(data) { ... },
    errorHandler: function(errorCode, error) { ... }
});
 
// Overview Page. Render Selection
app.renderMultiPageWidget({
    paymentCheckoutToken: checkoutToken,
    selectedPaymentDiv: "selection-container",
    errorHandler: function(errorCode, error) { ... }
});

// Confirmation Page. Render Button
app.renderMultiPageWidget({
    paymentCheckoutToken: checkoutToken,
    submitButtonDiv: "button-container",
    successHandler: function(data) { ... },
    errorHandler: function(errorCode, error) { ... },
    onBeforeSubmit: function(data) { return true; }
});

function successHandler(data){
     
    if (data.kind === "CALLBACK"){
        // process payment completed
        // Requets transaction status via Get Payment Status API
    }
 
    if (data.kind === "ADD_METHOD_CALLBACK"){
        // optionally process payment option registration.
        // Note: there is no any payment processed yet, no need to check status.
    }  
 
}
 
app.renderWidget({
    paymentCheckoutToken: checkoutToken,
    container: "smp-panel",
    successHandler: successHandler
});

function errorHandler(code, message) {
    console.error(code + ': ' + message);
     
    // handle the error
    // Requets transaction status via Get Payment Status API
     
}
 
app.renderWidget({
    paymentCheckoutToken: checkoutToken,
    container: "smp-panel",
    successHandler: successHandler,
    errorHandler: errorHander
});

Promise<boolean> | boolean  onBeforeSubmit ( data ); 

(function () {
 
     // process payment completed unseccessfully or not started
    function errorHandler(errorCode, error) {
        // handle failed payment here
        console.error({code: errorCode, message: error});
    }
 
     // process payment completed successfully
    function successHandler(data) {
         
        console.log(JSON.stringify(data));
 
        if (data.kind === "CALLBACK"){
            // process payment completed
            // Requets transaction status via Get Payment Status API
        }
        if (data.kind === "ADD_METHOD_CALLBACK"){
            // optionally process SPO registration.
            // Note: there is no any payment processed yet, no need to check status.
        }
    }
 
    function tryRenderPaymentForm(checkoutToken) {
        app.renderWidget({
            paymentCheckoutToken: checkoutToken,
            container: "selector-container",
            submitButtonDiv: "button-container",
            selectedPaymentDiv: "selection-container",
            successHandler: completeHandler,
            errorHandler: errorHandler,
            onBeforeSubmit: function(data) { return true; }
            onBeforeDeleteSpo: function(data) { return true; }
        });
        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 paymentCheckoutToken received from back-end
            tryRenderPaymentForm(checkoutToken);
        }
    });
})();