Wiki source code of Frontend API

Last modified by Asbjørn Ulsberg on 2018/07/05 12:48
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}}