Configure Dojo components

Dojo Card

const card = new Dojo.Payment(config, displayErrorsCallback, onSubmitTriggered, onBlur);

Parameter	Type	Description
config	object Config	Required. Config containing details of this payment and the styling of the payment form.
displayErrorsCallback	function	An optional callback to display text validation errors. The supplied function is called when there is a validation state change. This function is passed an array of validationError objects.
onSubmitTriggered	function	An optional callback that's called when the submit event on the payment form is fired. This allows the payment to be submitted or extra validation done when the user presses the enter key on the payment form.
onBlur	function(isValid: boolean)	An optional callback that's called when focus is lost from any field in the form. The parameter isValid will be true when all fields are completed and there are no validation errors.

Dojo Wallet

const wallet = new Dojo.WalletPayment(config, displayErrorsCallback, paymentComplete);

Parameter	Type	Description
config	object Config	Required. Config containing details of this payment and the styling of the payment button.
displayErrorsCallback	function	An optional callback to display text validation errors. The supplied function is called when there is a validation state change. This function is passed an array of validationError objects.
paymentComplete	function	A callback that returns the result of payment. The supplied function is called when the payment is executed. This function is passed a Transaction Result object.

Configuration

Property	Type	Description	Card Component	Wallet Component
containerId	string	Required. The id of the div element where the payment details will be displayed.	✓	✓
paymentDetails	paymentDetails	Required. Details of the payment to be made.	✓	✓
fontCss	array of strings	Array of urls pointing to css files for importing fonts, for example https://fonts.googleapis.com/css?family=Do+Hyeon	✓	-
styles	stylesConfig	Required. Object defining custom styles for the payment form.	✓	-
text	textConfig	Object defining text to override the defaults.	✓	-
onIframeLoaded	function	An optional function that's called once the iframe has been loaded and configured.	✓	✓
onIframeLoadFailed	function	An optional function that's called if there is an error loading the iframe.	✓	✓
errorMessages	errorMessages	Object defining custom validation error messages for the payment form.	✓	✓
callbacks	callbacksConfig	Object defining callback functions on various events.	✓	-
callbacks	walletPaymentCallbacksConfig	Object defining callback functions on various events.	-	✓
buttonConfig	buttonConfig	An optional button config. It defaults to colour black and type plain.	-	✓
emailRequired	boolean	An optional config to collect the buyer's email. It defaults to false.	-	✓
billingAddressRequired	boolean	An optional config to collect the buyer's billing address. It defaults to false.	-	✓
shippingAddressRequired	boolean	An optional config to collect the buyer's shipping address. It defaults to false.	-	✓

Payment details

Property	Type	Description
paymentToken	string	Required. The access token supplied by the get access token API.

Styles configuration

Property	Type	Description
base	fieldStyle	Required. Styles to be applied to all fields.
cv2	fieldStyle	Styles to override the base styles for the cv2 field.
cardNumber	fieldStyle	Styles to override the base styles for the card number field.
expiryDate	fieldStyle	Styles to override the base styles for the expiry date field.
cardName	fieldStyle	Styles to override the base styles for the card name field.
cardIcon	JavaScript CSS properties	Styles to be applied to the card icon.
form	JavaScript CSS properties	Styles to be applied HTML form element containing all the fields.

Field style

Property	Type	Description
default	JavaScript CSS properties	Styles to be applied when the field is in its initial state.
focus	JavaScript CSS properties	Styles to be applied when the field has focus.
error	JavaScript CSS properties	Styles to be applied when the field has failed validation.
valid	JavaScript CSS properties	Styles to be applied when the field has passed validation.
errorFocus	JavaScript CSS properties	Styles to be applied when the field has focus and is in an error state.
validFocus	JavaScript CSS properties	Styles to be applied when the field has focus and is valid.
container	JavaScript CSS properties	Styles to be applied to the div wrapping the label and the input field.
label	JavaScript CSS properties	Styles to be applied to the label.
validationText	JavaScript CSS properties	Styles to be applied to the validation message. Only applicable if text.(cardName |cardNumber|expiryDate|cv2).showValidation is true.
validationIcon	JavaScript CSS properties	Styles to be applied to the validation message icon. Only applicable if text.(cardName |cardNumber|expiryDate|cv2).showValidation is true. E.g., to set the icon colour to purple set this property to { backgroundColor: 'purple' }

Text configuration

Property	Type	Description
cardName	fieldText	Config to override the default card name placeholder and label text.
cardNumber	fieldText	Config to override the default card number placeholder and label text.
expiryDate	fieldText	Config to override the default cv2 placeholder and label text.
cv2	fieldText	Config to override the default expiry date placeholder and label text.

