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

Checkout Activation

  1. Once you are signed in to your BridgerPay dashboard account, Navigate to Checkouts and copy the Activation Key.

  2. Use an API platform, for example Postman or Insomnia and send a POST request to the URL : https://signup.bridgerpay.com/api/v2/license/activate/{{ACTIVATION KEY}}

    The body of the request is:


    {

    "webhook_url": "{{URL WHERE TRANSACTION NOTIFICATIONS WILL BE SENT TO}}",
    "success_redirect_url": "{{REDIRECT URL FOR SUCCESSFUL TRANSACTIONS}}",
    "cancel_redirect_url": "{{REDIRECT URL FOR CANCELED TRANSACTIONS}}",
    "failure": "{{REDIRECT URL FOR FAILED TRANSACTIONS}}",
    "domain": "{{WEBSITE URL}}",
    "plugin_type": "websdk-embed"
    }

NOTE: Make sure you set all your URLs that you are going to use in the body before activating. You cannot change this once it's activated. Body provided is an example, you can leave URLs as empty strings if not going to be used.
Webhook, Success, Cancel, Failure URLs are not mandatory but if you will use them you must set them now.

Please note that only the webhook_url and domain parameters are mandatory. In case you do not use redirects, they can be left blank.

3. Use the Generated API credentials to create and load the checkout form.

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.

URL : POST https://api.bridgerpay.com/v2/auth/login

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.

URL : POST https://api.bridgerpay.com/v2/cashier/session/create/{{API_KEY}}

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?