🔏
🔏
🔏
🔏
Payment API
Search…
Get started
Plugins
Authorization
Cashier Initialization
Payments
Server to Server
Payouts
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
1
<!DOCTYPE html>
2
<html>
3
<body>
4
<script src="https://cashier-sandbox.bridgerpay.dev/loader"
5
6
//session parameters (mandatory)
7
8
data-cashier-key="{{CASHIER_KEY}}"
9
data-order-id="i173aa01"
10
data-currency="EUR"
11
data-country="BE"
12
13
//shopper's personal and contact information
14
15
data-first-name="John"
16
data-last-name="Smith"
17
data-phone="+3271440600"
18
data-email="[email protected]"
19
data-address="Rue du Pont Simon 115"
20
data-state=""
21
data-city="Appelterre"
22
data-zip-code="9900"
23
24
//business information
25
26
data-amount="15.00"
27
data-affiliate-id=""
28
data-tracking-id=""
29
data-platform-id="CU1234"
30
31
//business restrictions
32
33
data-single-payment-method=""
34
data-payment-provider=""
35
data-single-payment-provider=""
36
data-dont-skip-single-payment-box=""
37
data-currency-lock="true"
38
data-amount-lock="true"
39
40
//UI configuration
41
42
data-direct-payment-method=""
43
data-language="en"
44
data-hide-languages-dropdown="false"
45
data-hide-header="true"
46
data-theme="dark"
47
data-deposit-button-text="Buy now"
48
data-button-mode="modal"
49
data-button-text="Buy now"
50
data-splash-screen-image-url=""
51
data-validate-inputs-on-focus-out="true"
52
data-save-credit-card-flag-checked-by-default="true"
53
data-always-visible-inputs-for-providers="{ "phone": ["safaricom", "skrill"] }"
54
>
55
</script>
56
</body>
57
</html>
Copied!
1
<!DOCTYPE html>
2
<html>
3
<body>
4
<iframe width=700px height=1000px src="https://cashier-sandbox.bridgerpay.dev/?
5
6
cashierKey={{CASHIER_KEY}}&
7
orderId=i173aa01&
8
currency=EUR&
9
country=BE&
10
11
firstName=John&
12
lastName=Smith&
13
phone=+3271440600&
14
email=[email protected].com&
15
address=Rue du Pont Simon 115&
16
state=&
17
city=Appelterre&
18
zipCode=9900&
19
20
amount=15.00&
21
affiliateId=&
22
trackingId=&
23
platformId=&
24
25
singlePaymentMethod=&
26
singlePaymentProvider=&
27
dontSkipSinglePaymentBox=&
28
currencyLock=true&
29
amountLock=true&
30
directPaymentMethod=&
31
alwaysVisibleInputsForProviders=%7B%20%22phone%22%3A%20%5B%22credit_card%22%2C%20%22skrill%22%5D%20%7D&
32
language=en&
33
hideLanguagesDropdown=false&
34
depositButtonText=Buy now&
35
theme=light"
36
37
/>
38
</body>
39
</html>
Copied!
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 behavior or UI of a Cashier widget.
Session parameters
Parameters
How they affect Cashier widget
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")
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
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 international phone number i.,e. +3271440600
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. The format must be in ISO format
data-city — Shopper's city
data-zip-code — Shopper's ZIP code
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
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
Specified data-amount is shown on the UI
Specified amount
Business restrictions
Parameters
How they affect Cashier widget
data-single-payment-method — Parameter making the shopper pay using a particular method (possible values: "credit_card" , "apm" , "wire_transfer" , "crypto" , "voucher" , "e_wallet" , "crypto_wallet" , "external_link" , "credit_card_installment"). If specified, the step which the shopper could choose a payment method is skipped, and the form of the "imposed" payment method is shown right away. Unlike the data-direct-payment-method parameter, this one does not allow the shopper to return back to available payment methods.
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 when used for a credit card PSP; you need to make sure that data-single-payment-method is also present and set to credit_card. More importantly cascading will not be in effect and only the specified credit card PSP will be used.
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)
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
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. Unlike the data-single-payment-method parameter, this one allows the shopper to return back to payment methods available and choose a different payment method.
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-hide-languages-dropdown — Hides the option of language selection
data-hide-header — Hides the welcome back message
data-theme — Theme of the Cashier interface. The possible options are "dark" (used by default), "light", and "transparent"
data-deposit-button-text - This parameter allows you to overwrite the default "Deposit" button text on the cashier screen
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.
data-always-visible-inputs-for-providers - This parameter allows you to specify which fields you want to be visible on the cashier, even if they are being passed during the session creation.
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. This option can be hide by setting data-hide-languages-dropdown="false"
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
Last modified 2mo ago