Skip to content

Commit ed9ba54

Browse files
ioan-ghisoi-ckoioan-ghisoi-cko
committed
Add support for CB and add scheme_local and preferred_scheme
1 parent 468cb3a commit ed9ba54

11 files changed

Lines changed: 148 additions & 18 deletions

File tree

‎README.md‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,79 @@ If you want to use Frame in single frame mode you cna do it like this:
119119
</Frames>
120120
```
121121

122+
# For Carte Bancaire
123+
124+
If you want to accet Carte Bancaire we provide an aditional element so that the scheme can be picked. You also need to make sure you update the config to specify the selectors. If you use Multi Frames you need to provide the selectors for schemeChoice, cardNumber, expiryDate and cvv. For Single Frames you just need the schemeChoice. Make sure you don't forget to add the SchemeChoice component, and write some CSS sso when it renders, it does not overlap your other elements.
125+
126+
```js
127+
import React from 'react';
128+
import { Frames, CardNumber, ExpiryDate, Cvv, CardFrame, SchemeChoice } from './frames';
129+
130+
import './App.css';
131+
132+
function App() {
133+
return (
134+
<div className="App">
135+
<Frames
136+
config={{
137+
publicKey: 'pk_sbox_ogynfaoply5o6ksuw3d3hcee3ez',
138+
cardNumber: {
139+
frameSelector: '.card-number-frame',
140+
},
141+
expiryDate: {
142+
frameSelector: '.expiry-date-frame',
143+
},
144+
cvv: {
145+
frameSelector: '.cvv-frame',
146+
},
147+
schemeChoice: {
148+
frameSelector: '.scheme-choice-frame',
149+
},
150+
localization: 'EN-GB',
151+
debug: false,
152+
}}
153+
ready={() => {}}
154+
frameActivated={(e) => {}}
155+
frameFocus={(e) => {}}
156+
frameBlur={(e) => {}}
157+
frameValidationChanged={(e) => {}}
158+
paymentMethodChanged={(e) => {}}
159+
cardValidationChanged={(e) => {}}
160+
cardSubmitted={() => {}}
161+
cardTokenized={(e) => {
162+
alert(e.token);
163+
}}
164+
cardTokenizationFailed={(e) => {}}
165+
cardBinChanged={(e) => {}}
166+
>
167+
<CardNumber />
168+
<div className="date-and-code">
169+
<ExpiryDate />
170+
<Cvv />
171+
</div>
172+
173+
{/* Or if you want to use single frames: */}
174+
{/* <CardFrame /> */}
175+
176+
{/* If you you use CB and need to select the Scheme: */}
177+
<SchemeChoice />
178+
179+
<button
180+
id="pay-button"
181+
onClick={() => {
182+
Frames.submitCard();
183+
}}
184+
>
185+
PAY GBP 25.00
186+
</button>
187+
</Frames>
188+
</div>
189+
);
190+
}
191+
192+
export default App;
193+
```
194+
122195
# :credit_card: Cardholder
123196

124197
If you need to inject the cardholder name on go, for cases where you render the payment form

‎package-lock.json‎

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "frames-react",
3-
"version": "1.0.9",
3+
"version": "1.0.10",
44
"peerDependencies": {
55
"react": ">=16.8"
66
},
@@ -29,7 +29,7 @@
2929
"@testing-library/react": "^13.1.1",
3030
"@types/classnames": "^2.3.0",
3131
"@types/node": "^17.0.31",
32-
"@types/react": "^18.0.8",
32+
"@types/react": "^18.0.14",
3333
"react": "^18.1.0",
3434
"react-dom": "^18.1.0",
3535
"react-scripts": "^5.0.1",

‎src/App.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ iframe {
1313
height: 38px !important;
1414
}
1515

16+
#schemeChoice {
17+
height: 200px !important;
18+
}
19+
1620
#payment-form {
1721
width: 280px;
1822
margin: 0 auto;
@@ -144,6 +148,7 @@ div+button {
144148
}
145149

146150
#pay-button {
151+
margin-top: 150px;
147152
border: none;
148153
border-radius: 3px;
149154
color: #FFF;
@@ -185,8 +190,8 @@ div+button {
185190
}
186191

187192
/**
188-
IE11-targeted optimisations
189-
*/
193+
IE11-targeted optimisations
194+
*/
190195

191196
_:-ms-fullscreen, :root .icon-container {
192197
display: block;

‎src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ function App() {
4343
<Cvv />
4444
</div>
4545

46-
{/* Or if you want to use single frames: */}
46+
{/* Or if you want to use single frames: */}
4747
{/* <CardFrame /> */}
4848

4949
<button

‎src/frames/Frames.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@ export class Frames extends Component<FramesProps> {
4949
cardholder: this.props.config.cardholder,
5050
localization: this.props.config.localization,
5151
modes: this.props.config.modes,
52+
schemeChoice: this.props.config.schemeChoice,
53+
cardNumber: this.props.config.cardNumber,
54+
expiryDate: this.props.config.expiryDate,
55+
cvv: this.props.config.cvv,
5256
ready: this.props.ready,
5357
frameActivated: this.props.frameActivated,
5458
frameFocus: this.props.frameFocus,
@@ -68,6 +72,30 @@ export class Frames extends Component<FramesProps> {
6872
delete config.cardholder;
6973
}
7074

75+
// Frames throws an error if the schemeChoice object is mentioned but not defined
76+
// To avoid this we remove the property completely if not set as a prop.
77+
if (!this.props.config.schemeChoice) {
78+
delete config.schemeChoice;
79+
}
80+
81+
// Frames throws an error if the cardNumber object is mentioned but not defined
82+
// To avoid this we remove the property completely if not set as a prop.
83+
if (!this.props.config.cardNumber) {
84+
delete config.cardNumber;
85+
}
86+
87+
// Frames throws an error if the expiryDate object is mentioned but not defined
88+
// To avoid this we remove the property completely if not set as a prop.
89+
if (!this.props.config.expiryDate) {
90+
delete config.expiryDate;
91+
}
92+
93+
// Frames throws an error if the cvv object is mentioned but not defined
94+
// To avoid this we remove the property completely if not set as a prop.
95+
if (!this.props.config.cvv) {
96+
delete config.cvv;
97+
}
98+
7199
// Frames throws an error if the modes object is mentioned but not defined
72100
// To avoid this we remove the property completely if not set as a prop.
73101
if (!this.props.config.modes) {

‎src/frames/components/scheme-choice.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import classNames from 'classnames';
3+
import { SCHEME_CHOICE_FRAME } from '../config/config';
4+
5+
export const SchemeChoice: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
6+
className,
7+
...props
8+
}) => <div className={classNames(SCHEME_CHOICE_FRAME, className)} {...props} />;

‎src/frames/config/config.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ export const CARD_NUMBER_FRAME = 'card-number-frame';
33
export const EXPIRY_DATE_FRAME = 'expiry-date-frame';
44
export const CVV_FRAME = 'cvv-frame';
55
export const CARD_FRAME = 'card-frame';
6+
export const SCHEME_CHOICE_FRAME = 'scheme-choice-frame';

‎src/frames/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,6 @@ export * from './components/card-number';
33
export * from './components/expiry-date';
44
export * from './components/cvv';
55
export * from './components/card-frame';
6+
export * from './components/scheme-choice';
7+
export * from './config/config';
68
export * from './Frames';

‎src/frames/types/types.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ export interface FramesLocalization {
1919
expiryMonthPlaceholder: string;
2020
expiryYearPlaceholder: string;
2121
cvvPlaceholder: string;
22+
cardSchemeLink?: string;
23+
cardSchemeHeader?: string;
2224
}
2325

2426
export type FramesLanguages = 'EN-GB' | 'ES-ES' | 'FR-FR' | 'DE-DE' | 'KR-KR' | 'IT-IT' | 'NL-NL';
@@ -42,6 +44,7 @@ export type Scheme =
4244
| 'Discover';
4345

4446
export type CardType = 'Credit' | 'Debit' | 'Prepaid' | 'Charge';
47+
export type PreferredScheme = 'mastercard' | 'visa' | 'cartes_bancaires';
4548
export type CardCategory = 'Consumer' | 'Commercial';
4649

4750
export interface FramesStyle {
@@ -85,6 +88,10 @@ export interface FramesCardholder {
8588
phone?: string | null;
8689
}
8790

91+
export interface SelectorChoiceType {
92+
frameSelector: string;
93+
}
94+
8895
export interface FramesInitProps {
8996
debug?: boolean;
9097
publicKey: string;
@@ -95,6 +102,10 @@ export interface FramesInitProps {
95102
cardholder?: FramesCardholder;
96103
localization?: FramesLanguages | FramesLocalization;
97104
modes?: Array<String>;
105+
schemeChoice?: SelectorChoiceType;
106+
cardNumber?: SelectorChoiceType;
107+
expiryDate?: SelectorChoiceType;
108+
cvv?: SelectorChoiceType;
98109
}
99110

100111
export interface FrameElement {
@@ -130,7 +141,9 @@ export interface FrameCardTokenizedEvent {
130141
expiry_month: string;
131142
expiry_year: string;
132143
scheme?: Scheme;
144+
scheme_local: string;
133145
last4: string;
146+
preferred_scheme?: PreferredScheme;
134147
bin: string;
135148
card_type?: CardType;
136149
card_category?: CardCategory;

0 commit comments

Comments
 (0)