Widget API

Payment Widget API

Payment Widget API enables you to further customize your checkout workflows.  Here you can find the reference for the wpwlOptions and you can see these in action on our workflow examples page.

Parameter Description Examples MultiCard Support
locale

Sets the language/country of the payment forms. Expects ISO 639-1 for languages and ISO 3166-1 alpha-2 for countries. Default is "en-US".

Supported languages are: ar,be,bg,cn,cz,de,da,el,en,es,fi,fr,gr,hu,it,ja,ko,nl,no,pl,pt,ro,ru,sv,sk,sl,tr

Right-to-left languages are not supported by the number formatter. When using "ar", for example, set numberFormatting:false

locale: "de-AT"

locale: "de"

Check the requirements of the connector you are integrating in your shop. If the connector requires to have the language and the country provided, use the format "de-AT". If there is no requirement defined, you may use any of the two options.

 No. This parameter applies to all the card forms rendered.
style Sets the style of the payment forms. You can choose from "card", "logos", "none", and "plain" style. Use "none" to completely remove the styling and apply your customization. style: "card" No. This parameter applies to all the forms rendered.
autofocus Sets focus to the selected input/select element on the payment page upon loading autofocus : 'card.holder' No. This parameter applies to all the card forms rendered.
onReady Triggers when all payment forms are ready onReady: function(array) {/* function here */};
onReady: function(array) {
$.each(array, function(key, value) {
console.log('containerKey ' + value.containerKey + ' ccMethods ' + value.ccMethods.toString());
});
}}; 		No. This parameter applies to all the card forms rendered. This function is passed an array of JSON objects. The array length is the sum of the card forms rendered. Each element in the array has two key-value set. 'containerKey' which holds the value of the class of the card container. 'ccMethods' which holds the payment brands that are supported by the card form.
requireCvv Determines whether the CVV field is presented on the payment form. requireCvv: false No. This parameter applies to all the card forms rendered.
allowEmptyCvv Determines whether the CVV field can be empty. By default it is false allowEmptyCvv: true No. This parameter applies to all the card forms rendered.
allowEmptyCardHolderName Determines whether the CardHolder field cannot be empty if option is false. By default it is true allowEmptyCardHolderName: false No. This parameter applies to all the card forms rendered.
disableCardExpiryDateValidation Determines whether the card expiry date field should be validated. By default it is validated (false). disableCardExpiryDateValidation: true No. This parameter applies to all the card forms rendered.
enableSAQACompliance Use to make the credit card form SAQA compliant. Enabling this will render the card holder and expiry date fields in separate iFrames. By default it is false enableSAQACompliance: true No. This parameter applies to all the card forms rendered.
useSummaryPage If set to true, the payment is not completed, instead the form will initiate a callback to the onSaveTransactionData function, which can initiate a redirection to a summary page. This summary page can then be used to summarise the checkout before asking the user to confirm. An example can be seen on our advanced options page. useSummaryPage: true No. This parameter applies to all the card forms rendered.
onSaveTransactionData Triggered after the shopper presses Continue on the CnP form, when useSummaryPage flag is set to true. Parameter "data" is the serialized data of the payment form. onSaveTransactionData: function(data){console.log(data);} No. This parameter applies to all the card forms rendered.
browser.threeDChallengeWindow

Dimensions of the challenge window displayed to the shopper during 3D Secure 2 authentication. The default value is automatically detected from the card form width.

Available values are 1-5, where

  • 1 = 250x400
  • 2 = 390x400
  • 3 = 500x600
  • 4 = 600x400
  • 5 = Full screen

 browser: { threeDChallengeWindow: 5 } No. This parameter applies to all the card forms rendered.
threeDIframeSize Sets size of the 3D secure iframe. This iframe will only be used in case a shopper has to enter 3D secure credentials on the bank's page. 'threeDIframeSize':{'width':'100%', 'height':'580px'} No. This parameter applies to all the card forms rendered.
paymentTarget We submit the form to this target. In case of additional shopper interaction, e.g. 3DSecure, we redirect the shopper within this target.

