Create Payments

To successfully integrate card payments please follow the steps below:

  • Create a payment token.
  • Use the Vendreo Card JS SDK to display the form to the user on your website.
  • Redirect the user to Success or Failed page based on callbacks from the SDK.

Creating A Payment Token (Full example: docs)


    "token": "9931e428-27d2-400f-95ea-8c319517f7c0",
    "payment_request_id": 532,
    "meta": {
        "tracing_id": "9931e425-e2ea-42f4-a87a-0a2fed33fb1e"

Displaying The Form

Add the following tags into your HTML page (please note that the CSS file is optional).

<link rel="stylesheet" href="" />
<script src=""></script>

To specify placement of the payment form, add the following div.

<div id="card-wrapper" style="height: 400px; padding-bottom: 50px;"></div>

Insert the following script to the bottom of your page:

<script defer>
    new CardPortal()
            show_card_number_icon: false,
            show_expiry_icon: false,
            show_cvv_icon: false,
            show_name_icon: false,
            cvv_as_plain_text: true,
            customer_name: 'Foo',
            email: '[email protected]',
            address: '101 Foo Street',
            postcode: 'AA11AA',
        .addMessageCallback((message) => {
            document.getElementById('debug').append(message.action.toString() + ' - ' + JSON.stringify( + "\n");
        .onSuccess((response) => {
            console.log('success callback', response)
            document.getElementById('card-wrapper').innerHTML = 'Done';
        .onError((error) => {
            console.log('error callback', error);
        .onFailure((response) => {
            console.log('failed callback', response);
            document.getElementById('card-wrapper').innerHTML = 'Failed';
        .onForbidden((response) => {
            console.log('forbidden callback', response);

JavaScript SDK Object

setRequestTokenstringProvide the token given by the initial payment requesttrue
setPublicKeystringProvide the public APPLICATION_KEYtrue
setCardFormOptionsobjectCustomise the default card form via this configuration - Card Form Optionsfalse
setFormParamsobjectProvide form data for testing purposes such as customer name, email etcfalse
addMessageCallbackcallbackCallback for ALL payment callback notificationsfalse
onSuccesscallbackCallback runs when the payment is successfultrue
onErrorcallbackCallback runs when the payment has a validation errortrue
onFailurecallbackCallback runs when the payment has failedtrue
onForbiddencallbackCallback runs when the payment request encounters a 403 responsefalse
runvoidCreates the formtrue

Card Form Options

show_card_number_iconDisplays card icon alongside the card input fieldboolfalse
show_expiry_iconDisplays expiry icon alongside the expiry input fieldboolfalse
show_cvv_iconDisplays cvv icon alongside the cvv input fieldboolfalse
show_name_iconDisplays user icon alongside the customer name input fieldboolfalse
cvv_as_plain_textShow CVV as readable text - if false cvv will be obfuscatedbooltrue

Returned Postbacks