Regular Cashier

This page provides the descriptions of how to form a Cashier widget based on a cashier key.
The regular Cashier scheme can be integrated as a script embedded in your website or as an iframe placed in an arbitrary web resource. Depending on this choice, see the respective code example. The explanation of each parameter used and the way these parameters affect a Cashier widget are given later on this page. (Also mind the case style: it as well as the syntax varies.)
Code example
script
iframe
link
script
<!DOCTYPE html>
<html>
<body>
<script     src="https://embed-sandbox.bridgerpay.com/cashier"
​
//session parameters (required)
​
            data-cashier-key="{{CASHIER_KEY}}"
            data-order-id="i173aa01"
            data-currency="EUR"
            data-country="BE"
​
//shopper's personal and contact information
            
            data-first-name="John"
            data-last-name="Smith"        
            data-phone="8141112233"
            data-email="[email protected]"    
            data-address="Rue du Pont Simon 115"                          
            data-state=""
 			      data-city="Appelterre"
            data-zip-code="9900"
​
//business information
​
            data-amount="15.00"
            data-affiliate-id=""
            data-tracking-id=""        
            data-platform-id="CU1234"
                        
//business restrictions
​
            data-single-payment-method=""
            data-payment-provider=""
            data-single-payment-provider=""
            data-dont-skip-single-payment-box=""
		        data-currency-lock="true"
            data-amount-lock="true"
​
//UI configuration
​
            data-direct-payment-method=""
            data-language="en"
            data-theme="dark"       
						data-button-mode="modal"
            data-button-text="Buy now"
            data-splash-screen-image-url=""
            data-validate-inputs-on-focus-out="true"
            data-save-credit-card-flag-checked-by-default="true"
            > 
</script>
</body>
</html>
iframe
<DOCTYPE html>
<html>
<body>
<iframe width=700px height=1000px src="https://cashier-sandbox.bridgerpay.com/?
            
            cashierKey={{CASHIER_KEY}}&
            orderId=i173aa01&
            currency=EUR&
            country=BE&
​
            firstName=John&
            lastName=Smith&
            phone=8142223344&
            email=[email protected].com&
            address=Rue du Pont Simon 115&
            state&
            city=Appelterre&
            zipCode=9900&
​
            amount=15.00&
            affiliateId&
            trackingId&
            platformId&
            
            singlePaymentMethod&
            singlePaymentProvider&
            dontSkipSinglePaymentBox&
            currencyLock=true&
            amountLock=true&
​
            directPaymentMethod&
            language=en&
            theme=light"
            
            >
