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