Important: This only works for card payment brands. The target should not be the same as the page frame name, otherwise the redirect will not work.		 paymentTarget: 'my3dIframe' No. This parameter applies to all the card forms rendered.
shopperResultTarget Works only in combination with "paymentTarget" option.
By default, we redirect the shopper to the given "shopperResultUrl" using a self-submitting form with target="_top". If you use Payment Widget in an iframe and want to redirect the shopper within this iframe, then the "shopperResultTarget" and the "paymentTarget" should be the name of this iframe.

Important: This only works for card payment brands. The target should not be the same as the page frame name, otherwise the redirect will not work. 		paymentTarget: 'myCustomIframe',
shopperResultTarget: 'myCustomIframe'		 No. This parameter applies to all the card forms rendered.
inlineFlow Indicates the alternative payment brand which should get rendered inline. No browser redirect will happen, all information which are required to process the transaction will be collected by an inline integration. The consumer will not leave the context of the merchant checkout page. inlineFlow: ['KLARNA_PAYMENTS_PAYNOW', 'KLARNA_PAYMENTS_PAYLATER', 'KLARNA_PAYMENTS_SLICEIT'] No. This parameter applies to all the card forms rendered.
disableSubmitOnEnter Disables the submit of payment form when Enter key is pressed. By default it is false disableSubmitOnEnter: true No. This parameter applies to all the card forms rendered.
showTaxNumberField If set to true the CPF field on the Payment Widget form will be displayed. The CPF field is needed for payments processed in Brazil. showTaxNumberField: true No. This parameter applies to all the card forms rendered.
showCVVHint If set to true then the credit card form will display a hint on where the CVV is located when the mouse is hovering over the CVV field. showCVVHint: true No. This parameter applies to all the card forms rendered.
brandDetection If the Payment Widget form contains more than one credit card brand (e.g. MASTER VISA AMEX) and this option is set to true(default is false) then Payment Widget updates the brand field automatically based on the first four digits entered in the credit card number field. brandDetection: true No. This parameter applies to all the card forms rendered.
brandDetectionPriority Must be used together with brandDetection:true. This list changes the default priority of brand detection. It can be useful in case of two brands that share the same BINs. If a brand is omitted in the list, it will take the default priority. brandDetectionPriority: ["ALIA", "IK_PRIVATE_LABEL", "MAESTRO", "VISA"] No. This parameter applies to all the card forms rendered.
brandDetectionType Available options are: "regex" and "binlist". By default, regular expressions ("regex") are used for the brand detection. The option "binlist" instructs Payment Widget to search for brands from its internal BIN database. Usually, "binlist" produces better results than "regex" brandDetectionType: "binlist" No. This parameter applies to all the card forms rendered.
onChangeBrand Triggers if the payment brand is getting changed. onChangeBrand: function(data){console.log(data);} Yes.
displayBic If the Payment Widget form contains DIRECTDEBIT_SEPA brand and this option is set to true(default is false) then Payment Widget will display the BIC field. displayBic: true N/A.
forceCardHolderEqualsBillingName By default the card.holder is displayed as one field in Payment Widget's form. If this option is set to true then the form displays a field for the given name and a separate field for the surname. The values entered here will be submitted both as card.holder and as customer.givenName and customer.surname.
This option has no effect when enableSAQACompliance is enabled.		 forceCardHolderEqualsBillingName: true No. This parameter applies to all the card forms rendered.
billingAddress Option to display the billing address fields. billingAddress: { country: "US", state: "NY", city: "New York", postcode: "12345", street1: "Suite 1234", street2: "Some Road" } No. This parameter applies to all the card forms rendered.
mandatoryBillingFields Describe which billing fields cannot be empty. This option needs to be used with billingAddress option. mandatoryBillingFields:{ country: true, state: true, city: true, postcode: true, street1: true, street2: false } No. This parameter applies to all the card forms rendered.
validation Use validation. If false disables validation and the functions validate* and on*Submit* will not be called. validation: true No. This parameter applies to all the card forms rendered.
validateCard Triggers before onBeforeSubmitCard. Context (this) is the form. Overrides the default validation for cards. validateCard: function(){ /* function here */} No. This parameter applies to all the card forms rendered.
validateDirectDebit Triggers before onBeforeSubmitDirectDebit. Context (this) is the form. Overrides the default validation for direct debit. validateDirectDebit: function(){ /* function here */} N/A
validateOnlineTransfer Triggers before onBeforeSubmitOnlineTransfer. Context (this) is the form. Overrides the default validation for online transfer. validateOnlineTransfer: function(){ /* function here */} N/A
validateVirtualAccount Triggers before onBeforeSubmitVirtualAccount. Context (this) is the form. Overrides the default validation for virtual account. validateVirtualAccount: function(){ /* function here */} N/A
validatePrepayment Triggers before onBeforeSubmitPrepayment. Context (this) is the form. Overrides the default validation for prepayment. validatePrepayment: function(){ /* function here */} N/A
validateInvoice Triggers before onBeforeSubmitInvoice. Context (this) is the form. Overrides the default validation for invoice. validateInvoice: function(){ /* function here */} N/A
validateOnDelivery Triggers before onBeforeSubmitOnDelivery. Context (this) is the form. Overrides the default validation for on delivery. validateOnDelivery: function(){ /* function here */} N/A
onDetectBrand Triggered every time a brand is detected and provides a list of possible brands and the current active brand selected in the payment brand drop down. When the shopper enters a card number that is not a brand from the payment brand drop down, then undefined is returned as the value of activeBrand. onReady: function(array) {
$.each(array, function(key, value) {
console.log('containerKey ' + value.containerKey + ' ccMethods ' + value.ccMethods.toString());
});
},
onDetectBrand: function(brands, activeBrand, cardClassParameter) {
for (var index = 0; index < brands.length; index++) {
console.log(brands[index]);
}
console.log('activeBrand ' + activeBrand);
console.log('cardClassParameter ' + cardClassParameter);
}
 Yes. This function works in combination with onReady. The onReady informs the merchant on all class of the card containers rendered. The onDetectBrand passes a third parameter which indicates the card form that triggered the onDetectBrand callback. The sample value of cardClassParameter looks like wpwl-container-card-289266444291
