Skip to content

Commit 9ba78c6

Browse files
ioan-ghisoi-ckoioan-ghisoi-cko
committed
Use TouchableOpacity + Text for the SubmitButton:
- add better button customisability
1 parent bda8dc0 commit 9ba78c6

File tree

6 files changed

+217
-166
lines changed

6 files changed

+217
-166
lines changed

‎README.md‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,21 @@
77

88
Start accepting online card payments in just a few minutes with Frames. It's quick and easy to integrate, accepts online card payments from all major credit cards, and is customizable to your brand.
99

10-
1110
<p align="center">
1211
<img src="https://s3.gifyu.com/images/Untitled62eae8e0234fa129.gif" alt="Demo frames react native"/>
1312
</p>
1413

1514
# :nerd_face: How does it work?
16-
- Accepting card payments generally has 2 main stages. The first is collecting the *card details securely* (client-side), and the second is *processing a payment* via the API (server-side). Frames is addressing only the first stage. The server-side interaction can easily be achieved by using our various [server side SDKs](https://docs.checkout.com/integrate/sdks#SDKs-WebSDKlibraries).
15+
16+
- Accepting card payments generally has 2 main stages. The first is collecting the _card details securely_ (client-side), and the second is _processing a payment_ via the API (server-side). Frames is addressing only the first stage. The server-side interaction can easily be achieved by using our various [server side SDKs](https://docs.checkout.com/integrate/sdks#SDKs-WebSDKlibraries).
1717
- The Frames React Nave project provides customisable inputs for the card details with the core purpose of tokenising the sensitive information and giving back a secure token (alongside various card metadata, like the BIN information).
1818

19-
>Frames is meant to be used in conjunction with the rest of your checkout page elements as opposed to being an independent view. That way, you have full control of the UI, and you can implement other payment methods or collect other details (like billing details) alongside it.
19+
> Frames is meant to be used in conjunction with the rest of your checkout page elements as opposed to being an independent view. That way, you have full control of the UI, and you can implement other payment methods or collect other details (like billing details) alongside it.
2020
2121
<p align="center">
2222
<img src="https://s3.gifyu.com/images/FramesforAndroid.png" alt="Demo frames react native" width="500px"/>
2323
</p>
2424

25-
2625
# :rocket: Install
2726

2827
```bash
@@ -52,7 +51,7 @@ import {
5251
ExpiryDate,
5352
Cvv,
5453
SubmitButton,
55-
} from "frames-react-native";
54+
} from "./dist/index";
5655

5756
export default function App() {
5857
return (
@@ -76,13 +75,12 @@ export default function App() {
7675
<Cvv style={styles.cvv} placeholderTextColor="#9898A0" />
7776
</View>
7877

79-
<TouchableHighlight style={styles.button}>
80-
<SubmitButton
81-
title="Pay Now"
82-
onPress={() => console.log("merchant action")}
83-
color="#fff"
84-
/>
85-
</TouchableHighlight>
78+
<SubmitButton
79+
title="Pay Now"
80+
style={styles.button}
81+
textStyle={styles.buttonText}
82+
onPress={() => console.log("merchant action")}
83+
/>
8684
</Frames>
8785
</View>
8886
);
@@ -91,7 +89,7 @@ export default function App() {
9189
const styles = StyleSheet.create({
9290
container: {
9391
flex: 1,
94-
backgroundColor: "#000001",
92+
backgroundColor: "#000000",
9593
alignItems: "center",
9694
justifyContent: "flex-start",
9795
paddingTop: 80,
@@ -130,11 +128,14 @@ const styles = StyleSheet.create({
130128
},
131129
button: {
132130
height: 50,
133-
width: "100%",
134131
borderRadius: 5,
135-
backgroundColor: "#0E84FF",
136132
marginTop: 20,
137133
justifyContent: "center",
134+
backgroundColor: "#4285F4",
135+
},
136+
buttonText: {
137+
color: "white",
138+
fontSize: 16,
138139
},
139140
});
140141
```

‎__tests__/Integration.test.tsx‎

Lines changed: 63 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ describe("CardNumber", () => {
1515
it("triggers the card tokenization", async () => {
1616
const tokenized = jest.fn();
1717

18-
const { getByPlaceholderText, getByText } = render(
18+
const { getByPlaceholderText, getByTestId } = render(
1919
<Frames
2020
config={{
2121
publicKey: PK,
@@ -26,14 +26,18 @@ describe("CardNumber", () => {
2626
<CardNumber placeholder="card-number" />
2727
<ExpiryDate placeholder="expiry-date" />
2828
<Cvv placeholder="cvv" />
29-
<SubmitButton title="Pay Now" onPress={() => {}} />
29+
<SubmitButton
30+
title="Pay Now"
31+
testID={"submit-button"}
32+
onPress={() => {}}
33+
/>
3034
</Frames>
3135
);
3236

3337
let cardNumber = getByPlaceholderText("card-number");
3438
let expiryDate = getByPlaceholderText("expiry-date");
3539
let cvv = getByPlaceholderText("cvv");
36-
let pay = getByText("Pay Now");
40+
let pay = getByTestId("submit-button");
3741
fireEvent.changeText(cardNumber, "4242424242424242");
3842
fireEvent.changeText(expiryDate, "1128");
3943
fireEvent.changeText(cvv, "100");
@@ -47,7 +51,7 @@ describe("CardNumber", () => {
4751
it("fails the card tokenization when the card number is invalid", async () => {
4852
const failed = jest.fn();
4953

50-
const { getByPlaceholderText, getByText } = render(
54+
const { getByPlaceholderText, getByTestId } = render(
5155
<Frames
5256
config={{
5357
publicKey: PK,
@@ -58,14 +62,18 @@ describe("CardNumber", () => {
5862
<CardNumber placeholder="card-number" />
5963
<ExpiryDate placeholder="expiry-date" />
6064
<Cvv placeholder="cvv" />
61-
<SubmitButton title="Pay Now" onPress={() => {}} />
65+
<SubmitButton
66+
title="Pay Now"
67+
testID={"submit-button"}
68+
onPress={() => {}}
69+
/>
6270
</Frames>
6371
);
6472

6573
let cardNumber = getByPlaceholderText("card-number");
6674
let expiryDate = getByPlaceholderText("expiry-date");
6775
let cvv = getByPlaceholderText("cvv");
68-
let pay = getByText("Pay Now");
76+
let pay = getByTestId("submit-button");
6977
fireEvent.changeText(cardNumber, "12345");
7078
fireEvent.changeText(expiryDate, "1128");
7179
fireEvent.changeText(cvv, "100");
@@ -77,7 +85,13 @@ describe("CardNumber", () => {
7785

7886
it("throws when the pay button is outside of context", async () => {
7987
expect(() => {
80-
render(<SubmitButton title="Pay Now" onPress={() => {}} />);
88+
render(
89+
<SubmitButton
90+
title="Pay Now"
91+
testID={"submit-button"}
92+
onPress={() => {}}
93+
/>
94+
);
8195
}).toThrow(
8296
"It looks like you are trying to render the SubmitButton outside of the Frames Component."
8397
);
@@ -86,7 +100,7 @@ describe("CardNumber", () => {
86100
it("throws allow then use of the onPress handler", async () => {
87101
const press = jest.fn();
88102

89-
const { getByPlaceholderText, getByText } = render(
103+
const { getByPlaceholderText, getByTestId } = render(
90104
<Frames
91105
config={{
92106
publicKey: PK,
@@ -109,13 +123,17 @@ describe("CardNumber", () => {
109123
<CardNumber placeholder="card-number" />
110124
<ExpiryDate placeholder="expiry-date" />
111125
<Cvv placeholder="cvv" />
112-
<SubmitButton title="Pay Now" onPress={press} />
126+
<SubmitButton
127+
title="Pay Now"
128+
testID={"submit-button"}
129+
onPress={press}
130+
/>
113131
</Frames>
114132
);
115133
let cardNumber = getByPlaceholderText("card-number");
116134
let expiryDate = getByPlaceholderText("expiry-date");
117135
let cvv = getByPlaceholderText("cvv");
118-
let pay = getByText("Pay Now");
136+
let pay = getByTestId("submit-button");
119137
fireEvent.changeText(cardNumber, "4242424242424242");
120138
fireEvent.changeText(expiryDate, "1128");
121139
fireEvent.changeText(cvv, "100");
@@ -128,7 +146,7 @@ describe("CardNumber", () => {
128146
it("fails tokenization", async () => {
129147
const failed = jest.fn();
130148

131-
const { getByPlaceholderText, getByText } = render(
149+
const { getByPlaceholderText, getByTestId } = render(
132150
<Frames
133151
config={{
134152
publicKey: "pk_test_baabd05f-1cdb-43d9-851e-635a79f6e7ad", // this account does not have Visa enabled
@@ -143,14 +161,18 @@ describe("CardNumber", () => {
143161
<CardNumber placeholder="card-number" />
144162
<ExpiryDate placeholder="expiry-date" />
145163
<Cvv placeholder="cvv" />
146-
<SubmitButton title="Pay Now" onPress={() => {}} />
164+
<SubmitButton
165+
title="Pay Now"
166+
testID={"submit-button"}
167+
onPress={() => {}}
168+
/>
147169
</Frames>
148170
);
149171

150172
let cardNumber = getByPlaceholderText("card-number");
151173
let expiryDate = getByPlaceholderText("expiry-date");
152174
let cvv = getByPlaceholderText("cvv");
153-
let pay = getByText("Pay Now");
175+
let pay = getByTestId("submit-button");
154176
fireEvent.changeText(cardNumber, "4242424242424242");
155177
fireEvent.changeText(expiryDate, "0628");
156178
fireEvent.changeText(cvv, "100");
@@ -163,7 +185,7 @@ describe("CardNumber", () => {
163185
it("triggers the card tokenization with billing details", async () => {
164186
const tokenized = jest.fn();
165187

166-
const { getByPlaceholderText, getByText } = render(
188+
const { getByPlaceholderText, getByTestId } = render(
167189
<Frames
168190
config={{
169191
publicKey: PK,
@@ -186,14 +208,18 @@ describe("CardNumber", () => {
186208
<CardNumber placeholder="card-number" />
187209
<ExpiryDate placeholder="expiry-date" />
188210
<Cvv placeholder="cvv" />
189-
<SubmitButton title="Pay Now" onPress={() => {}} />
211+
<SubmitButton
212+
title="Pay Now"
213+
testID={"submit-button"}
214+
onPress={() => {}}
215+
/>
190216
</Frames>
191217
);
192218

193219
let cardNumber = getByPlaceholderText("card-number");
194220
let expiryDate = getByPlaceholderText("expiry-date");
195221
let cvv = getByPlaceholderText("cvv");
196-
let pay = getByText("Pay Now");
222+
let pay = getByTestId("submit-button");
197223
fireEvent.changeText(cardNumber, "4242424242424242");
198224
fireEvent.changeText(expiryDate, "1128");
199225
fireEvent.changeText(cvv, "100");
@@ -209,7 +235,7 @@ describe("CardNumber", () => {
209235
it("triggers the card tokenization with amex", async () => {
210236
const tokenized = jest.fn();
211237

212-
const { getByPlaceholderText, getByText } = render(
238+
const { getByPlaceholderText, getByTestId } = render(
213239
<Frames
214240
config={{
215241
publicKey: PK,
@@ -219,14 +245,18 @@ describe("CardNumber", () => {
219245
<CardNumber placeholder="card-number" />
220246
<ExpiryDate placeholder="expiry-date" />
221247
<Cvv placeholder="cvv" />
222-
<SubmitButton title="Pay Now" onPress={() => {}} />
248+
<SubmitButton
249+
title="Pay Now"
250+
testID={"submit-button"}
251+
onPress={() => {}}
252+
/>
223253
</Frames>
224254
);
225255

226256
let cardNumber = getByPlaceholderText("card-number");
227257
let expiryDate = getByPlaceholderText("expiry-date");
228258
let cvv = getByPlaceholderText("cvv");
229-
let pay = getByText("Pay Now");
259+
let pay = getByTestId("submit-button");
230260
fireEvent.changeText(cardNumber, "378282246310005");
231261
fireEvent.changeText(expiryDate, "1128");
232262
fireEvent.changeText(cvv, "1000");
@@ -239,7 +269,7 @@ describe("CardNumber", () => {
239269
it("triggers the card tokenization with minimal billing details", async () => {
240270
const tokenized = jest.fn();
241271

242-
const { getByPlaceholderText, getByText } = render(
272+
const { getByPlaceholderText, getByTestId } = render(
243273
<Frames
244274
config={{
245275
publicKey: PK,
@@ -260,14 +290,18 @@ describe("CardNumber", () => {
260290
<CardNumber placeholder="card-number" />
261291
<ExpiryDate placeholder="expiry-date" />
262292
<Cvv placeholder="cvv" />
263-
<SubmitButton title="Pay Now" onPress={() => {}} />
293+
<SubmitButton
294+
title="Pay Now"
295+
testID={"submit-button"}
296+
onPress={() => {}}
297+
/>
264298
</Frames>
265299
);
266300

267301
let cardNumber = getByPlaceholderText("card-number");
268302
let expiryDate = getByPlaceholderText("expiry-date");
269303
let cvv = getByPlaceholderText("cvv");
270-
let pay = getByText("Pay Now");
304+
let pay = getByTestId("submit-button");
271305
fireEvent.changeText(cardNumber, "4242424242424242");
272306
fireEvent.changeText(expiryDate, "1128");
273307
fireEvent.changeText(cvv, "100");
@@ -319,7 +353,13 @@ describe("CardNumber", () => {
319353
it("triggers throws if you render the submit button outside of context", async () => {
320354
let exception;
321355
try {
322-
render(<SubmitButton title="Pay Now" onPress={() => {}} />);
356+
render(
357+
<SubmitButton
358+
title="Pay Now"
359+
testID={"submit-button"}
360+
onPress={() => {}}
361+
/>
362+
);
323363
} catch (e) {
324364
exception = e;
325365
}

0 commit comments

Comments
 (0)