</body>
</html>
link
https://cashier-sandbox.bridgerpay.com/?cashierKey={{CASHIER_KEY}}&orderId=i173aa01&currency=EUR&country=BE
Input parameters
You'll find here the description of each parameter listed in the examples: its purpose, values that can be assigned if applicable, whether this parameter is required, etc. The parameters are logically grouped for your convenience, but in fact their order doesn't matter. Additionally, the description of each group is divided into two tabs: one is about the parameters, the other, how these parameters may affect the behaviour or UI of a Cashier widget.
Session parameters
Parameters
How they affect Cashier widget
Parameters
data-cashier-key (required) — Software-level credentials that identify a merchant when creating a Cashier session; provided by BridgerPay
data-order-id (required) — Transaction ID within the merchant's system
data-currency (required) — Currency which a shopper's following payment transaction (deposit) will be originated in; designated according to ISO 4217 — Currency Codes (e.g. "USD", "CNY", or "EUR")
data-country (required) — Country where the payment transaction will be made; designated according to ISO 3166-1 — Country Codes (e.g. "US", "CN", or "BE")
How they affect Cashier widget
Specified data-currency and data-country are shown on the UI
Specified currency and country (visible in the "Phone" field)
"400: Bad Request" error occurs if one or more parameters are missing
"403: Access Forbidden" error occurs if an invalid cashier key has been specified
400, 403 errors
Shopper's personal and contact information
Parameters
How they affect Cashier widget
Parameters
data-first-name, data-last-name — Shopper's first and last names. These values are concatenated to fill the read-only "Card Holder Name" field on the UI in case the shopper plans to pay with a debit or credit card
data-phone — Shopper's phone number
data-email — Shopper's email address
data-address — Shopper's address
data-state — Shopper's state, i.e. the state where the payment transaction will be made; applicable to the USA, Canada, and Australia
data-city — Shopper's city
data-zip-code — Shopper's ZIP code
How they affect Cashier widget
The more known pieces of information you specify, the less the shopper will need to enter manually on the UI. But if a specified parameter has incorrect format, the value will be ignored and the shopper will have to reenter it too. Compare the two forms
Debit or credit card form if a shopper's info has and hasn't been specified
Business information
Parameters
How they affect Cashier widget
Parameters
data-amount — Transaction amount. If not specified, a default varying value is assigned and shown on the UI. For example, it might be 100 USD or its equivalent in another currency for a credit-card PSP
data-affiliate-id — Affiliate or intermediary ID
data-tracking-id — Tracking ID associated with the affiliate or intermediary 
data-platform-id — Merchant's platform ID
How they affect Cashier widget
Specified data-amount is shown on the UI
Specified amount
Business restrictions
Parameters
How they affect Cashier widget
Parameters
data-single-payment-method — Parameter making the shopper pay using a particular method (e.g. "credit_card" or "apm"). If specified, the step which the shopper could choose a method at is skipped, and the form of the "imposed" payment method is shown right away
data-single-payment-provider — Parameter making the shopper pay through a particular PSP (e.g. "zota_pay"). If specified, the step which the shopper could choose a method at is skipped, and the form of the "imposed" PSP is shown. Only this PSP will be requested to execute the payment transaction. Additionally, note that this parameter is not applicable to credit-card PSPs
data-dont-skip-single-payment-box — If a shopper is allowed to pay by using only one method, the step which this method can be chosen at is skipped. This parameter forces this step to appear ('true') so that the shopper will see the method and "choose" it. If not specified, 'false' is used by default
data-currency-lock — Parameter forbidding the shopper to change the currency value predefined by the "data-currency" parameter on the UI. We recommend that you disable this action (i.e. use 'true') because some PSPs, once they open a session, do not recheck the currency and transfer the specified amount in a wrong currency. If not specified, 'false' is used by default
data-amount-lock — Parameter forbidding the shopper to change the amount value predefined by the "data-amount" parameter on the UI. The possible options are 'true' for disabling and 'false' for enabling (used by default)
How they affect Cashier widget
If the data-single-payment-method or data-single-payment-provider parameter is specified, the step which the shopper could choose a payment method at is skipped, ...
Choosing a payment method is skipped
... and the form of the "imposed" method or PSP is shown. The shopper cannot "return" to re-choose a payment method. Additionally, mind the combination of these two parameters. You cannot, for example, specify "credit_card" as the single payment method and an APM PSP as the single payment provider
Inappropriate combination of parameters
If data-dont-skip-single-payment-box is 'true', the shopper who is allowed to pay by using only one method, will see this method and be able to "choose" it
Only one payment method to choose
The data-currency-lock and data-amount-lock parameters controls the shopper's ability to change the predefined currency and amount on the UI, respectively. Compare the two forms
Currency and amount are locked ('true', on the left) and enabled ('false')
UI configuration
Parameters
How they affect Cashier widget
Parameters
data-direct-payment-method — Parameter defining which payment method will be suggested to the shopper by default (e.g. "credit_card" or "apm"). If specified, the step which the shopper could choose a method at is skipped, and the form of the "suggested" payment method is shown
data-language — Language of the Cashier interface; designated according to ISO 639-1 — Language Codes. The possible options are "en" (used by default), "fr", "zn", "de", "es", "ar", "ru", and "pt". The shopper is allowed to change a language right on the UI
data-theme — Theme of the Cashier interface. The possible options are "dark" (used by default), "light", and "transparent"
data-button-mode, data-button-text — Cashier widget can be statically embedded in a merchant's website or can be invoked by clicking a relevant button. In the latter case, these parameters define the way this widget will appear and the name of this button, respectively. The possible options for "data-button-mode" are
"modal": the widget opens as a pop-up window
"tab": it opens in the active web page replacing the existing content, or in a new tab if the appropriate attribute of "_blank" has been added
"spot": it opens in the active web page but right below the invoking button as a separate module, without replacing the existing content
data-splash-screen-image-url — Link to a static or animated image that will appear instead of our standard one upon opening a Cashier widget. Note that this parameter is not applied if you use a button to open a Cashier widget (see "data-button-mode") or integrate the widget as an iframe
data-validate-inputs-on-focus-out — Parameter indicating that an input field contains invalid data. If 'true', the field will be highlighted as soon as the shopper removes the cursor from it.
data-save-credit-card-flag-checked-by-default - Parameter indicating that the checkbox for saving the cc card, is ticked by default.
How they affect Cashier widget
If the data-direct-payment-method parameter is specified, the step which the shopper could choose a payment method at is skipped, and the form of the "suggested" method is shown. But, unlike the "data-single-payment-method" parameter, this one allows the shopper to "return" to re-choose a payment method
Specified data-language is shown in the upper-right corner of a Cashier widget. It can be changed
Ability to re-choose a payment method and change a language
data-theme: compare the difference between the "light" (above) and the "dark" (below) themes.
"dark" theme
Embed solution - Previous
Overview
Next - Embed solution
Server-side Cashier
Last updated 4 months ago