Skip to content

Commit b67a42d

Browse files
merging with main
2 parents cc96c51 + 9e8def3 commit b67a42d

27 files changed

+5122
-409
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
.env.development.local
1818
.env.test.local
1919
.env.production.local
20+
.env
2021

2122
npm-debug.log*
2223
yarn-debug.log*

blog/2019-05-28-first-blog-post.md

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

blog/2019-05-29-long-blog-post.md

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

blog/2021-08-01-mdx-blog-post.mdx

Lines changed: 0 additions & 20 deletions
This file was deleted.
Binary file not shown.

blog/2021-08-26-welcome/index.md

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

blog/authors.yml

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

config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"index_name": "dev_PayTheory_SB",
33
"sitemap_urls": [
4-
"https://192.168.13.54:3000/sitemap.xml"
4+
"http://localhost:3000/sitemap.xml"
55
],
66
"sitemap_alternate_links": true,
77
"stop_urls": [
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
sidebar_position: 3
3+
---
4+
5+
## Error Observer
6+
7+
The **`errorObserver`** will fire when an error occurs anywhere inside the Pay Theory SDK. This is a good place to add any logic that should only be executed when an error occurs.
8+
9+
```jsx
10+
window.paytheory.errorObserver(error => {
11+
// Logic to respond to errors
12+
})
13+
```
14+
### Callback Argument
15+
The callback will be passed a string indicating what happened in the SDK. The string should start with one of the following error types:
16+
17+
- **`FIELD_ERROR`** : Issue with fields on the DOM when mounting.
18+
- **`NO_TOKEN`** : There was an error fetching the auth token when initializing the SDK.
19+
- **`NO_FIELDS`** : There were no fields found when mounting.
20+
- **`NOT_VALID`** : The fields are not yet valid when trying to submit a transaction or tokenize.
21+
- **`INVALID_PARAM`** : Parameters used to transact or tokenize are not valid parameters.
22+
- **`SESSION_EXPIRED`** : The SDK session has expired and is unable to send messages to Pay Theory.
23+
24+
Most errors will require the user to refresh the page and try again.
25+
26+
The exception to this is the NOT_VALID error which will require the user to change the data in the payment fields until you get a proper response to the valid observer and then you may try and transact or tokenize again.
Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
import Tabs from '@theme/Tabs';
6+
import TabItem from '@theme/TabItem';
7+
import Admonition from '@theme/Admonition';
8+
9+
<Tabs
10+
defaultValue="javascript"
11+
values={[
12+
{label: 'Javascript', value: 'javascript'},
13+
{label: 'Apple', value: 'apple'},
14+
{label: 'Android', value: 'android'},
15+
]}>
16+
<TabItem value="javascript">
17+
<h1>Accepting Online Payments </h1>
18+
<p>
19+
In this Quickstart, you will learn how to create, initiate, and test a payment.
20+
</p>
21+
<Admonition type="info" title="Before you start">
22+
<p>
23+
You will need access to your Pay Theory Sandbox. If you do not have a sandbox account, you can create one here.
24+
</p>
25+
<a href="https://start.merchant.dashboard.paytheory.com/settings" class="button button--secondary button--lg">Create Sandbox </a>
26+
&nbsp;&nbsp;&nbsp;
27+
<a href="https://start.merchant.dashboard.paytheory.com/settings" class="button button--secondary button--lg">Log in </a>
28+
</Admonition>
29+
30+
## 1. Importing the SDK
31+
In order to import your SKD, you will need to copy and paste your Import URL into the header of your code editor.
32+
33+
```
34+
<script src="https://austin.sdk.paytheory.com/index.js"> </script>
35+
```
36+
37+
## 2. Calling the paytheory SDK
38+
When you want to call a function from Pay theory SDK you eill need to use one of the following windowobjects:
39+
` paytheory ` or ` window.paytheory `
40+
41+
42+
## 3. Add Paytheory elements to your form
43+
You need to add the Pay Theory elements to your form. You can place these elements anywhere in your form and the SDK will place the hosted fields in the correct place.
44+
45+
```jsx
46+
<form>
47+
...
48+
‹div id = "pay-theory-credit-card"></div>
49+
<div id = "pay-theory-credit-card-zip"></div>
50+
...
51+
<form>
52+
53+
```
54+
## 4. Set up the event listeners
55+
After that, before you initialize the Pay Theory fields, you would need to invoke any event listeners.
56+
57+
<Admonition type="tip" title="Recommended Event Listeners">
58+
<p>The link below provides list of all event listeners available in the below link.</p>
59+
60+
<a href= "../../tutorial-extras/WEB/EVENT_LISTENERS" class="button button--secondary button--lg">View All Event Listeners</a>
61+
62+
</Admonition>
63+
64+
```jsx
65+
paytheory .errorobserver (error => {
66+
//Logic to respond to errors
67+
})
68+
69+
```
70+
## 5. Initialize the Paytheory fields
71+
After you have set up all the event listeners, you can initialize the pay theory fields by calling the
72+
` payTheoryFields ` function.
73+
74+
```jsx
75+
const API_KEY ='YOUR_API_KEY'
76+
paytheory.payTheoryFields({
77+
apiKey: API_KEY,
78+
})
79+
```
80+
<Admonition type="info" title="Find your API Key from Pay Theory Portal">
81+
<p>
82+
There may be cases where you may find it difficult to get your API Key from the portal. You can follow the below steps for easily finding it.
83+
&nbsp;&nbsp;
84+
<ol>
85+
<li>Log in to your Pay Theory Portal.</li>
86+
<li>Select the Settings page from the left-hand navigation menu.</li>
87+
<li>Select the Developer tab.</li>
88+
<li>Find the API Key (Public key for SDK).</li>
89+
<li>From here, you can copy the API key and paste it into your code editor.</li>
90+
</ol>
91+
</p>
92+
93+
</Admonition>
94+
<img src="/img/paytheory-API.jpg" alt="paytheory API" ></img>
95+
<br>
96+
</br>
97+
98+
99+
## 6. Once the fields are valid, Run Transaction
100+
The only required field for the transact parameters is the amount field. You can customize the transact function more.
101+
```jsx
102+
103+
//Amount passed in is in cents
104+
const AMOUNT = 1000
105+
106+
// Parameters that you will pass into the transact function. More details below.
107+
const TRANSACTING_PARAMETERS = {
108+
amount: AMOUNT
109+
}
110+
111+
let result = await paytheory.transact(TRANSACTING_PARAMETERS)
112+
113+
if (result.type === "SUCCESS") {
114+
// Logic to respond to successful transaction
115+
} else if (result.type === "FAILURE") {
116+
// Logic to respond to failed transaction
117+
} else if (result.type === "ERROR") {
118+
// Logic to respond to error
119+
}
120+
```
121+
122+
## View Full Code
123+
<Admonition type="info" title="View Full Code">
124+
<p>Click below link to download the files.</p>
125+
<a target="\_blank" href={require('/static/paytheory.zip').default} class="button button--secondary button--lg" download > Download </a>
126+
127+
</Admonition>
128+
129+
## Next Steps
130+
Once you are able to initiate the payment. You can use the below links
131+
132+
- [Styling Hosted Fields](./Styling)
133+
- [Error Handling](./Errorhandling)
134+
135+
136+
137+
138+
</TabItem>
139+
140+
141+
142+
143+
144+
145+
146+
147+
148+
149+
150+
151+
152+
153+
154+
155+
156+
157+
158+
159+
<TabItem value="apple">
160+
161+
# Accepting Online Payments
162+
In this Quickstart you will learn how to create, initiate and test a payment.
163+
164+
165+
:::info before you start
166+
167+
You will need access to your Pay Theory Sandbox. If you do not have a sandbox account you can create one here.
168+
169+
<a href="https://start.merchant.dashboard.paytheory.com/settings" class="button button--secondary button--lg">Create Sandbox</a>
170+
&nbsp;&nbsp;&nbsp;
171+
<a href="https://start.merchant.dashboard.paytheory.com/settings" class="button button--secondary button--lg">Log in</a>
172+
173+
:::
174+
175+
</TabItem>
176+
<TabItem value="android">
177+
178+
# Accepting Online Payments
179+
In this Quickstart you will learn how to create, initiate and test a payment.
180+
181+
182+
:::info before you start
183+
184+
You will need access to your Pay Theory Sandbox. If you do not have a sandbox account you can create one here.
185+
186+
<a href="https://start.merchant.dashboard.paytheory.com/settings" class="button button--secondary button--lg">Create Sandbox</a>
187+
&nbsp;&nbsp;&nbsp;
188+
<a href="https://start.merchant.dashboard.paytheory.com/settings" class="button button--secondary button--lg">Log in</a>
189+
190+
:::
191+
</TabItem>
192+
</Tabs>
193+
194+
195+
196+
197+
198+

0 commit comments

Comments
 (0)