Checkout Widget

The Cashier widget serves as a user interface component seamlessly integrated within your website, either through a script embedded directly or via an iframe within any desired web resource. It facilitates the collection of personal, contact, and business details from your online customers, enabling them to confirm their purchase and conveniently track the status of their payment.

How to embed the checkout widget?

Please follow the requirements below:

Get authorized as a merchant.
Create a server session to generate a cashier token.

POST https://api.bridgerpay.com/v2/cashier/session/create/{api_key}
Content-Type: application/json
Authorization: Bearer {{ACCESS_TOKEN}}
{
  "cashier_key": "{cashier_key}",
  "order_id": "g173aa02",
  "currency": "EUR",
  "country": "NL",
  "first_name": "Juan",
  "last_name": "Lopez",
  "email": "[email protected]",
  "language": "en",
  "state": null,
  "address": "Boenluif 30",
  "city": "Hoogwoud",
  "zip_code": "1718 AZ",
  "theme": "bright",
  "amount": 10,
  "phone": "+328141112233"
}

📘
It's important to note that when sending optional details during the checkout process, the end user will not see those fields on the checkout form. These optional details, although included in the transaction request, will not be displayed to the user during the payment process. Therefore, it's crucial to carefully consider which details are necessary for the user to provide directly and which can be submitted programmatically without requiring user input. This helps to streamline the checkout experience and minimize any potential confusion for the end user.

Embed a Checkout by using cashier_key and the generated cashier_token.

To display the Checkout widget in an HTML-supporting application, such as a web browser, you can integrate the server-side checkout scheme by inserting the following code as a script or embedding it within an iFrame on a desired web resource:

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

data-cashier-key="{cashier_key}" 
data-cashier-token="{cashier_token}" 

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

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

cashierKey={cashier_key}&
cashierToken={cashier_token}"

>
</body>
</html>

How to embed the checkout widget?

Checkout Widget example