bambora/checkout-sdk-web

JavaScript SDK for Checkout.

JavaScript SDK for Bambora Checkout

Provides the tools necessary for integrating Bambora Checkout with your website.

Currently, the following integrations are available:

• Full page redirect.
• Modal, as a full page overlay.
• Inline, as a component of a page.

Full documentation is available at the Bambora developer portal.

Installation

NPM: npm install @bambora/checkout-sdk-web

CDN: https://static.bambora.com/checkout-sdk-web/latest/checkout-sdk-web.min.js

Minified and gzipped size is ~5.5 KB.

The NPM package supports ESM.

Browser support: All major browsers above version N - 1, where N is the most recent version. For Internet Explorer, only version 11 is supported. We don't test other browsers, but bug reports and pull requests for bugs related to older versions or uncommon browsers are always welcome.

Build

Requirements are Node and NPM.

Clone the project, navigate to the project root, and run npm run build in your terminal. This will install all dependencies and output all assets to the dist-folder.

It is also possible to set up a watcher for source files for changes by running npm start.

Alternatively, run Docker containers as specified in the Makefile in the repository root.

Test

Run npm test in your terminal in the project root. You can also run the watcher via npm run test:watch. It watches all source and test files for changes.

Run npm run lint for linting.

Contributing

Create a pull request or an issue. Be sensible and respectful. Thanks.

Main Developer Dependencies

Purpose	Dependencies
Language	TypeScript
Bundling	Rollup
Testing	Karma, Mocha, Chai, Sinon, Puppeteer
Code quality	TSLint, Prettier

Additionally, a pre-commit hook has been set up with the following steps:

1. Run Prettier on all staged files.
2. Run TSLint with autofixer on all staged files.
3. Add files to git.
4. Run all tests.

The commit will abort if any of the steps fail. Please fix any problems before committing.

Run git commit --no-verify to override.

Continuous Integration and Delivery

CI/CD is done by Jenkins by reading the Jenkinsfile. The pipeline goes through 5 steps:

1. Build.
2. Test.
3. Publish to Bambora CDN (files are uploaded to S3).
4. Invalidate Bambora CDN Cache (the cache on CloudFront is invalidated).
5. Publish to public NPM.

This will be run on the master branch only. Steps 3-5 will be run on tagged commits only.

Use npm version to bump the version and create a tagged commit as it ensures consistency.

checkout-sdk-web's Issues

A lot of vulnerabilities in package.json

found 147 vulnerabilities (24 low, 60 moderate, 60 high, 3 critical) in 3967 scanned packages
run npm audit fix to fix 79 of them.
18 vulnerabilities require semver-major dependency updates.
50 vulnerabilities require manual review. See the full report for details.

Question: Is it possible to add styles to InlineCheckout content

I'm looking into how I can style InlineCheckout content, but I haven't found a way to do it yet. Is it possible/implemented in any way?

A few options I've looked at:

1. 'styles' parameter when initializing InlineCheckout class.
2. '' tag of the iFrame has two stylesheet links pointing to my domain (at least Chrome says so, but I suspect this is to the Bambora domain):

link href="vendor.7daa6915a7de23d4e42fbfb4e44be03a.css" rel="stylesheet"
link href="app.0afdd1d9ce089dab3e5831900a9f02bb.css" rel="stylesheet"