onBlurSecurityCode Triggers on leaving the card security code field. Context (this) is the iframe communication object. onBlurSecurityCode: function(isValid){ /* function here */} No. This parameter applies to all the card forms rendered.
onBlurCardNumber Triggers on leaving the card number field. Context (this) is the iframe communication object. onBlurCardNumber: function(isValid){ /* function here */} No. This parameter applies to all the card forms rendered.
onBlurCardHolder Triggers on leaving the card holderfield. Context (this) is the iframe communication object.
Only available when enableSAQACompliance is true.		 onBlurCardHolder: function(isValid){ /* function here */} No. This parameter applies to all the card forms rendered.
onBlurExpiryDate Triggers on leaving the expiry date field. Context (this) is the iframe communication object.
Only available when enableSAQACompliance is true.		 onBlurExpiryDate: function(isValid){ /* function here */} No. This parameter applies to all the card forms rendered.
onLightboxCancel Callback when the shopper cancels the transaction in the lightbox. onLightboxCancel: function(){ /* function here */} No. This parameter applies to all the card forms rendered.
executePayment Calling executePayment(/*class name of the form container*/) triggers the payment form submission for a defined payment container. wpwl.executePayment("wpwl-container-card-289266444291") Yes. This function works in combination with onReady. The onReady informs the merchant on all the class of the card containers rendered. Merchants can programmatically submit the concerned card form by passing its container class name('wpwl-container-card-289266444291') to the executePayment.
onStorePaymentDetails Triggers before onBeforeSubmitCard if checkbox[name="createRegistration"] is checked. Context (this) is the form. Do event.preventDefault() to cancel the payment submit action. onStorePaymentDetails: function(event){ /* function here */}, onReady: function() { var createRegistrationHtml = '<div class="customLabel">Store payment details?</div><div class="customInput"><input type="checkbox" name="createRegistration" value="true" /></div>'; $('form.wpwl-form-card').find('.wpwl-button').before(createRegistrationHtml); } No. This parameter applies to all the card forms rendered.
onBeforeSubmitCard Triggers before card payment submission. Context (this) is the form. Overrides the internal submit function. Do event.preventDefault() or return false to cancel the payment submit action. onBeforeSubmitCard: function(event){ /* function here */} No. This parameter applies to all the card forms rendered.
onBeforeSubmitOneClickCard Triggers before card payment submission. Context (this) is the form. Overrides the internal submit function. Do event.preventDefault() or return false to cancel the payment submit action. onBeforeSubmitOneClickCard : function(event){ /* function here */} No. This parameter applies to all the card forms rendered.
onBeforeSubmitDirectDebit Triggers before direct debit payment submission. Context (this) is the form. Overrides the internal submit function. Do event.preventDefault() or return false to cancel the payment submit action. onBeforeSubmitDirectDebit: function(event){ /* function here */} N/A
onBeforeSubmitOnlineTransfer Triggers before online transfer payment submission. Context (this) is the form. Overrides the internal submit function. Do event.preventDefault() or return false to cancel the payment submit action. onBeforeSubmitOnlineTransfer: function(event){ /* function here */} N/A
onBeforeSubmitVirtualAccount Triggers before virtual account payment submission. Context (this) is the form. Overrides the internal submit function. Do event.preventDefault() or return false to cancel the payment submit action. onBeforeSubmitVirtualAccount: function(event){ /* function here */} N/A
onBeforeSubmitInlineVirtualAccount Triggers before the Klarna Payments inline virtual account payment submission. Context (this) is the form. Overrides the internal submit function. Do event.preventDefault() or return false to cancel the payment submit action. onBeforeSubmitInlineVirtualAccount: function(event){ /* function here */} N/A
onBeforeSubmitPrepayment Triggers before prepayment submission. Context (this) is the form. Overrides the internal submit function. Do event.preventDefault() or return false to cancel the payment submit action. onBeforeSubmitPrepayment: function(event){ /* function here */} N/A
onBeforeSubmitInvoice Triggers before invoice payment submission. Context (this) is the form. Overrides the internal submit function. Do event.preventDefault() or return false to cancel the payment submit action. onBeforeSubmitInvoice: function(event){ /* function here */} N/A
onBeforeSubmitOnDelivery Triggers before on delivery payment submission. Context (this) is the form. Overrides the internal submit function. Do event.preventDefault() or return false to cancel the payment submit action. onBeforeSubmitOnDelivery: function(event){ /* function here */} N/A
onBeforeSubmitCardPromise A function that gets called before the card form is submitted. It should return a Promise object that resolves or rejects based on the asynchronous operation. If the Promise resolves, the form submission will continue. If it rejects, the form submission will be cancelled. If this function is not provided, the card form will be submitted without any asynchronous operations. onBeforeSubmitCardPromise = function() {
  if (operationSucceeded) {
    return Promise.resolve();
  } else {
    return Promise.reject(new Error("Operation failed"));
  }
};
 N/A
