Netherworld's Pretend Minibar
    Wondering what’s next for npm?Check out our public roadmap! »

    @karhoo/demand-bloc-payment
    TypeScript icon, indicating that this package has built-in type declarations

    16.0.1 • Public • Published
    Karhoo logo

    @karhoo/demand-bloc-payment

    BLoC to work with Karhoo Payment API


    License

    Installation

    npm i @karhoo/demand-bloc-payment

    Warnings

    This library uses Promise. For old browsers, e.g. IE11 you must bring your own polyfill. You can use js-core@3 to polyfill Promise

    Usage

    import { getApi } from '@karhoo/demand-api'
    import { PaymentBloc, BraintreeProvider, AdyenProvider } from '@karhoo/demand-bloc-payment'
    
    const organisationId = '1a12345d-e111-1da1-111f-a1111e1e11f1'
    const currencyCode = 'GBP'
    const amount = 10
    
    const payer = {
      id: 'id',
      email: 'email@of.user',
      first_name: 'firstName',
      last_name: 'lastName',
    }
    
    const adyenProviderOptions = {
      dropinContainerId: 'containerID',
      price: 25,
      currencyCode: 'GBP',
      returnUrl: 'http://www.return-url.com',
    }
    
    const braintreeOptions = {
      organisationId,
      currencyCode,
    }
    
    const providers = {
      Braintree: new BraintreeProvider(paymentService, braintreeOptions),
      Adyen: new AdyenProvider(paymentService, adyenProviderOptions),
    }
    
    const options = {
      paymentCardsEnabled: true,
    }
    
    const block = await PaymentBloc.create({
      providers,
      paymentService,
      options,
      cardsInfo,
    })
    
    await bloc.initPayment()
    
    if (bloc.validatePaymentDetails()) {
      const result = await bloc.verifyCardWithThreeDSecure(amount)
    
      console.log(result)
    }
    
    await bloc.dispose()

    For payment without 3d secure verification:

    if (bloc.validatePaymentDetails()) {
      const result = await bloc.getPaymentNonce()
    
      console.log(result)
    }

    Cards support:

    const cardsInfo = {
      cards: [],
      payer: undefined,
      setPaymentCards(cards, payer) {
        this.cards = cards
        this.payer = payer
      },
      getSelectedPaymentCard() {
        return this.cards[0]
      },
      clear() {
        this.cards = []
        this.payer = undefined
      },
    }
    
    const bloc = new PaymentBloc(provider, { paymentCardsEnabled: true }, cardsInfo)
    
    await bloc.initPayment()

    Save card:

    const result = await bloc.savePaymentCard(payer)
    
    console.log(result)

    All bloc methods, except for dispose, should be called only after initialization is complete otherwise it may lead to unexpected behavior. If dispose is called before initialization is complete initialization will be cancelled and errors.operationCancelled will be thrown.

    Providers

    Braintree

    import { HostedFieldsTokenizePayload, ThreeDSecureVerifyPayload } from 'braintree-web'
    import { getApi } from '@karhoo/demand-api'
    import { BraintreeProvider, BraintreeProviderOptions, braintreeDefaultValues, braintreeErrors } from '@karhoo/demand-bloc-payment'
    
    const organisationId = '1a12345d-e111-1da1-111f-a1111e1e11f1'
    const currencyCode = 'GBP'
    
    const options: BraintreeProviderOptions = {
      organisationId,
      currencyCode
    }
    
    const provider = new BraintreeProvider(getApi().paymentService, options)
    
    `options` should have `organisationId` and `currencyCode`. Other fields are not required

    if hostedFields is not provided following defaults will be used:

    {
      hostedFieldsConfig: braintreeDefaultValues.defaultHostedFieldsConfig
      hostedFieldsStyles: braintreeDefaultValues.defaultHostedFieldsStyles
    }

    if invalidFieldClass is not provided braintreeDefaultValues.defaultInvalidFieldClass will be used. if threeDSecureFields is not provided braintreeDefaultValues.defaultThreeDSecureFields will be used. if withThreeDSecure is not provided braintreeDefaultValues.default3DSecureStatus will be used.

    Initialize provider:

    await provider.initialize()

    In case of failure either braintree specific error or braintreeErrors.authorizationToken will be thrown

    Validate payment form:

    const isValid: boolean = provider.validatePaymentForm()

    Tokenize hosted fields:

    const tokenizeResponse: HostedFieldsTokenizePayload = await provider.tokenizeHostedFields()

    Verify:

    const amount = 10
    
    const result: ThreeDSecureVerifyPayload = await provider.verifyCard(amount, tokenizeResponse.nonce)

    Save card:

    await provider.saveCard('nonce', payer)

    Get saved cards:

    const data = await provider.getSavedCards(payer)

    Dispose:

    await provider.dispose()

    Adyen

    import AdyenCheckout from '@adyen/adyen-web'
    import CardElement from '@adyen/adyen-web/dist/types/components/Card'
    import { getApi } from '@karhoo/demand-api'
    import { AdyenProvider, AdyenProviderOptions, AdyenCheckoutOptions } from '@karhoo/demand-bloc-payment'
    
    const options: AdyenProviderOptions = {
      dropinContainerId: 'containerID',
      price: 25,
      currencyCode: 'GBP',
      returnUrl: 'http://www.return-url.com',
    }
    
    const provider = new AdyenProvider(getApi().paymentService, options, false)

    options should have dropinContainerId, price, currencyCode, returnUrl. Other fields are not required

    Initialize provider:

    await provider.initialize()

    Validate payment form:

    const isValid: boolean = provider.validatePaymentForm()

    Tokenize hosted fields:

    const tokenizeResponse = await provider.tokenizeHostedFields()

    Verify:

    const verifiedNonce = await provider.startThreeDSecureVerification()
    
    const result = await provider.completeThreeDSecureVerification(
      (MD: 'MD'),
      (PaRes: 'id123'),
      (nonce: 'verifiedNonce')
    )

    Dispose:

    await provider.dispose()

    All provider methods, except for dispose, should be called only after initialization is complete otherwise it may lead to unexpected behavior. If dispose is called before initialization is complete initialization will be cancelled and errors.operationCancelled will be thrown.

    Keywords

    Install

    npm i @karhoo/demand-bloc-payment

    DownloadsWeekly Downloads

    207

    Version

    16.0.1

    License

    BSD-2-Clause

    Unpacked Size

    401 kB

    Total Files

    27

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar