chargebee-checkout-samples's People
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-gogochargebee-checkout-samples's Issues
Can .setCustomer() be non editable by the users?
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)
})
});
});
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?
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?
"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;
}
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
PHP Create payment intent - Need help
Hi
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.
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>
Error: Cannot read properties of undefined (reading 'id')
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')
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.
"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
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:
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
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.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.