Field text

Property	Type	Description
label	string	Required. Text to replace the default label text.
placeholder	string	Required. Text to replace the default placeholder text. (Empty will be ignored)
showValidation	boolean	Option to show the validation message. Defaults to false if not set.

Button configuration

Property	Type	Description
colour	string	It defaults to black, but it can optionally be changed to white.
type	string	It defaults to plain (payment button without additional text), but it can optionally be changed to book (Book with GooglePay/ApplePay), buy, checkout, donate or order.

Error messages

This allows overriding of the default error messages. This will override both the messages passed to displayErrorsCallback and the message displayed if showValidation is set to true.

Property	Type	Description
cardNameRequired	string	Card name isn't entered.
cardNameInvalid	string	Invalid card name is entered.
cardNumberRequired	string	Card number isn't entered.
cardNumberInvalid	string	Invalid card number is entered.
expiryDateRequired	string	Card expiry date isn't entered.
expiryDateInvalid	string	Invalid card expiry date is entered.
expiryDateMustBeInFuture	string	Card expiry date isn't in the future.
cv2Required	string	CV2 isn't entered.
cv2Invalid	string	Invalid CV2 is entered.

Card callbacks

Property	Type	Description
onFormComplete	function	An optional function which is called once the form is complete and all input values are valid.
onFormFieldValid	function(fieldName: string)	An optional function which is called once a form field input is valid.

Wallet callbacks

Property	Type	Description
onPaymentCancelled	function	An optional function which is called if the user closes the wallet payment form without paying.
onPaymentInitiated	function	An optional function which is called when the wallet payment button is clicked.

Validation error

Property	Type	Description
errorType	string	The type of validation error that has occured. For the card component this can be one of the following: cardNameRequired, cardNameInvalid, cardNumberRequired, cardNumberInvalid, expiryDateRequired, expiryDateInvalid, expiryDateMustBeInFuture, cv2Required, or cv2Invalid.
message	string	Message detailing the validation error for displaying to the user.

Execute payment

card.executePayment(additionalInfo)
    .then(function(data){
        /*handle response here*/
    }).catch(function(data){
        /*handle failure here*/
    }

When the promise is fulfilled the following object will be passed.

Transaction result

Property	Type	Description
statusCode	statusCode	Indicated the status of the transaction. 0 for a successful transaction.
authCode	string	If the transaction was successful, then the auth code is passed out here.
message	string	This gives a more detailed description of the status of the transaction.

Status code

Status Code	Result	Description
0	Successful	The transaction was successful.
3	Authorizing	The card holder hasn't completed 3DS, this status will only be seen on the REST API.
4	Referred	The card issuer has parked the transaction awaiting contact with the customer before proceeding to authorize or decline the transaction.
5	Declined	The transaction was declined by the card issuer or acquiring bank.
20	Duplicate Transaction	The transaction which was processed was a duplicate. Ensure each transaction has a unique OrderId.
30	Failed	Error executing transaction.
400	Invalid Request	The request has failed validation by our servers and the transaction hasn't been submitted to the gateway. Possible causes for this are invalid transaction type or other data in the request.
401	Issue with Access Token	The access token being used isn't valid, the transaction hasn't been submitted to the gateway. This can be caused if the token has already been used or the 30 minute expiry time has elapsed.
404	No Access Token Supplied	No access token has been supplied to Connect-E. Transaction hasn't been submitted to the gateway.
500	Internal Server Error	There's been an error submitting the transaction, please check the REST API for the status of the transaction.

Additional information

The user's email address and billing address can be passed as the optional additionalInfo object as defined below. These values will override those set when the access token was created.

Property	Type	Description
userEmailAddress	string	This email will be checked with the card issuer to provide additional security.
userPhoneNumber	string	The cardholder's phone number.
billingAddress	address	This address will be checked with the card issuer to provide additional security.
shippingDetails	shippingDetails	Shipping details for the order.
metaData	Map<string, string>	Meta data to be passed at execution time. This will be merged into MetaData passed via the REST API. This can be represented as a JSON object with only string values, other types aren't supported.

Shipping details

Property	Type	Description
name	string	Name order is being shipped to.
address	address	Address order is being shipped to.

Address

Property	Type	Description
address1	string	Customer’s billing address line 1.
address2	string	Customer’s billing address line 2.
address3	string	Customer’s billing address line 3.
address4	string	Customer’s billing address line 4.
city	string	Customer’s billing address city.
state	string	Customer’s billing address state or county.
postcode	string	Customer’s billing address postcode or zipcode.
countryCode	string	Customer’s billing address country code using ISO 3166–1 for example United Kingdom: 826.