All Collections
Connect to BridgerPay
Extended Embed WebSDK
Regular-Cashier Integration (Extended version)
Regular-Cashier Integration (Extended version)

This is a guide to connect BridgerPay checkout to your website using Regular Cashier Integration.

Shahaf Hazan avatar
Written by Shahaf Hazan
Updated over a week ago

Note:

In order to proceed with Regular-Cashier integration Checkout needs to be activated.


The Regular Cashier 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.)

The examples of SCRIPT and IFRAME integration are shown below:

SCRIPT:

<!DOCTYPE html> 
<html>
<body>
<script src="https://checkout.bridgerpay.com/v2/loader"

//session parameters (mandatory)

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="+3271440600"
data-email="jsmith@gmail.com"
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-single-payment-provider=""
data-currency-lock="true"
data-amount-lock="true"

//UI configuration

data-direct-payment-method=""
data-language="en"
data-hide-languages-dropdown="false"
data-hide-header="true"
data-theme="dark"
data-deposit-button-text="Buy now"
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"
data-always-visible-inputs-for-providers="{ &quot;phone&quot;: [&quot;safaricom&quot;, &quot;skrill&quot;] }"
>
</script>
</body>
</html>

IFRAME:

<!DOCTYPE html> 
<html>
<body>
<iframe width=700px height=1000px src="https://checkout.bridgerpay.com/v2/?

cashierKey={{CASHIER_KEY}}&
orderId=i173aa01&
currency=EUR&
country=BE&

firstName=John&
lastName=Smith&
phone=+3271440600&
email=jsmith@jmail.com&
address=Rue du Pont Simon 115&
state=&
city=Appelterre&
zipCode=9900&

amount=15.00&
affiliateId=&
trackingId=&
platformId=&

singlePaymentMethod=&
singlePaymentProvider=&
currencyLock=true&
amountLock=true&
directPaymentMethod=&
alwaysVisibleInputsForProviders=%7B%20%22phone%22%3A%20%5B%22credit_card%22%2C%20%22skrill%22%5D%20%7D&
language=en&
hideLanguagesDropdown=false&
depositButtonText=Buy now&
theme=light"

/>
</body>
</html>


Description of the parameters

Session Parameters

Mandatory fields:

  • data-cashier-key — credentials provided by BridgerPay that identify a merchant when creating a Cashier session.

  • data-order-id — Transaction ID within the merchant's system.

  • data-currency — 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 — Country where the payment transaction will be made; designated according to ISO 3166-1 — Country Codes (e.g. "US", "CN", or "BE").

Shoppers personal and contact information

  • 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.

Note:
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 shown below.

On the left side a form with already entered parameters will be shown.
On the right side a form needs to be fully completed by the user when customer parameters left blank.

Business Information

  • 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. In the form below data-amount equal to 15.

  • 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.

Business Restrictions

  • 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.

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. Therefore user will not be able to see the screen shown below.

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.

  • 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).

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 parameters are locked ('true') on the left and enabled ('false') on the right.

  • data-direct-payment-method — Parameter defining which payment method will be suggested to the shopper by default (e.g. "credit_card"). 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.
    Note:

    Only credit_card method works at the moment.

Note:
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.

  • 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.

Note:

Specified data-language is shown in the upper-right corner of a Cashier widget.
This option can be hidden by setting data-hide-languages-dropdown="false".

  • 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".

    Compare the difference between the "light" and the "dark" theme shown above.

  • 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":

    • "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.



Did this answer your question?