onBeforeSubmitInvoicePromise A function that gets called before an Invoice payment is submitted. It should return a Promise object that resolves or rejects based on the asynchronous operation. If the Promise resolves, the Invoice payment submission will continue. If it rejects, the Invoice payment submission will be cancelled. If this function is not provided, the Invoice payment will be submitted without any asynchronous operations. onBeforeSubmitInvoicePromise = function() {
  if (operationSucceeded) {
    return Promise.resolve();
  } else {
    return Promise.reject(new Error("Operation failed"));
  }
};
 N/A
onBeforeSubmitPrepaymentPromise A function that gets called before a Pre payment is submitted. It should return a Promise object that resolves or rejects based on the asynchronous operation. If the Promise resolves, the Pre payment submission will continue. If it rejects, the Pre payment submission will be cancelled. If this function is not provided, the Pre payment will be submitted without any asynchronous operations. onBeforeSubmitPrepaymentPromise = function() {
  if (operationSucceeded) {
    return Promise.resolve();
  } else {
    return Promise.reject(new Error("Operation failed"));
  }
};
 N/A
onBeforeSubmitVirtualAccountPromise A function that gets called before a Virtual account payment is submitted. It should return a Promise object that resolves or rejects based on the asynchronous operation. If the Promise resolves, the Virtual account payment submission will continue. If it rejects, the Virtual account payment submission will be cancelled. If this function is not provided, the Virtual acount payment will be submitted without any asynchronous operations. onBeforeSubmitVirtualAccountPromise = function() {
  if (operationSucceeded) {
    return Promise.resolve();
  } else {
    return Promise.reject(new Error("Operation failed"));
  }
};
 N/A
