@banq/checkout-widget

Overview

Our Checkout widget enables platforms to quickly process payments from cards, ACH, and banq user's balance by loading a javascript widget which contains the end to end payment flow. The payment processed by the checkout widget is configured from a backend API call and funds are settled into the merchant's banq business account.

Types of Payments

The Open API supports a flexible set payments including:

• One time real-time payments
• Recurring payments
• Scheduled payments

Payment Sources

End users can make payments from their:

• banq balance
• checking account
• debit & credit cards (depending on the merchants industry)

Installation

To install the stable version:

npm install --save @banq/checkout-widget

or using yarn:

yarn add @banq/checkout-widget

Usage

Add this import to starting point of your project such as: index.js or index.ts files

import '@banq/checkout-widget';

Create a <checkout-widget-dialog/> element with required attributes mentioned below.

<checkout-widget-dialog
  open="true"
  mode="payment-flow"
  environment="sandbox"
  paymentLink="https://link.banq.com/qxU6gO79Ajb"
  signUpFlow="long-sign-up"
/>

Attributes:

name	Required	Description
open		Shows checkout widget when truthy
mode		If you have some anticipated sales material, it's beneficial to allow your end-users to pre-register with banq and add payment methods before the sales material is available for purchase. Possible values: payment-flow, pre-register-flow
environment	✔	Environment you want to use. If you want test widget use sandbox. Possible values: sandbox,production
paymentLink		Payment link required to enable payments. When mode:pre-register is set paymentLink attribute is not required. See Generate Payment Link Docs for more information
theme		Widget theme. Possible values: dark, light
signUpFlowType		Enables you to choose which sign up flow to use. Possible values: short-sign-up, long-sign-up

Events:

name	Description
close	Fires after widget closes
successPayment	Fires when user creates payment

Create a <pay-with-banq-button/> element with required attributes mentioned below.

<pay-with-banq-button
  disabled="false"
  loading="false"
  error="false"
  mode="payment-flow"
  name="Messi Drop"
/>

Attributes:

name	Required	Description
disabled		Disables pay with banq button Shows checkout widget when truthy
loading		Shows loading indicator
error		Shows error indicator
mode		If you have some anticipated sales material, it's beneficial to allow your end-users to pre-register with banq and add payment methods before the sales material is available for purchase. Possible values: payment-flow, pre-register-flow Payment link required to enable payments. When mode:pre-register is set paymentLink attribute is not required. See Generate Payment Link Docs for more information
name		Widget placement name for analytics. Possible values: name of the drop

Styling:

pay-with-banq-button uses Shadow CSS ::part spec. It has button inside defined as button part

<style>
  .pay-with-banq::part(button){
    width: 100% /* Those styles apply to button in shadow root */
  }
</style>
<pay-with-banq-button 
  class="pay-with-banq"
  disabled="false"
  loading="false"
  error="false"
  mode="payment-flow"
  name="Messi Drop"
/>

See more about ::part() on https://developer.mozilla.org/en-US/docs/Web/CSS/::part

Events:

name	Description
click	Fires on button click

<pay-with-banq-button> extends all button events