bog-payments-web-sdk v0.0.12

Integrating BOG Card Payment Form on Your Page

We have prepared a JavaScript library to help handle payment inputs and processes on your website.

The basic process is as follows:

1. Create an order on your backend, which will produce an order-id.
2. Call our library methods to initiate a session and render payment inputs.
3. Once the payment is finished, you will be notified of its status and can handle it accordingly.

Usage:

const orderId = ''; // create order and get order-id

Create a payment session:

const session = new BogPaymentSession(orderId)

render the payment form:

const target = document.querySelector('#payment-form-contianer');
session.render(target);

##Listen to events emitted by the session with the on method:

ex.:

session.on('submit_available_changed', (data) => console.log(data))

###The following events are available:

payment_received: The payment process has been finished. Any possible error will be passed to the callback.

3ds_redirect: The user has been redirected to the 3DS authorization page inside the iframe.

customer_name_required: Payment requires the customer's name to be inputted. This means a second input will be displayed within the form.

submit_available_changed: Called every time the user changes the form. An object containing a boolean value to show if the form is valid, and a message when it's invalid will be passed to the callback (can be used to enable/disable the payment submit button).

##Configuration ####Style You can pass arguments to the session to style the form. Properties such as backgroundColor, borderRadius, borderColor are available.

##Resize notes Initially, the frame displays just the single card input and, optionally, the submit button. In the case of payment in Uzbekistan, the customer name input will appear, and if 3DS authorization is required, it will be loaded inside the frame.

These states might require adjustments on where to place the frame and how to size the container.

The state changes will be emitted using events. Additionally, you will be able to move the frame entirely to a separate location using the session.move method.

####Note: This setup might undergo minor changes before it's finalized.