onBeforeSubmitInlineVirtualAccountPromise A function that gets called before the Klarna Payments inline Virtual account payment is submitted. It should return a Promise object that resolves or rejects based on the asynchronous operation. If the Promise resolves, the Klarna Payments inline Virtual account payment submission will continue. If it rejects, the Klarna Payments inline Virtual account payment submission will be cancelled. If this function is not provided, the Klarna Payments inline Virtual account payment will be submitted without any asynchronous operations. onBeforeSubmitInlineVirtualAccountPromise = function() {
  if (operationSucceeded) {
    return Promise.resolve();
  } else {
    return Promise.reject(new Error("Operation failed"));
  }
};
 N/A
onBeforeSubmitOnlineTransferPromise A function that gets called before an online transfer payment is submitted. It should return a Promise object that resolves or rejects based on the asynchronous operation. If the Promise resolves, the online transfer payment submission will continue. If it rejects, the online transfer payment submission will be cancelled. If this function is not provided, the online transfer payment will be submitted without any asynchronous operations. onBeforeSubmitOnlineTransferPromise = function() {
  if (operationSucceeded) {
    return Promise.resolve();
  } else {
    return Promise.reject(new Error("Operation failed"));
  }
};
 N/A
onBeforeSubmitDirectDebitPromise A function that gets called before an direct debit payment is submitted. It should return a Promise object that resolves or rejects based on the asynchronous operation. If the Promise resolves, the direct debit payment submission will continue. If it rejects, the direct debit payment submission will be cancelled. If this function is not provided, the direct debit payment will be submitted without any asynchronous operations. onBeforeSubmitDirectDebitPromise = function() {
  if (operationSucceeded) {
    return Promise.resolve();
  } else {
    return Promise.reject(new Error("Operation failed"));
  }
};
 N/A
onBeforeSubmitOnDeliveryPromise A function that gets called before an delivery payment is submitted. It should return a Promise object that resolves or rejects based on the asynchronous operation. If the Promise resolves, the delivery payment submission will continue. If it rejects, the delivery payment submission will be cancelled. If this function is not provided, the delivery payment will be submitted without any asynchronous operations. onBeforeSubmitOnDeliveryPromise = function() {
  if (operationSucceeded) {
    return Promise.resolve();
  } else {
    return Promise.reject(new Error("Operation failed"));
  }
};
 N/A
onBeforeSubmitPromiseRejectCallback A call back function that will be invoked when the result of any of onBeforeSubmit*Promise results in a rejection. If this function is not provided, no call will be made. function onBeforeSubmitPromiseRejectCallback() {
  /* function here */
};
 N/A
onBeforeSubmitOneClickCardPromise A function that gets called before the OneClick card form is submitted. It should return a Promise object that resolves or rejects based on the asynchronous operation. If the Promise resolves, the form submission will continue. If it rejects, the form submission will be cancelled. If this function is not provided, the card form will be submitted without any asynchronous operations. onBeforeSubmitOneClickCardPromise= function() {
  if (operationSucceeded) {
    return Promise.resolve();
  } else {
    return Promise.reject(new Error("Operation failed"));
  }
};
 N/A
onAfterSubmit Triggers after the payment submission. Context (this) is the form. onAfterSubmit: function(){ /* function here */} No. This parameter applies to all the card forms rendered.
onLoadThreeDIframe Triggers when the 3D secure targetIframe has loaded, Context (this) is the iframe. onLoadThreeDIframe: function(){ /* function here */} No. This parameter applies to all the card forms rendered.
spinner Sets the style of the loading spinner. We use the spin.js library to display the spinner. The full list of settings can be found on internet if you search for spin.js. spinner: {
color: "red"
}		 No. This parameter applies to all the card forms rendered.
sofortCountries Sets available countries for SOFORT Uberweisung. sofortCountries: {
  DE: "Deutschland",
  NL: "Nederland",
  AT: "Osterreich",
  BE: "Belgique",
  CH: "Schweiz",
  GB: "United Kingdom"
}		 N/A
onReadyIframeCommunication Triggers when the communication between the PCI iframe and the payment form is established. Context (this) is the iframe communication object. onReadyIframeCommunication: function(){ this.$iframe.height(200) } No. This parameter applies to all the card forms rendered.
onFocusIframeCommunication Triggers when the shopper focuses the input element in the PCI iframe. Context (this) is the iframe communication object. onFocusIframeCommunication: function(){ this.$iframe.height(200) } No. This parameter applies to all the card forms rendered.
onBlurIframeCommunication Triggers when the shopper leaves the input element in the PCI iframe. Context (this) is the iframe communication object. onBlurIframeCommunication: function(){ this.$iframe.height(200) } No. This parameter applies to all the card forms rendered.
showLabels Shows or hides input labels. Default is true showLabels: false No. This parameter applies to all the card forms rendered.
showPlaceholders Shows or hides input showPlaceholders. Default is true showPlaceholders: false No. This parameter applies to all the card forms rendered.
labels Overrides labels from the list of available labels. labels: {cardHolder: "Name on card", cvv: "Security code"} No. This parameter applies to all the card forms rendered.
errorMessages Overrides error messages from the list of available error messages. errorMessages: {cardHolderError: "Invalid name on card", cvvError: "Invalid security code"} No. This parameter applies to all the card forms rendered.
onError Callback that triggers if an error occurs during checkout. The error.name should be read for details.
Possible errors:
  • InvalidCheckoutIdError: Shopper waits for 30 minutes and pays then. The checkoutId is already expired. See error.message for details
  • PciIframeSubmitError: Error submitting card number or/and card cvv, e.g. the request run into a timeout. See error.message for details
  • PciIframeCommunicationError: Merchant page is not able to communicate with PCI iframes. See error.message for details
  • WidgetError: When shopper did not completed the payment in an external integration for any reason. See error.brand to determine from which widget comes the error. The error.event value is "closed" which indicates that shopper closed the widget before completing the payment
