|
| 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 | + |
| 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 | + |
| 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 | + |
| 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 | + |
| 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