# Wiki source code of Frontend API

Last modified by Asbjørn Ulsberg on 2018/07/05 12:48

#### Export

#### Office Formats

Export as PDF Export as ODT Export as RTF

#### Other Formats

Select the pages to export:

select all / none

Export as HTML
Show last authors

1 | (% id="H" %)
2 | == Add JavaScript reference ==
3 |
4 | Before implementing PayEx Checkout on your web site, you need to add a reference to the PayEx Checkout script to your page:
5 |
6 | {{code language="html"}}
7 | <script src="https://checkout.payex.com/js/payex-checkout.min.js"></script>
8 | {{/code}}
9 |
10 | Please note that the above URL points to **PayEx Checkout's production environment**. If you want to integrate with PayEx' test environment, [[please refer to the FAQ for the correct URLs>>doc:Main.ECommerce.PayEx Checkout.FAQ.WebHome]].
11 |
12 | == Basic usage ==
13 |
14 | The simplest way to implement PayEx Checkout in your frontend is with the {{code}}data-payex-checkout{{/code}} attribute.
15 |
16 | Choose the button you want to open the PayEx Checkout modal and add the attribute {{code}}data-payex-checkout{{/code}} with the value returned {{code}}paymentSessionUrl{{/code}} from the [[initial POST>>doc:Sandbox.payex-checkout-v1.WebHome||anchor="HStep1:Createpaymentsession"]]. Then add the {{code}}disable{{/code}} attribute - the PayEx Checkout script will enable it when it is properly loaded. The button should be wrapped inside a form that posts to your server.
17 |
18 | The PayEx Checkout script will submit the {{code}}<form>{{/code}} when the PayEx Checkout user flow is complete.
19 |
20 | HTML
21 |
22 | {{code language="html"}}
23 | <form action="<url_to_your_server>" method="post">
24 | <!-- ... -->
25 | <button data-payex-checkout="<payment_session_url>" disabled>Pay</button>
26 | </form>
27 | {{/code}}
28 |
29 | == Basic usage with options ==
30 |
31 | (% id="H" %)
32 | The PayEx Checkout script can be configured with options to get callbacks on certain events in the checkout user flow.
33 |
34 | Availialbe callbacks:
35 |
36 | * {{code}}onOpen{{/code}} // - Callback called when the PayEx Checkout modal is opened.//
37 | * {{code}}onClose{{/code}} // - Callback called when the PayEx Checkout modal is closed.//
38 | * {{code}}onError{{/code}} //- Callback called when PayEx Checkout is unable to open or complete a session.//
39 | * {{code}}onComplete{{/code}} // - Callback called when PayEx Checkout user flow is completed.//
40 |
41 | HTML
42 |
43 | {{code language="html"}}
44 | <form action="<url_to_your_server>">
45 | <!-- ... -->
46 | <button data-payex-checkout="<payment_session_url>" disabled>Pay</button>
47 | </form>
48 | {{/code}}
49 |
50 | JavaScript
51 |
52 | {{code language="JavaScript"}}
53 | payex.checkout("<payment_session_url>", {
54 | onClose: function(){
55 | console.log("The modal was closed");
56 | }
57 | });
58 |
59 | {{/code}}
60 |
61 | == Flexibility usage ==
62 |
63 | If you need more flexibility in your frontend, you can open the PayEx Checkout modal and post to your server programmatically.
64 |
65 | If you have added it, start by removing the {{code}}data-payex-checkout{{/code}} attribute to prevent the PayEx Checkout script to open and post automatically.
66 |
67 | You can open the checkout modal on demand with the {{code}}"open"{{/code}} argument and use the {{code}}onComplete{{/code}} callback to post to your server when the PayEx Checkout user flow is completed to continue with the [[Get Payment Status>>doc:Sandbox.payex-checkout-v1.WebHome||anchor="HStep4:Getpaymentstatus"]] step.
68 |
69 | Please note that Checkout must be opened with a [[trusted context>>https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted]] in order to prevent pop-up blockers. The code has a trusted context when it runs as result of an user action. Code running within async callbacks such as ajax and timeout loses trusted context, so make sure you have acquired a payment session url before the user click on your buy button.
70 |
71 |
72 | JavaScript
73 |
74 | {{code language="JavaScript"}}
75 | // Remember to remove the data-payex-checkout attribute if you implemented it.
76 |
77 | payex.checkout("<payment_session_url>", {
78 | onComplete: function() {
79 | // Post or send a ajax request to your server to get the payment status step
80 | }
81 | }, "open");
82 | {{/code}}
83 |
84 | == Reference ==
85 |
86 | === payex.checkout(paymentSessionUrl, options) ===
87 |
88 | Sets options for a payment session.
89 |
90 | ==== Arguments ====
91 |
92 | |(% style="text-align:right; width:126px" %)**Param**|(% style="width:1764px" %)**Details**
93 | |(% style="text-align:right; width:126px" %)(((
94 | {{code}}paymentSessionUrl{{/code}}
95 | (% style="color:LightGrey" %)string
96 | )))|(% style="width:1764px" %)A string of the URL to the Payment Session. This URL should be retrieved before page is rendered in the browser by completing the [[intial server-to-server POST request>>doc:Sandbox.payex-checkout-v1.WebHome||anchor="HStep1:Createpaymentsession"]].
97 | |(% style="text-align:right; width:126px" %)(((
98 | {{code}}options{{/code}}
99 | (% style="color:LightGrey" %)object(%%)
100 |
101 | )))|(% style="width:1764px" %)(((
102 | Set options for the payment session.
103 |
104 | * {{code}}onClose{{/code}} // function - Callback called when the PayEx Checkout modal is closed.//
105 | * {{code}}onOpen{{/code}} // function - Callback called when the PayEx Checkout modal is opened.//
106 | * {{code}}onError{{/code}} // function - Callback called when PayEx Checkout is unable to open or complete a session.//
107 | * {{code}}onComplete{{/code}} // function - Callback called when PayEx Checkout user flow is completed.//
108 | )))
109 |
110 | ==== Example ====
111 |
112 | {{code language="JavaScript"}}
113 | payex.checkout("<payment_session_url>", {
114 | onClose: function(){
115 | console.log("The modal was closed");
116 | }
117 | });
118 | {{/code}}
119 |
120 | === payex.checkout(paymentSessionUrl, command) ===
121 |
122 | Executes a PayEx Checkout action, such as opening the PayEx Checkout user flow.
123 |
124 | ==== Arguments ====
125 |
126 | |(% style="text-align:right; width:126px" %)**Param**|(% style="width:1764px" %)**Details**
127 | |(% style="text-align:right; width:126px" %)(((
128 | {{code}}paymentSessionUrl{{/code}}
129 | (% style="color:LightGrey" %)string
130 | )))|(% style="width:1764px" %)A string of the URL to the Payment Session. This URL should be retrieved before page is rendered in the browser by completing the [[intial server-to-server POST request>>doc:Sandbox.payex-checkout-v1.WebHome||anchor="HStep1:Createpaymentsession"]].
131 | |(% style="text-align:right; width:126px" %)(((
132 | {{code}}command{{/code}}
133 | (% style="color:LightGrey" %)string(%%)
134 |
135 | )))|(% style="width:1764px" %)(((
136 | The command to be excuted
137 |
138 | * {{code}}"open"{{/code}} // //- //Opens the PayEx Checkout user flow.//
139 | )))
140 |
141 | ==== Example ====
142 |
143 | {{code language="JavaScript"}}
144 | payex.checkout("<payment_session_url>", "open");
145 | {{/code}}
146 |
147 | === ===
148 |
149 | === payex.checkout(paymentSessionUrl, options, command) ===
150 |
151 | Sets options for a payment session and executes a PayEx Checkout action.
152 |
153 | ==== Arguments ====
154 |
155 | |(% style="text-align:right; width:126px" %)**Param**|(% style="width:1764px" %)**Details**
156 | |(% style="text-align:right; width:126px" %)(((
157 | {{code}}paymentSessionUrl{{/code}}
158 | (% style="color:LightGrey" %)string
159 | )))|(% style="width:1764px" %)A string of the URL to the Payment Session. This URL should be retrieved before page is rendered in the browser by completing the [[intial server-to-server POST request>>doc:Sandbox.payex-checkout-v1.WebHome||anchor="HStep1:Createpaymentsession"]].
160 | |(% style="text-align:right; width:126px" %)(((
161 | {{code}}options{{/code}}
162 | (% style="color:LightGrey" %)object(%%)
163 |
164 | )))|(% style="width:1764px" %)(((
165 | Set options for the payment session.
166 |
167 | * {{code}}onClose{{/code}} // function - Callback called when the PayEx Checkout modal is closed.//
168 | * {{code}}onOpen{{/code}} // function - Callback called when the PayEx Checkout modal is opened.//
169 | * {{code}}onError{{/code}} // function - Callback called when PayEx Checkout is unable to open or complete a session.//
170 | * {{code}}onComplete{{/code}} // function - Callback called when PayEx Checkout user flow is completed.//
171 | )))
172 | |(% style="text-align:right; width:126px" %){{code}}command{{/code}}
173 | (% style="color:LightGrey" %)string|(% style="width:1764px" %)(((
174 | The command to be excuted
175 |
176 | * {{code}}"open"{{/code}} // //- //Opens the PayEx Checkout user flow.//
177 | )))
178 |
179 | ==== Example ====
180 |
181 | {{code language="JavaScript"}}
182 | payex.checkout("<payment_session_url>", {
183 | onComplete: function() {
184 | // Your code goes here.
185 | }
186 | }, "open");
187 | {{/code}}
188 |
189 | === payex.checkout(options) ===
190 |
191 | Sets defaults options for all Payment Sessions.
192 |
193 | ==== Arguments ====
194 |
195 | |(% style="text-align:right; width:156px" %)**Param**|(% style="width:1322px" %)**Details**
196 | |(% style="text-align:right; width:156px" %)(((
197 | {{code}}options{{/code}}
198 | (% style="color:LightGrey" %)object(%%)
199 |
200 | )))|(% style="width:1322px" %)(((
201 | Set options for the payment session.
202 |
203 | * {{code}}onClose{{/code}} // function - Callback called when the PayEx Checkout modal is closed.//
204 | * {{code}}onOpen{{/code}} // function - Callback called when the PayEx Checkout modal is opened.//
205 | * {{code}}onError{{/code}} // function - Callback called when PayEx Checkout is unable to open or complete a session.//
206 | * {{code}}onComplete{{/code}} // function - Callback called when PayEx Checkout user flow is completed.//
207 | )))
208 |
209 | ==== Example ====
210 |
211 | {{code language="JavaScript"}}
212 | payex.checkout({
213 | onOpen: function(){
214 | console.log("The modal was opened");
215 | }
216 | });
217 | {{/code}}

# Applications

# Tips

Did you know that you can improve XWiki? Take 5 minutes to fill this survey and help this open source project!

# Need help?

If you need help with XWiki you can contact:

- Community Support
- Professional Support