chargebee / chargebee-checkout-samples Goto Github PK

Java 1.60% JavaScript 12.52% PHP 23.88% Vue 9.17% HTML 20.21% Python 0.48% Ruby 6.42% TypeScript 7.95% CSS 12.97% Shell 0.29% Blade 0.84% SCSS 3.66%

chargebee-checkout-samples's Introduction

Chargebee Checkout Samples

This repository contains Chargebee's checkout/portal examples, to help you understand and explore the capabilities supported.

If you are looking for Chargebee API examples please refer this repostory.

Documentation

chargebee-checkout-samples's People

Contributors

Stargazers

Watchers

Forkers

mikethmz meeralathika snsanthosh maxim71 ritesh-skyach rahulpargi advancedhair totomobile43 prasadjasti neha-solanki3 argawirawan1234 truccomarcos kwiser gaurav-techies dark-mb1 lembitstechnolab orangegoran johnxie99 craigspinks vipinpapnai spacewhite0808 milesm8 shahzaib023 nexezzhood cybromujeeb deepan1234 christiankroeber mikeljoe somusuresh deepa-chatlayerai javiermartinz cb-rajat mykoladzoba albogdano tanzeelrana overcast-at-amarki cb-anish mdaffan01 rimzimmaliwal png-prakash erickdc sandypatidar non-gendered-fitness zay-canters blueelefant shiran1989 cb-arthur javahunk2020 nam-nguyen-niteco arnaud-lb wouterb luizmemories cb-devprakash luuddan zaplify sinhavisionvivante aayush-fudr cb-apzalbahin nishit-t-eq iliashka shashank-melity kdhttps rishabh89 attaxia kaderho professional-sourav ovuvanchuyen sushi-a-gogo dedicatedcloud

chargebee-checkout-samples's Issues

PHP Create payment intent - Need help

We use now the ChargeBee_HostedPage::checkoutNewForItems (PHP) to procees the payment.

But I have to change the integration, from a Wordpress page to a React SPA. I integrated your ReactJS component into.

If I correctly understood, I need to create an intent payment, to generate a token (server side), which will be used in the submit action (client side).

Actuelly I am a little lost.

Do those inputs/options/args can be used for an intent payment ?

