Last updated
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.
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.
onInit
onReady
onAddressComplete
If passed, then onAddressComplete
returns address
, which contains the customer’s billing
and shipping
data.
onDeliveryComplete
If passed, then onDeliveryComplete
returns a shippingMethod
that contains the customer’s selection, along with its calculated taxAmount
.
onCheckoutComplete
onClose
The onClose
method, which optionally accepts checkoutCompleted
, executes when customers close Prebuilt Checkout.
onError
The 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.
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)
Gain a better understanding of the functionality that exists within the Prebuilt Checkout modal's configuration object