Card Tokenization Widget

The Card Tokenization Widget functions as a user interface component seamlessly integrated into your website, achieved through direct script embedding or through an iframe within any chosen web resource. It facilitates the creation of unique payment card tokens and encrypted CVV values for subsequent use.

How to embed the card tokenization widget?

Please follow the requirements below:

Login into your BridgerPay dashboard, create a "Payment card token" Checkout type in the Checkouts section and activate the checkout to generate the API credentials.
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",
  "email": "[email protected]"
  //"customer_id": "12345",	
 // "hide_save_credit_card_checkbox":"true"
}

Embed a Checkout by using cashier_key and the generated cashier_token.

<!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 capture the token?

There are couple of methods where you can receive the card token:

Listen to the event "paymentCardToken" to fetch the card token and encrypted CVV, as well as redirect the client to a new success/failure page.

{
  "event": "[bp]:paymentCardToken",
  "type": "multiUse",
  "token": "85xxxxxx-xxxx-xxxx-xxxx-xxxxxx181a15",
  "card": {
    "maskedNumber": "545454******5454",
    "bin": "54545454",
    "last4Digits": "5454",
    "expireMonth": 10,
    "expireYear": 2030,
    "holderName": "TEST TEST",
    "brand": "mastercard",
    "type": "credit",
    "issuer": "central trust bank",
    "country": "US"
  },
  "encryptedCvv": "{encrypted_cvv}",
  "maskedEmail": "d****l@s*********d.com",
  "status": "active",
  "created": 1696491641
}

A webhook notification "payment_card_token" will be sent to your desired URL.

{
  "webhook": {
    "type": "payment_card_token"
  },
  "data": {
    "order_id": "xxxxxx",
    "charge": {
      "type": "singleUse",
      "token": "39xxxxxx-xxxx-xxxx-xxxx-xxxxxx211ecb",
      "card": {
        "masked_number": "411111******1111",
        "bin": "41111111",
        "last_4_digits": "1111",
        "expire_month": 12,
        "expire_year": 2023,
        "holder_name": "test bridger",
        "brand": "visa",
        "type": "credit",
        "issuer": "jpmorgan chase bank, n.a.",
        "country": "US"
      },
      "masked_email": "****@b********y.com",
      "status": "active",
      "created": 1697005040,
      "encrypted_cvv": "{encrypted_cvv}"
    }
  },
  "meta": {
    "server_time": 1697005040687,
    "server_timezone": "UTC",
    "api_version": "2",
    "cashier_session_id": "61xxxxxx-xxxx-xxxx-xxxx-xxxxxx165398",
    "platform_id": null,
    "tracking_id": null,
    "affiliate_id": null
  }
}