Note: This callback is also called on conditions as listed below -
  • Paypal Continue (inlineFlow) : When the shopper closes the Paypal pop window during a Paypal Continue inline flow, onError is triggered.
    Example : {"brand":"PAYPAL_CONTINUE","event":"closed","message":{"orderID":"5ML88112J1669413J"}}
  • Paypal Continue (inlineFlow) : When Paypal invokes its callback function onError to report any errors, onError is triggered.
    Example : {"brand":"PAYPAL_CONTINUE","event":"PAYPAL_CONTINUE:onError","message":{.....}}
  • GooglePay : When the shopper closes the GooglePay pop window during a GooglePay transaction and the merchangt has not implemented wpwlOptions.googlePay.onCancel, onError is triggered.
    Example : {"brand":"GOOGLEPAY","event":"closed","message":"User closed GooglePay Widget! {\"statusCode\":\"CANCELED\"}"}
  • GooglePay : When GooglePay payment request is not correctly configured, onError is triggered.
    Example : {"brand":"GOOGLEPAY","event":"developer_error","message":"The passed PaymentDataRequest object was improperly formatted..."}"}
  • ApplePay : When ApplePay payment sheet is presented, ApplePay invokes its callback onValidateMerchant, onError is triggered when there is any failure in onValidateMerchant().
    Example : {"brand":"APPLEPAY","event":"onValidateMerchant-fail","message":"Failure reason - .... Aborting Session."}"}
 wpwlOptions.onError = function(error) {
    // check if shopper payed after 30 minutes aka checkoutid is invalid
    if (error.name === "InvalidCheckoutIdError") {
        //doSomething();
    } else if (error.name === "WidgetError") {
        console.log("here we have extra properties: ");
        console.log(error.brand + " and " + error.event);
    }
    // read the error message
    console.log(error.message);
} 		No. This parameter applies to all the card forms rendered.
forter This parameter is used when Forter as a Risk check is enabled on the channel. When fast checkout payment brands are used for Forter configured channels, the siteId configuration will need to be passed as below. { forter : { siteId: 'ForterSiteId' } } No. This parameter applies to all the card forms rendered.
showOneClickWidget This parameter is used when we need to show/hide OneClick widget. OneClick checkout widget will be hidden if the value of the parameter will be false. By default it is true. showOneClickWidget: true No. This parameter applies to all the card forms rendered.
hideOtherPaymentButton This parameter is used when we need to hide "show other payment methods" button on OneClick checkout widget. This button on OneClick checkout widget will be hidden if the value of the parameter will be true. By default it is false. hideOtherPaymentButton: true No. This parameter applies to all the card forms rendered.

Brand-Specific Parameters

Some brands also use very specific parameters in order to provide an appropriate user experience during checkout. The Payment Widget API also allows you to customize these brand-specific parameters.  Here you can find the reference on brand-specific parameters for wpwlOptions.

