Skip to content

Commit 7cc7209

Browse files
s-yaguess-yagues
authored
Merge pull request #314 from lyra/KJS-2280.1
chore(examples): update examples to use renderElements method
2 parents b9ab56b + 25bb728 commit 7cc7209

31 files changed

+168
-289
lines changed

‎examples/angular/src/app/app.component.ts

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { firstValueFrom } from 'rxjs'
99
styleUrls: ['./app.component.css']
1010
})
1111
export class AppComponent implements AfterViewInit {
12-
title: string = 'Angular + KR.attachForm'
12+
title: string = 'Angular example'
1313
message: string = ''
1414

1515
constructor(private http: HttpClient, private chRef: ChangeDetectorRef) {}
@@ -41,11 +41,8 @@ export class AppComponent implements AfterViewInit {
4141
)
4242
.then(({ KR }) => KR.onSubmit(this.onSubmit))
4343
.then(({ KR }) =>
44-
KR.attachForm('#myPaymentForm')
45-
) /* Attach a payment form to myPaymentForm div*/
46-
.then(({ KR, result }) =>
47-
KR.showForm(result.formId)
48-
) /* show the payment form */
44+
KR.renderElements('#myPaymentForm')
45+
) /* Render the payment form into the specified selector*/
4946
.catch(error => {
5047
this.message = error.message + ' (see console for more details)'
5148
})

‎examples/angular/src/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title>MinimalExample</title>
5+
<title>Angular example</title>
66
<base href="/" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<link rel="icon" type="image/x-icon" href="favicon.ico" />

‎examples/ember/app/components/attach-form.js

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎examples/ember/app/components/attach-form.hbs renamed to ‎examples/ember/app/components/render-elements.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class='container'>
2-
<h1>Ember + KR.attachForm</h1>
2+
<h1>Ember Example</h1>
33
<div id='myPaymentForm'>
44
<div class='kr-smart-form'></div>
55
</div>

‎examples/ember/app/components/render-elements.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import KRGlue from '@lyracom/embedded-form-glue';
2+
import Component from '@glimmer/component';
3+
import { tracked } from '@glimmer/tracking';
4+
5+
export default class RenderElementsComponent extends Component {
6+
@tracked message = '';
7+
8+
constructor(...args) {
9+
super(...args);
10+
const endpoint = '~~CHANGE_ME_ENDPOINT~~';
11+
const publicKey = '~~CHANGE_ME_PUBLIC_KEY~~';
12+
let formToken = 'DEMO-TOKEN-TO-BE-REPLACED';
13+
14+
// Generate the form token
15+
fetch('http://localhost:3000/createPayment', {
16+
method: 'POST',
17+
headers: { 'Content-Type': 'application/json' },
18+
body: JSON.stringify({
19+
paymentConf: { amount: 10000, currency: 'USD' },
20+
}),
21+
})
22+
.then((res) => res.text())
23+
.then((resp) => {
24+
formToken = resp;
25+
return KRGlue.loadLibrary(endpoint, publicKey);
26+
})
27+
.then(({ KR }) =>
28+
KR.setFormConfig({
29+
/* set the minimal configuration */
30+
formToken: formToken,
31+
'kr-language': 'en-US' /* to update initialization parameter */,
32+
})
33+
)
34+
.then(({ KR }) =>
35+
KR.onSubmit((paymentData) => {
36+
fetch('http://localhost:3000/validatePayment', {
37+
method: 'POST',
38+
headers: { 'Content-Type': 'application/json' },
39+
body: JSON.stringify(paymentData),
40+
}).then((response) => {
41+
if (response.status === 200) this.message = 'Payment successful!';
42+
});
43+
return false; // Return false to prevent the redirection
44+
})
45+
) // Custom payment callback
46+
.then(({ KR }) =>
47+
KR.renderElements('#myPaymentForm')
48+
) /* create a payment form */
49+
.catch((error) => {
50+
this.message = error + ' (see console for more details)';
51+
});
52+
}
53+
}

‎examples/ember/app/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title>Emberjs</title>
5+
<title>Emberjs Example</title>
66
<meta name="description" content="" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<link

‎examples/ember/app/templates/application.hbs

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
{{page-title "Emberjs"}}
1+
{{page-title 'Emberjs'}}
22

3-
{{!-- The following component displays Ember's default welcome message. --}}
4-
<AttachForm />
5-
{{!-- Feel free to remove this! --}}
3+
{{! The following component displays Ember's default welcome message. }}
4+
<RenderElements />
5+
{{! Feel free to remove this! }}
66

77
{{outlet}}

‎examples/ember/package-lock.json

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

‎examples/ember/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,6 @@
6969
"edition": "octane"
7070
},
7171
"dependencies": {
72-
"@lyracom/embedded-form-glue": "1.3.1"
72+
"@lyracom/embedded-form-glue": "1.3.7"
7373
}
7474
}

0 commit comments

Comments
 (0)