cloudipsp / checkout-vue Goto Github PK

Hey guys, we're using your amazing service to process our payments but faced a major issue when configuring our site's Content Security Policy (CSP).

The problem is basically straightforward: your code is using javascript eval() and Function() methods and gets blocked by browsers unless we appoint 'unsafe-eval' into our CSP. The thing is that making this change, would weaken our CSP and leave our service vulnerable to a range of dangerous DOM-based XSS vulnerabilities and attacks.

Here's a screenshot of the place in your code that is using unsafe methods and it would be great if you could have a look and fix this security issue. As far as we could see there are just two places in your code that do such things and hopefully it won't be too much effort to adjust it.

Thank you in advance for your assistance. We're eagerly awaiting your response. Please let us know if you need any further information.

PS. the comment regarding jquery on the screenshot is now clear. Seems like the file your script is loading is 404

The example app starts normally if I replace api.create with api.init.

Another issue we've just noticed thanks to our users - ApplePay button doesn't work properly 😢

Steps to reproduce:

1. Open Safari browser on some Mac or IPhone where ApplePay is configured as a payment method.
2. Go to https://sweetcv.com
3. Click Get started, sign up/sign in into your account
4. Click upgrade button & choose any plan
5. On the checkout page click ApplePay button

Expected behaviour: payment is successfull (i.e. on IPhone it asks to double press on side button to confirm payment and when you do Fondy charges money from your ApplePay card)

Actual behaviour: error is shown, payment is failed, no details about the failure are displayed neither on the user side nor on the merchant portal. Tested on both PrivatBank & Monobank cards. See the real life screens below.

Please help us to fix this ASAP, we're loosing clients who want to pay with ApplePay because of this problem.

Hi guys, we have a problem. Our app uses embedded payment page with Fondy's checkout-vue. When our users navigate from one plan to another GooglePay button suddenly disappears. It starts showing again only after full page reload or when changing page size 🤔 PS. Seems like it happens only when full_screen: true

You can reproduce it on our service at https://sweetcv.com Just sign up, click Upgrade and choose the plan to get to the payment page shown on video.

We could also reproduse quite the same problem on your payment portal. See the following video:

Please, help us fixing this ASAP. Thanks!

Hi guys,

We've been using Fondy (embedded via checkout-vue) in production starting from 07.03.2021 and everything worked fine until 03.04.2021 when we started receiving weird errors throwed on client-side for our customers. Here's how these erros look like:

Our use case is pretty straightforward: we have an Angular SPA and we need that checkout-vue/checkout.js was loaded asynchronusly once user navigates to the payment page. So we dynamically initiate loading the required script, wait until it gets loaded and only then initiate creating the payment form. Here's a brief example of the function that we use to load checkout.js file:

Basically it worked just filne and we didn't do any changes on our side, so we suspect there was some update recently on Fondy's side, so we started digging into it. And it seems like the problem is happening because of the asynchronus load. For example, if we disable our loadScript functionality and just add these lines into index.html:

The result will be the same - the error once we init the form.

BUT if we remove async parameter everything works just fine. Maybe you have any ideas on how we can eliminate this problem?

UPD: it turns out that problem disappears if we cleanup all the cookies & remove these elements from payment methods 🤔

Thanks

Hi there, we're having a problem with checkout page translation, here's a detailed explanation:

Prerequisites

• Our application is localized for 4 languages and we want our checkout page to be always displayed in the same language as the rest of the UI. The languages are en, ru, uk, pl which are also supported by fondy.
• We use "embedded" checkout, thus before initializing the checkout form we perform a call to our backend that in it's turn generates a checkout token using cloudipsp-node-js-sdk.

const requestData = {
      order_id: newId(),
      order_desc: pricingCard.description,
      lang: getFondyTokenDto.lang, // <-- the language of the checkout form we want to be displayed in
      required_rectoken: 'y',
      currency: pricingCard.currency,
      amount: pricingCard.price * 100
};

return await this.fondy.CheckoutToken(requestData);

• On the client side we're using the received token for initializing the checkout page.

let Options = {
  options: {
    methods: ['card', 'banklinks_eu', 'wallets', 'local_methods'],
    methods_disabled: [],
    card_icons: ['mastercard', 'visa', 'maestro'],
    active_tab: 'card',
    fields: false,
    title: 'Pro Plan',
    link: 'https://test.com',
    full_screen: true,
    button: true,
    lang: false, //<-- Note 1: we don't want to have a separate language selector for the checkout form
  },
  params: {
    lang: this.lang, //<-- Note 2: we also try to specify desired language here
    token,
  }
};
let app = window['fondy']("#checkout-container", Options);

• Every time when user changes language within our UI we do a page reload, therefore it completely "recreates" the checkout page repeating the steps listed above.
• In the merchant settings we also try to set the lang priority as shown here:

Expected behaviour

• the checkout page translation is always consistent with the rest of the UI

Actual behaviour

• the checkout page is displayed in language that it was created once (for the firt time) for the particular client (browser). No matter what language user picks afterwards the checkout form will stay in the same language it was created for the first time.

Additional info

• the problem seems to be caused by how initLang() method works, as it doesn't respect any language parameters as long as the lang_s cookie is present. Changing it to this.changeLang(this.state.params.lang || getCookie('lang_s')) would probably fix this problem.

We'd be really happy if someone could help us to achieve the desired behaviour. Thanks!

error in console:

checkout.js:188 TypeError: Cannot read property 'params' of undefined
at Lr.setParams (checkout.js:176)
at ie (checkout.js:188)
at Lr.Dn.t.$emit (checkout.js:188)
at Lr.setParams (checkout.js:182)
at HTMLInputElement. (?........:510)
at HTMLInputElement.dispatch (jquery.js?ver=1.12.4-wp:3)
at HTMLInputElement.r.handle (jquery.js?ver=1.12.4-wp:3)