This tutorial shows how to create credit card form, connected to 3rd party provider API – in this case to Wells Fargo’s Authorize.Net API. The tutorial provides only one usecase – sending credit card details – but using it as a guideline, you should be able to figure out how to connect to all Authorize.Net methods.
You will need Embedded API Adapter for this.
1. Set up an account with Authorize.Net and log in.
2. Go to “Settings” > “Keys and API” and obtain two keys there: API Login ID and Transaction Key. You might need to generate the last one.
2. Then, visit the website: /developer.authorize.net/api/reference/index.html
3. First – note two pieces of information:
HTTP Request Method: POST
Sandbox API Endpoint: /apitest.authorize.net/xml/v1/request.api
4. Scroll a bit down to âTest Your Authentication Credentialsâ and insert your API Login ID and Transaction Key into the form, then click . Once they are accepted, they will be populated into all example API calls on this sandbox website.
5. Scroll further down to âCharge a Credit Cardâ section. This tutorial will only show how to process payment through API. Other API calls can be done in similar way. Click TRY IT and JSON tabs. Copy entire JSON. Youâll need it in a minuteÂ in Kinetise.
6. Go back to Kinetise. Add (drag&drop) FORM widget to phone screen. We will deal with API-call settings in a moment, right now let’s focus on creating the form.
7. By default FORM widget comes with a TEXTINPUT subwidget (plus “Submit” button). Left-click on it, to open its properties panel on the right.
8. You can modify some propertiesÂ here, especially:
- formID – this would work as a name of a variable created within the application and used further to be passed to API. Let’s name it “cardnumber” for clarity.
- keyboard type – credit card consists of digits only, so let’s give user digits-only keyboard.
- watermark – can be used as instructions for the user
- validation rules – credit card number is 16-digits long number, consisting of digits only, so this can be defined as a ReGeX.
7. Add more TEXTINPUT fields to this FORM â at least three for card expiration year, month, as well as CVC code. FormID of each of those fields has to be unique, ideally name them: “cardnumber”, “year”, “month”, “cvc” . If you want to put some of TEXTINPUTSÂ next to each other, use Horizontal Container and put them in it. At the end, enter some dummy data into the form, but do not press Send button. Your credit card form should look like this:
8.Â Now the tricky part – connecting to API. Switch to Properties panel of the whole FORM widget. Make it send data to RESTfulAPI and click on the cog icon to open Request Settings popup.
9. Make sure the API call will beÂ made via POST method and paste that Sandbox URL from Authorize.net. Next, switch to BODY tab.
10. This is where you’ll need Embedded API Adapter. Kinetise apps send data in a default structure – JSON, as in “Original Request Body“. It is defined in /helpcenter.kinetise.com. If you are able to adjust your backend API to Kinetise default data structure, then you don’t need Embedded API Adapter at all. But if the API you want to connect to is an established one, and you are not able to adjust it – you will need Embedded API Adapter, which modifies the structure of sent data.
11. Authorize.Net API expects to receive a JSON as in the example you have copied from Authorize.Net sandbox website. Paste this JSON now into “Request Body Transform” field. This will be the JSON your mobile app actually sends to Authorize.Net API. Test it now by pressing TEST button – you will see the response confirming data was received.
12. However, pasted JSON had all the credit card data hardcoded and we need them dynamic – as mobile app user has entered them in the form. We’ll need to modify that parsed JSON a bit. Find “cardNumber” in it and replace its hardcoded value of “5424000000000015” with dynamic .form.cardnumber. Do the same for the other data fields. Ultimately you should replace this part of the JSON:
with this one:
“expirationDate”: (.form.year + “-” + .form.month),
13.Â That’s all, your work is done and you can compile the app. You could also collect more data in the form and pass them to API in the same way. Or use data stored in Local Variables of the application, such as user name and surname. In this case you’d need to first pass them to the FORM, by selecting LocalVariable from “dynamic params” dropdown under BODY tab and then using them in JSON as .params.variablename. How to create LocalVariables to be used throughout the app – you can check here:Â /helpcenter.kinetise.com/editor-tutorials?tutorial-detail=how-to-inject-variables-to-mobile-app-from-backend or just make any FORM widget store data in Local Variables.