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 , 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.
You can also use paymentMethod to:
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.
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)
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.
onInitonReadyonAddressCompleteIf 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 .
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 .
The values you pass must be formatted as two-letter as described in the international standard.
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 , you can use paymentMethod to control the appearance and behavior of the . Specifically, paymentMethod allows you to style:
also use the paymentMethod object; the only difference is that it's named .
To capture secure payment details, wraps with a predetermined style. But you can customize their look and feel by defining style.
For details, refer to .
style: For details, refer to .
For details on googlePay.style, refer to .
For details on applePay.style, refer to .
All the properties of payPay.style, which styles the button, are optional.
To configure the appearance of the payment method, define one or more of the nested objects in onlineBanking.
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 , you can define methods and assign them to its , , , , , , and properties.
The onInit method, which accepts checkoutSession and , executes when Prebuilt Checkout initializes.
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 , 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 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.
