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

https://api.vendreo.com/v1/card/request-payment (Full example: docs)

Response

{
    "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="https://secure.vendreo.com/css/theme.css" />
<script src="https://secure.vendreo.com/js/sdk.js"></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()
        .setRequestToken('{REQUEST_TOKEN}')
        .setPublicKey('{CARD_CLIENT_KEY}')
        .setCardFormOptions({
            show_card_number_icon: false,
            show_expiry_icon: false,
            show_cvv_icon: false,
            show_name_icon: false,
            cvv_as_plain_text: true,
        })
        .setFormParams({
            customer_name: 'Foo',
            email: '[email protected]',
            address: '101 Foo Street',
            postcode: 'AA11AA',
        })
        .addMessageCallback((message) => {
            document.getElementById('debug').append(message.action.toString() + ' - ' + JSON.stringify(message.data) + "\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);
        })
        .run();
</script>

JavaScript SDK Object

Method	Params	Usage	Required
setRequestToken	string	Provide the token given by the initial payment request	true
setPublicKey	string	Provide the public `APPLICATION_KEY`	true
setCardFormOptions	object	Customise the default card form via this configuration - Card Form Options	false
setFormParams	object	Provide form data for testing purposes such as customer name, email etc	false
addMessageCallback	callback	Callback for ALL payment callback notifications	false
onSuccess	callback	Callback runs when the payment is successful	true
onError	callback	Callback runs when the payment has a validation error	true
onFailure	callback	Callback runs when the payment has failed	true
onForbidden	callback	Callback runs when the payment request encounters a 403 response	false
run	void	Creates the form	true

Card Form Options

Option	Description	Type	Default
show_card_number_icon	Displays card icon alongside the card input field	bool	false
show_expiry_icon	Displays expiry icon alongside the expiry input field	bool	false
show_cvv_icon	Displays cvv icon alongside the cvv input field	bool	false
show_name_icon	Displays user icon alongside the customer name input field	bool	false
cvv_as_plain_text	Show CVV as readable text - if false cvv will be obfuscated	bool	true

Returned Postbacks

card_payment_started
card_payment_user_cancelled - If the user chooses to cancel the transaction.
card_payment_completed OR card_payment_failed OR card_payment_request_forbidden