3. Apply styles to the DOM after the iFrame has loaded (I'm not sure if it will work reliable).

If it is not any good solutions to this I guess ModalCheckout is the way to go as I've seen some style examples in the documantation.

Uncaught ReferenceError: require is not defined

All im doing is importing the package in React,

import { UI, InlineCheckout, RedirectCheckout, ModalCheckout, Errors, Event } from '@bambora/checkout-sdk-web';

Missing Example, how to do a payment request for Items with price X?

I am reading your documentation here:
https://developer.bambora.com/europe/sdk/web-sdk/introduction

But for me it is really unclear for how to actually process a payment.

---

I attach the checkout instance (from InlineCheckout class) to a div and mount it.

The class takes an endpoint as argument, but where can I add my items & what endpoints is available?

Example:

How do I pass my const array of items to the payment checkout process?
Here is my minimal vue file:

<template>
  <div id="bb-checkout"></div>
</template>

<script>
import { InlineCheckout, Event, UI } from '@bambora/checkout-sdk-web'
export default {
  mounted() {
    // How to pass items in to checkout process?
    const items = [
      {
        name: 'xxx',
        price: 140.48
      },
      {
        name: 'yyy',
        price: 237.32
      }
    ]
    const checkout = new InlineCheckout('xxx', {
      container: document.getElementById('bb-checkout'),
      endpoint: 'checkout'
    })
    // All events
    checkout.on('*', data => {
      console.log(data)
    })
    checkout.mount()
  }
}
</script>

Style support for native browser autofill.

Hi there,

Thanks for awesome library, I am not sure if this is the right repo to post this kind of issue. By the way, Going to your getting started https://dev.na.bambora.com/docs/guides/custom_checkout/ demo, we notice that if we had previously entered the cc details, then use the native browser autocomplete feature, the fields specially the expiry date input has yellow background into it (Please refer to to the image below). My question is Is there a way we can override the native browser autofill behaviour.

Calling modalCheckout getting token of undefined error

Hi,

Trying to use this Library on React-native

import { ModalCheckout, Event } from "@bambora/checkout-sdk-web";
var checkout = ModalCheckout("c47-baf353d7-d475-4664-bc89-5541b9ed9d81");
checkout.on(
            Event.Authorize,
            function(payload) {
                console.log("payload", payload);
                // The transaction ID is logged to the console upon authorisation.
            }
);
checkout.show();

For Testing, I used this curl cmd to generate a session token

curl https://api.na.bambora.com/scripts/tokenization/tokens  \
  -H "Content-Type: application/json" \
  -d '{
     "number":"4030000010001234",
     "expiry_month":"02",
     "expiry_year":"20",
     "cvd":"123"
  }'

Trying to call the payment but getting an error

Unable to load in ionic framework (iOS)

Hi,

I am having issues integrating the web SDK on ionic framework. It works well on android, but when I build it on iOS it is having content policy issues. I already tried enabling all "allowed-navigation" tags (i.e )

Error:

Refused to load https://v1.checkout.bambora.com/2f349e9f71744a68b4320966083b8109?ui=inline&language=en-US#eyJ2ZXJzaW9uIjoiMy4wLjYifQ== because it does not appear in the frame-ancestors directive of the Content Security Policy.

(Modal) checkout form overflowing on small screen / window widths

hello,

we are currently trying to integrate the modal checkout into our own iframe widget. The latter one if often embedded into our customers' websites with widths < 300 pixels. Unfortunately the bambora checkout modal iframe document's body has got a min-width of 310px and the checkout element a width of 380pxat these dimensions. the result looks like this:

any ideas on how to overcome this problem?

[Feature Request] Link to launch BankID

In Sweden, the most common method for 3D secure authorization is the app BankID. In the current solution, the user will have to launch the app manually. Most other online payment solutions offer a button/link that the user can click to launch the app directly from the website.

The current work flow causes confusion for some of our new users and we have to spend a lot of time giving them support on how to launch the BankID app, sign the purchase and then return to the website.

There is an API/universal link for this: https://www.bankid.com/en/utvecklare/guider/teknisk-integrationsguide/programstart

I hope you will consider this since the lack of this feature leads to a lot of frustration for many of our Swedish customers.

Getting: "TypeError: ... is not a constructor" when using e.g. InlineCheckout in a react web app

I'm trying to use this SDK in a react application. When following the documentation using this code:

import { InlineCheckout, Event } from "@bambora/checkout-sdk-web";

const checkout = new InlineCheckout(
  "<<YOUR-SESSION-TOKEN-HERE>>",
  {
    container: document.body
    // For this example, we put the iframe in the body element.
  }
);

checkout.on(
  Event.Authorize,
  payload => console.log(payload.data.txnid)
  // The transaction ID is logged to the console upon authorize.
);

I get the following error:

TypeError: WEBPACK_IMPORTED_MODULE_3__bambora_checkout_sdk_web.InlineCheckout is not a constructor

I tried both version 1.0.1 and 2.0.0. Also I started a fresh project with create-react-app to check if there was any problems with my project. Do you have any idea how I can get it to work. Could it be something when integrated with Webpack or any other configuration in a React web app context?