Configuring Prebuilt Checkout
Gain a better understanding of the functionality that exists within the Prebuilt Checkout modal's configuration object
Last updated
Gain a better understanding of the functionality that exists within the Prebuilt Checkout modal's configuration object
Last updated
The and functions, which are exposed by DigitalRiverCheckout, accept an optional configuration object that allows you to define:
A standard value results in a window whose dimensions are less than those of the browser window while fullPage expands the window to the edges of the browser window.
Custom page: To redirect customers to your fully customized order confirmation page, pass the appropriate web address.
The values you pass must be formatted as two-letter Alpha-2 country codes as described in the ISO 3166 international standard.
You can also use paymentMethod to:
To capture secure payment details, Prebuilt Checkout wraps elements with a predetermined style. But you can customize their look and feel by defining style.
To configure how credit cards are displayed, define one or more of the nested objects in creditCard.
mask: A boolean that determines whether card numbers and security codes get masked after they've been entered by users.
cardNumberPlaceholderText: The placeholder that is shown in the card number field.
cardExpirationPlaceholderText: The placeholder that is shown in the card expiration date field.
cardCvvPlacholderText: The placeholder that is shown in the card security code field.
All the properties of payPay.style, which styles the PayPal button, are optional.
label
Customizes the button's label.
paypal (default), pay, checkout, and buynow
color
Sets the color of the button.
gold (default), silver, black, white and blue
shape
Determines the shape of the button.
pill (default) and rect
fundingicons
A boolean that determines whether icons, which as a visual cue of the stored payment methods, display below the button.
true or false (default)
tagline
A boolean that determines whether a PayPal slogan displays beneath the button.
For this feature to work, fundingicons must be false.
true or false (default)
To configure the appearance of the online banking payment method, define one or more of the nested objects in onlineBanking.
placeholderText: The placeholder that appears in the online banking selector.
To display and hide specific payment methods, provide a list of enabledPaymentMethods and disabledPaymentMethods.
As events occur during the checkout process, these methods are executed.
onInitThe onInit method, which accepts checkoutSession and actions, executes when Prebuilt Checkout initializes.
onReadyonAddressCompleteIf passed, then onAddressComplete returns address, which contains the customer’s billing and shipping data.
onDeliveryCompleteIf passed, then onDeliveryComplete returns a shippingMethod that contains the customer’s selection, along with its calculated taxAmount.
onCheckoutCompleteonCloseThe onClose method, which optionally accepts checkoutCompleted, executes when customers close Prebuilt Checkout.
onErrorThe onError method, which optionally accepts error, executes when a problem occurs during the checkout process.
If passed, then onError returns an error that contains a type and an array of errors[], each element of which provides more details on the triggering event.
If you implement and want Digital River to add the iframe which displays a to a specific HTML element, then assigns that element's identifier to containerElementId.
In options, you can control the appearance and behavior of a . Specifically, you can use options to:
In , the displayMode, whose value can either be standard (default) or fullPage, controls the size of the checkout window.
Set style.experience in to alter the checkout window's logo, theme, borders, text fields, and fonts. For details, refer to Defining experience.
Digital River localizes the by default based on the customer’s browser settings. But if you want to control the language of the experience, set language in .
If you do define options.language, then Digital River assigns the same value to in the .
For a list of accepted values, refer to .
By setting thankYouPage in , you can configure the .
Default window: To display Digital River's default order confirmation, omit thankYouPage. You can customize this default confirmation by calling , which is exposed by .
Close window: If you want the to immediately close after customers place an order, set thankYouPage to none.
By setting shipToCountries and/or billToCountries in , you can restrict the values displayed in the drop-down menus that customers use to select a country in the .
By adding labelText.country.* in , you can modify the text of the country drop-down menu's label in both the .
If a country.* matches , then Digital River updates the label's text.
In Prebuilt Checkout's configuration object, you can use paymentMethod to control the appearance and behavior of the . Specifically, paymentMethod allows you to style:
Drop-in payments also use the paymentMethod object; the only difference is that it's named .
For details, refer to .
style: For details, refer to .
For details on googlePay.style, refer to .
For details on applePay.style, refer to .
style: For details, refer to .
For details on how to format these values, refer to .
If you don't populate either of these arrays, then, by default, displays all transaction-applicable payment methods. If enabledPaymentMethods contains a value that doesn't meet this precondition, then it's not presented as an option to customers.
In the Prebuilt Checkout configuration object, you can define methods and assign them to its , , , , , , and properties.
The onReady method executes when the is created, and the Prebuilt Checkout is loaded and ready for customer interaction.
The onAddressComplete method, which accepts an optional address and actions, executes when customers successfully submit their shipping and/or billing information and the shipTo and/or billTo is updated.
The onDeliveryComplete method, which optionally accepts shippingMethod, executes when , and the shippingChoice is successfully updated.
The onCheckoutComplete method, which optionally accepts order, executes when , and Digital River adds sources[] to the and creates the .
If passed, then onCheckoutComplete returns the .
If passed, checkoutCompleted returns a boolean that indicates whether it closed before the checkout process is completed. If true, customers close the window in the . If false, it was closed in an earlier stage.