Parameter Description Example
KLARNA_INVOICE.fee Sets the fee to be used for the "Billing agreement" link during a Klarna Invoice checkout. Default is 0. KLARNA_INVOICE = {fee: 3.8}
KLARNA_INSTALLMENTS.fee Sets the fee to be used for the "Read more" link during a Klarna Installments checkout. Default is 0. KLARNA_INSTALLMENTS = {fee: 3.8}
styling.layout

Sets a layout of Paypal Smart Payment Buttons during a Paypal checkout when multiple buttons are available. Default is "vertical".

Supported options are: "vertical", "horizontal".

 styling: {layout: "vertical"}
styling.color

Sets a color of Paypal Smart Payment Buttons during a Paypal checkout. Default is "gold".

Supported options are: "gold", "blue", "silver", "white", "black".

 styling: {color: "gold"}
styling.shape

Sets a shape of Paypal Smart Payment Buttons during a Paypal checkout. Default is "rect".

Supported options are: "rect", "pill".

 styling: {shape: "rect"}
styling.height

Sets a height of Paypal Smart Payment Buttons during a Paypal checkout. To customize button width alter width of the container element.

Supported values are from 25 to 55.

 styling: {height: 25}
styling.label

Sets a label of Paypal Smart Payment Buttons during a Paypal checkout. Default is "paypal".

Supported options are: "paypal", "checkout", "buynow", "pay".

 styling: {label: "paypal"}
styling.tagline

Displays a tagline of Paypal Smart Payment Buttons during a Paypal checkout. Default is true.

Supported options are: true, false

 styling: {tagline: true}
fundingSources

Based on merchant needs, renders a set of Paypal Smart Payment Buttons during a Paypal checkout. This should be an array.

Supported options are: PAYPAL, CARD, PAYLATER, CREDIT and VENMO

 fundingSources: ["PAYPAL", "CARD", "PAYLATER", "CREDIT", "VENMO"]

Labels

Key Value
accountBank Bank code
accountBankBic BIC or bank code
accountBic BIC
accountHolder Account holder
accountId Id
accountNumber Account number
accountNumberIban IBAN or account number
accountIban IBAN
bankName Name of bank
brand Brand
cancel Back
cardHolder Card holder
cardNumber Card Number
cvv CVV
cvvHint The 3 digits on the back of your card
cvvHintAmex The 4 digits on the front of your card
cvvHintMaestro The 3 digits on the back of your card if specified
country Country
expiryDate Expiry Date
taxNumber Tax Identification Number
submit Pay now
nextStep Continue
billingAgreement Invoice terms and conditions
emailOrAccountId Email or Account Id
secureId Secure Id
learnMore Learn more
mmyy MM / YY
customerMobile Mobile phone number (+78000001774)
register Register now
showOtherPaymentMethods Show other payment methods
olpId OLP ID
birthDate Date of birth

Error Messages

Key Value
accountBankError Invalid bank code
accountBankBicError Invalid BIC or bank code
accountBicError Invalid BIC
accountHolderError Invalid account holder
accountNumberError Invalid account number
accountNumberIbanError Invalid IBAN or account number
accountIbanError Invalid IBAN
cardHolderError Invalid card holder
surNameError Invalid surname
givenNameError Invalid given name
cardNumberError Invalid card number or brand
cvvError Invalid CVV
expiryMonthError Invalid expiry date
expiryYearError Invalid expiry date
taxNumberError Invalid Tax Identification Number
generalTermsAndConditionsError Please accept the consent for data transmission
billingCountryError Invalid country
billingStateError Invalid state
billingCityError Invalid city
billingStreetError Invalid street
billingPostCodeError Invalid postcode

Payment containers

Key Description Example
wpwl-container-card All card payment options are provided within that container. -
wpwl-container-card-{unique id} All card payment options are provided within that container. wpwl-container-card-289266444291
wpwl-container-directDebit All direct debit options are provided within that container. -
wpwl-container-prepayment-{brand_name} The specific prepayment option is provided within that container. wpwl-container-prepayment-BITCOIN
wpwl-container-onlineTransfer-{brand_name} The specific online transfer option is provided within that container. wpwl-container-prepayment-GIROPAY
wpwl-container-virtualAccount{brand_name} The specific virtual account payment option is provided within that container. wpwl-container-virtualAccount-PAYPAL