[
        "subscription" => ["startDate" => now(),
         "subscriptionItems" => [
                       ["itemPriceId" => "my-item-price-id"]
          ],  
        "customer" => "John Doe",
        "couponIds" => ['my-coupon],
];

If it is not possible, how can I do ? Must have I create a subscription ?

Do you have an example in PHP ?

Thank you.

Issue when using ChargebeeJS to use 3DS with the Checkout.com payment gateway.

I have an issue when using ChargebeeJS (Components and Fields) to use 3DS with the Checkout.com payment gateway.

As follow:
-> Create payment intent in server -> cardComponent.authorizeWith3ds -> Error: "The API response status code (422) does not indicate success. A validation error of type request_invalid occurred with error codes [processing_channel_id_required]"

I think when Chargbee's server requests Checkout.com to create a Payment, the property processing_channel_id is missing.

This is the document for creating a payment with Checkout.com:

https://api-reference.checkout.com/#operation/requestAPaymentOrPayout!path=0/processing_channel_id&t=request

This is an example project I created (don't worry about the public and secret keys, I will remove those after the issue is resolved

https://github.com/dongnh124/chargebee-3ds-with-checkout.com

Container element not specified for number field

I can't get this example to work https://github.com/chargebee/chargebee-checkout-samples/tree/master/components/jquery/example1

It's giving me this error:

Uncaught (in promise) no_container_element: Container element not specified for number field
    at r.value (https://js.chargebee.com/v2/chargebee-components.js:1:28385)
    at http://localhost:9000/index.js:78:41

index.html:

<html>
  <head>
    <!-- Include chargebee js script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://js.chargebee.com/v2/chargebee.js"></script>
    <script src="index.js"></script>
  </head>
  <body>
    <form>
      <!-- Specify container elements for mounting card elements -->
      <!-- Chargebee iframes get mounted here... -->
      <!-- Card Number container -->
      <div id="card-number" class="ex1-input"></div>
      <!-- Card Expiry container -->
      <div id="card-expiry" class="ex1-input"></div>
      <!-- Card CVV container -->
      <div id="card-cvc" class="ex1-input"></div>
      
      <!-- Container for displaying validation errors -->
      <div id="error" role="alert"></div>
    </form>
  </body>
</html>

index.js:

// On document ready
$(document).ready(function() {
  // Initialize chargebee with your Site & Publishable API Key 
  var cbInstance = Chargebee.init({
    site: '[removed]',
    publishableKey: '[removed]'
  });

  var options = {
    // Custom fonts
    fonts: [
      'https://fonts.googleapis.com/css?family=Roboto:300,500,600'
    ],

    // CSS Classes that gets applied on the container elements on different field states
    classes: {
      focus: 'focus',
      invalid: 'invalid',
      empty: 'empty',
      complete: 'complete',
    },

    // Custom placeholders
    placeholder: {
      number: "4111 1111 1111 1111",
      expiry: "MM / YY",
      cvv: "123"
    },

    // Style customization
    style: {
      // Styles for default state
      base: {
        color: '#333',
        fontWeight: '500',
        fontFamily: 'Roboto, Segoe UI, Helvetica Neue, sans-serif',
        fontSize: '16px',
        fontSmoothing: 'antialiased',

        // Input text color on focus
        ':focus': {
          color: '#424770',
        },

        // Default placeholder color
        '::placeholder': {
          color: 'transparent',
        },

        // Placeholder color when focused
        ':focus::placeholder': {
          color: '#7b808c',
        },
      },

      // Styles applied when field is in an invalid state
      invalid: {
        color: '#e41029',

        ':focus': {
          color: '#e44d5f',
        },

        '::placeholder': {
          color: '#FFCCA5',
        },
      },
    },
  }

  // Load chargebee components
  cbInstance.load("components").then(() => {

    // Create a card component, with the options
    var cardComponent = cbInstance.createComponent("card", options);
    
    // Create card fields (fields-mode)
    cardComponent.createField("number").at("card-number");
    cardComponent.createField("expiry").at("card-expiry");
    cardComponent.createField("cvv").at("card-cvc");

    // Mount card component
    cardComponent.mount();

    cardComponent.tokenize().then(data => {
      // Get chargebee token here
      console.log(data.token) 
    })
  });
});

Can't bind to 'placeholder' since it isn't a known property of 'div

Hi
I am facing the below mentioned issue when trying to implement the example1 in my project.
`src/app/example1/example1.component.ts:5:16
5 templateUrl: './example1.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component Example1Component.
src/app/example1/example1.component.html:10:12 - error NG8002: Can't bind to 'styles' since it isn't a known property of 'div'.

10 [styles]="styles"
~~~~~~~~~~~~~~~~~

src/app/example1/example1.component.ts:5:16
5 templateUrl: './example1.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component Example1Component.
src/app/example1/example1.component.html:11:11 - error NG8002: Can't bind to 'classes' since it isn't a known property of 'div'.

11 [classes]="classes"
~~~~~~~~~~~~~~~~~~~

src/app/example1/example1.component.ts:5:16
5 templateUrl: './example1.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component Example1Component.
src/app/example1/example1.component.html:12:11 - error NG8002: Can't bind to 'fonts' since it isn't a known property of 'div'.

12 [fonts]="fonts"
~~~~~~~~~~~~~~~

src/app/example1/example1.component.ts:5:16
5 templateUrl: './example1.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component Example1Component.
src/app/example1/example1.component.html:13:11 - error NG8002: Can't bind to 'placeholder' since it isn't a known property of 'div'.

13 [placeholder]="placeholder"
~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/example1/example1.component.ts:5:16
5 templateUrl: './example1.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component Example1Component.
src/app/example1/example1.component.html:14:11 - error NG8002: Can't bind to 'locale' since it isn't a known property of 'div'.

14 [locale]="locale"
~~~~~~~~~~~~~~~~~

src/app/example1/example1.component.ts:5:16
5 templateUrl: './example1.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component Example1Component.
src/app/example1/example1.component.html:21:68 - error NG8002: Can't bind to 'placeholder' since it isn't a known property of 'div'.

21 <div id="number-field" cbNumberField class="ex1-input" [placeholder]="'4111 1111 1111 1111'">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/example1/example1.component.ts:5:16
5 templateUrl: './example1.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component Example1Component.`

Any help will really appreciated.
Thanks

how to apply media query styling to input components

hi! i've checked the documentation regarding the question, but i was unable to find any clue how to achieve this one. I basically want to apply some styles on the input element or .CardInput class, inside the iframe.

My end goal is to make the font smaller on mobile, and bigger on desktop. Is this possible w/ the react implementation?

Issue with 3DS Payment flow.

I am using https://www.chargebee.com/checkout-portal-docs/3ds-helper-overview.html#_3-d-secure for implementing 3DS Payment flow.

Create Payment Intent on Server
Tokenize Card
3DSHander with token + paymen_intent + additional fields

Facing issue at Tokenization itself.
It says Uncaught (in promise) Error: Gateway configuration for currency: undefined unavailable

Or if added publishedKey, for CbInstance, it says Api unauthorized.

Please help.

"Token has Expired" error when reusing session data.

So I made a PHP API that returns a portal session object which then stores the API id in the database.
After this, the portal pops up, bla bla bla then I close it.
Around 5 seconds later, I open the popup again, which calls the portal session API which then fetches the portal session object by id (which I stored in the database earlier). This is where I then get the 401 error saying that the token has expired. But as I've seen from the docs, should last about an hour before expiring.

What am I doing wrong? I checked out your Laravel test server and it keeps on creating a new portal session. Should I stop reusing portal session objects?

main.component.ts

ngOnInit() {
    this.chargebeeService.getInstance().setPortalSession(() => {
      return new Promise((resolve, reject) => {
        this.chargebeeService.portalLogin().subscribe((response) => {
          resolve(response.body);
        });
      });
    });
  }
openSelfServePortal(): void {
    this.chargebeeService.getInstance().createChargebeePortal().open({
    });
  }

chargebee.service.ts

portalLogin(): Observable<HttpResponse<Response>> {
    let body = new URLSearchParams();
    body.append('client_id', this.getClientId());

    return this.http.post<Response>(`${environment.url}/subscription_billing/get_portal_session`, body.toString(), { observe: 'response' });
  }

Lumen API:

    public function getPortalSession()
    {
        $session_id = $this->subscriber->subscription_billing->session_id;
        $session = ($session_id == null) ? $this->subscription->createPortalSession() : $this->subscription->getPortalSession($session_id);

        return response()
            ->json($session->getValues(), 200);
    }

Some model

    public function createPortalSession()
    {
        $result = \ChargeBee_PortalSession::create([
            'redirectUrl' => '<redirect url>',
            'customer' => ['id' => $this->getCustomerRecord()->id]
        ]);

        $this->sub_billing_portal_session = $result->portalSession();

        $this->subscriber->subscription_billing->session_id = $this->sub_billing_portal_session->id;
        $this->subscriber->subscription_billing->save();

        return $this->sub_billing_portal_session;
    }

    public function getPortalSession(string $sessionId)
    {
        $session = \ChargeBee_PortalSession::retrieve($sessionId)->portalSession();

        $this->sub_billing_portal_session = $session;

        return $this->sub_billing_portal_session;
    }

No 'Access-Control-Allow-Origin' header

Failed to load http://localhost:8000/api/generate_portal_session: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://0.0.0.0:9000' is therefore not allowed access. The response had HTTP status code 500.

Is 3ds example PCI compliant?

https://github.com/chargebee/chargebee-checkout-samples/blob/master/3ds-examples/chargebee-test/card/index.html
In the file linked about you can see that the page doesn't use ChargeBee components, isn't that not PCI compliant?

"Invalid card number" error testing the 3ds_full_checkout_examples

Hi,

I am testing your branch 3ds_full_checkout_examples.
I am able to generate the payment_intent using my server:
{"id":"169yCIRmbeeHZ66FKJTjMLMkONzNWZGA38Zcu6YxTa1DUcddPT","status":"inited","amount":3001,"gateway_account_id":"......","expires_at":1578138949,"created_at":1578137149,"modified_at":1578137149,"object":"payment_intent","currency_code":"USD","gateway":"chargebee"}

But, when I call to the "authorizeWith3ds" function, I am getting the following error "Invalid card number". I am using the testing cards here: https://www.chargebee.com/docs/chargebee-test-gateway.html#test-card-numbers_3ds-cards

Please, could you indicate to me what testing card number I need to use to check the authorizeWith3ds flow?

Thanks,
Marina

Error: "Container element not specified for card component"

When I try to implement one of the examples in Nuxt JS (which extends VueJS) - I get the error "Container element not specified for card component" and the component doesn't get rendered.

this is my page where I import CardTest where CardTest is just one of the examples:

<template>
  <div class="test">
    Test
    <card-test></card-test>
  </div>
</template>

<script>
import CardTest from '~/components/CardTest'

export default {
  components: {
    CardTest
  },

  mounted() {
    window.Chargebee.init({
      site: 'xxx-test',
      publishableKey: 'test_xxx'
    })
  }
}
</script>

Can .setCustomer() be non editable by the users?

chargebee-checkout-samples/drop-in/index.html

Line 63 in 95caadc

cart.setCustomer({email: "[email protected]", cf_test: "customer custom field", cf_date: "1991-09-16"});

Error: Cannot read properties of undefined (reading 'id')

https://github.com/chargebee/chargebee-checkout-samples/tree/master/components/react-app/src/components/example4

When I use this demo to build my components and use Authorizing payment with 3ds on submit, I first obtain the payment_intent from the back end, and then call authorizeWith3ds, but an internal error is reported, and I can't find the reason.

cosnt intent = {
        payment_intent : {
            "id": "Azz5ZgTWlGG3v2UPjRFUB67OReIMfjwml7Rc2LSvTVA6Y5a6C",
            "status": "inited",
            "currency_code": "USD",
            "amount": 50000,
            "gateway_account_id": "gw_AzqEWXTOpNbNPQ1X",
            "expires_at": 1677223245,
            "reference_id": "",
            "payment_method_type": "card",
            "success_url": "",
            "failure_url": "",
            "created_at": 1677221445,
            "modified_at": 1677221445,
            "resource_version": 0,
            "updated_at": 0,
            "customer_id": "",
            "gateway": "stripe",
            "active_payment_attempt": null,
            "business_entity_id": "",
            "object": "payment_intent"
        }
}

<CardComponent
              ref={this.cardRef}
              className="fieldset field"
              styles={style}
              classes={classes}
              locale={locale}
              placeholder={placeholder}
              fonts={fonts}
              currency={currency}
              onChange={this.onChange}
            >
              <div className="ex4-field">
                {/* Card number component */}
                <CardNumber
                  className="ex4-input"
                  onFocus={this.onFocus}
                  onBlur={this.onBlur}
                />
                <label className="ex4-label">Card Number</label>
                <i className="ex4-bar"></i>
              </div>

              <div className="ex4-fields">
                <div className="ex4-field">
                  {/* Card expiry component */}
                  <CardExpiry
                    className="ex4-input"
                    onFocus={this.onFocus}
                    onBlur={this.onBlur}
                  />
                  <label className="ex4-label">Expiry</label>
                  <i className="ex4-bar"></i>
                </div>

                <div className="ex4-field">
                  {/* Card cvv component */}
                  <CardCVV
                    className="ex4-input"
                    onFocus={this.onFocus}
                    onBlur={this.onBlur}
                  />
                  <label className="ex4-label">CVC</label>
                  <i className="ex4-bar"></i>
                </div>
              </div>
            </CardComponent>

this.cardRef.current
      .authorizeWith3ds(intent.payment_intent)
      .then((data) => {
        console.log('authorizeWith3ds', data)
        // this.setState({ loading: false, intent_id: data.id, error: '' })
      })
      .catch((error) => {
        console.log('error', error)
        this.setState({
          loading: false,
          intent_id: '',
          error: 'Problem while tokenizing your card details' + error
        })
      })

Error: Cannot read properties of undefined (reading 'id')