All Collections
Connect to BridgerPay
Web SDK
Checkout Activation and Web-SDK Integration
Checkout Activation and Web-SDK Integration

Available for PRO users and above

Maria Garozzo avatar
Written by Maria Garozzo
Updated over a week ago

This is a guide to connecting BridgerPay to your website using Embed WEB-SDK integration (Not Plugin).

Checkout Activation via Admin Panel

  1. Once you are signed in to your BridgerPay dashboard account, Navigate to Checkouts.

  2. If you do not have any checkout yet, click on the Checkout + button and fill in your checkout name and type. If you already have a checkout that has not been activated yet, navigate to the desired checkout and click on Activate.

  3. Enter the domain of the website where you intend to deploy the checkout and relevant URLs. Please note that only your domain parameter is mandatory. In case you do not use redirects, the URLs can be left blank. Click the Activate button to proceed.


  4. Your activation data will be provided on the next screen. Kindly keep a private record of the information shown, as this will only be revealed once.

  5. Once saved, click on the X button, and confirm close on the pop-up.

Congratulations you have now successfully activated your checkout!


Amending URLs on Activated Checkouts

Follow the guide below if any URL needs to be updated from an active checkout:

  1. From the Checkout page, navigate to the Checkout that needs to be amended.

  2. Click on the three dots and select Edit Limit Settings

  3. Go to the URLs tab and update the field that needs amendment

  4. Hit save to complete.


Server Side Integration

You need to pass three steps to form this widget:

  1. Get authorized as a merchant.

  2. Create a server session to generate a cashier token.

  3. Create a Checkout session to load the Checkout in your website.

1. Authorization

To get authorized as a merchant you need to establish a connection with the BridgerPay system by using the POST request below.

The response will contain "access_token.token" (JWT token); use this value as a Bearer token when calling the following method.

Content-Type: application/json

{
"user_name": "{{user_name}}",
"password": "{{password}}"
}

2. Server Session

Create a server session for BridgerPay's Checkout to generate a unique cashier token by using the POST request below.

You will find session data, business data, personal information and other input parameters.

The more information you specify, the less the customer will need to enter manually in the Checkout form.

The response will contain a "cashier_token" encapsulating all the specified information.

Content-Type: application/json

Authorization: Bearer {{ACCESS_TOKEN}}

Accept-Language: EN

{
"cashier_key": "{{CASHIER_KEY}}",
"order_id": "",
"first_name": "",
"last_name": "",
"email": "",
"language": "en",
"currency": "",
"country": "",
"state": "",
"address": "",
"city": "",
"zip_code": "",
"amount":,
"currency_lock": true,
"amount_lock": true,
"phone": "",
"affiliate_id": null,
"tracking_id": null,
"platform_id": null,
"payload": null,
"hide_header": true
}

3. Checkout Form

Insert the code in the website to show the Checkout. At this step, the server-side checkout can be integrated as an embedded script.

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

//session parameters (required)

data-cashier-key="{{CASHIER_KEY}}"
data-cashier-token="{{CASHIER_TOKEN}}"

//business restriction

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 customer 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)

//UI configuration

data-theme=""

(Theme of the Cashier interface. The possible options are "dark" (used by default), "light", and "transparent")

>
</script>
</body>
</html>

Please note that for an alternative payment method, it is required to send both a single payment method and a single payment provider.

For Credit Card, you can specify only the single payment method which will show only the credit card form. In case you have more than one solution available, cascading will still take effect.

Did this answer your question?