Postman API testing from web page... how to request token?

techead

techead

Honorary Master
Joined
Apr 11, 2008
Messages
12,185
Reaction score
48
Location
by the mountain
**Dummy info used below**

Hi

I'm busy with an exercise which involves creating a payment flow with 4 POST requests.

1. Create Token
2. Create Payment
3. Create Auth
4. Create Capture

I've setup the 4 individual post requests, and in their current form it all works, but it turns out the requirement in more complicated than I thought and need some help.

I'm calling an API in the first request to create a token, based on the supplied credit card details,

Code: 
{
  "token_type": "credit_card",
  "credit_card_cvv": "123",
  "card_number": "4111111111111111",
  "expiration_date": "10/29",
  "holder_name": "John Mark",
  "billing_address": {
    "country": "USA",
    "state": "NY",
    "city": "NYC",
    "line1": "fifth avenue 10th"
  }
}

I get a green 201 response, so all good in the hood. Response below,

Code: 
{
    "token": "aa89d44f-db79-4d0d-9562-a5b1745255a0",
    "created": "1551805228973",
    "pass_luhn_validation": true,
    "encrypted_cvv": "YmI1MTQ3ZjctYWU2Zi00Mjk3LThhOTYtOTQ5NjcwNjEyYWMwY3Z2X2RlbGltaXRlcnZhdWx0OnYxOm9HeDdpaWxicVV4YU5mVEtqU05zMFYyYWphenhIZUwreDV6M3V6YldSU2VvTWtjZ2pkUkdFN2RWSUhmdDVGcThsUXRaTyt4U3FUU3BrV1NCc25TYUFud0FmOFN6NXpTclVQTkdFV2hN",
    "token_type": "credit_card",
    "type": "tokenized",
    "state": "created",
    "bin_number": "411111",
    "vendor": "VISA",
    "card_type": "CREDIT",
    "issuer": "JPMORGAN CHASE BANK, N.A.",
    "level": "",
    "country_code": "USA"
}

That token is referenced in the 3rd request (which requires some copy-paste) but that isnt an issue right now....

I'm just passing on the info in the 1st request, but it turns out that I actually need to post that request (persons details/credit card info) through a webpage with a Javascript SDK and a secure fields form.

Can someone tell me how I go about posting that same request, but through a web page?

Information for reference

https://developers.paymentsos.com/docs/using-the-secure-fields-form.html
 
I think youre mixing up your options here. You can use the Secure Form OR the API to collect the customers info.. Not both. They do the same thing.

If you use the API , then you carry more risk for the customer whereas if you use the secure form the gateway handles more of the risk.

You have to pick which one to use. Above , you've gone with the API route. Next you need to implement https://developers.paymentsos.com/docs/accepting-card-payments.html

I'm pretty sure thats what the documentation is alluding to.
 
I can help you with your copy and paste.

First you need to have an environment in postman and in the environment create a variable to hold the token.
Add a postman test to your first call which will set the variable from the response, something like this:
var jsonData = JSON.parse(responseBody);
pm.environment.set("token", jsonData.token);
Click to expand...

Then in your third call you can use the token as a normal postman variable: {{token}}
 
retromodcoza said:
I think youre mixing up your options here. You can use the Secure Form OR the API to collect the customers info.. Not both. They do the same thing.

If you use the API , then you carry more risk for the customer whereas if you use the secure form the gateway handles more of the risk.

You have to pick which one to use. Above , you've gone with the API route. Next you need to implement https://developers.paymentsos.com/docs/accepting-card-payments.html

I'm pretty sure thats what the documentation is alluding to.
Click to expand...

Thanks for the response.

Let me see if I got this right. In Postman, Im using the API with a request that contains basically unencrypted data, which is obviously not a good idea. But for testing purposes, its fine.

My understanding, is that to make it more secure, the details are captured on a checkout page, and once you click that "buy" button, it then exchanges that info into a token. Essentially the same thing that I am doing in Postman, but instead of the API responding with a token, the Java SDK and "Secure Fields Form" is now doing the heavy lifting and sending the token...

Is that right?
 
Veroland said:
I can help you with your copy and paste.

First you need to have an environment in postman and in the environment create a variable to hold the token.
Add a postman test to your first call which will set the variable from the response, something like this:


Then in your third call you can use the token as a normal postman variable: {{token}}
Click to expand...

I'm new to this, so let me create the environment. Is that going to be a global variable?

So this might be a bit more tricky....

1st call creates the token and responds with (amongst other things) "token": "b55fa03b-9f35-4b07-9c6e-ff3c9f2bc9f2",

2nd call creates the payment and responds with (amongst other things) "id": "53876dcd-3aad-4f3a-af0d-18ad54d933a8",

There are 4 possible actions after the 2nd call. I am doing the Authorization option.

Code: 
"possible_next_actions": [
        {
            "action": "Credit",
            "href": "https://api.paymentsos.com/payments/53876dcd-3aad-4f3a-af0d-18ad54d933a8/credits"
        },
        {
            "action": "Charge",
            "href": "https://api.paymentsos.com/payments/53876dcd-3aad-4f3a-af0d-18ad54d933a8/charges"
        },
        {
            "action": "Authorization",
            "href": "https://api.paymentsos.com/payments/53876dcd-3aad-4f3a-af0d-18ad54d933a8/authorizations"
        },
        {
            "action": "Update Payment",
            "href": "https://api.paymentsos.com/payments/53876dcd-3aad-4f3a-af0d-18ad54d933a8"
        }
    ],

So the 3rd call needs to reference "token" in the body (created in the 1st step) and also needs to reference "id" in the API URL.

Is there a way to build all of that in without having to copy and paste all the time?
 
Last edited:
techead said:
So the 3rd call needs to reference "token" in the body (created in the 1st step) and also needs to reference "id" in the API URL.

Is there a way to build all of that in without having to copy and paste all the time?
Click to expand...

Let's say you have variable called myId, either as a global variable or a environment variable.

If you need to reference the id in the url you can just have your url look like this:
Code: 
https://myurl.com/somepath/{{myId}}

I like putting my variables in environments and add a variable for the endpoint. That makes it easy to use the same requests for dev, test etc. and easy to switch between them without changing the actual requests

Ps. You can put a variable anywhere (url's, headers, body etc.) by using the {{variable_name}} tags and postman will substitute it
 
Veroland said:
Let's say you have variable called myId, either as a global variable or a environment variable.

If you need to reference the id in the url you can just have your url look like this:
Code: 
https://myurl.com/somepath/{{myId}}

I like putting my variables in environments and add a variable for the endpoint. That makes it easy to use the same requests for dev, test etc. and easy to switch between them without changing the actual requests

Ps. You can put a variable anywhere (url's, headers, body etc.) by using the {{variable_name}} tags and postman will substitute it
Click to expand...

I got it all working :) Thank you so much...

Now to figure out how to generate a token using the Secure Fields form embedded into a HTML page.... I'm not proficient in Java or HTML so I'm gonna hit the wall on this one.... :(
 
techead said:
Thanks for the response.

Let me see if I got this right. In Postman, Im using the API with a request that contains basically unencrypted data, which is obviously not a good idea. But for testing purposes, its fine.

My understanding, is that to make it more secure, the details are captured on a checkout page, and once you click that "buy" button, it then exchanges that info into a token. Essentially the same thing that I am doing in Postman, but instead of the API responding with a token, the Java SDK and "Secure Fields Form" is now doing the heavy lifting and sending the token...

Is that right?
Click to expand...

That sounds correct. So now you're asking "how you do a post request from javascript instead of from POSTman?"

The answer is that they actually provide the javascript functions for you to do this. See here :
https://developers.paymentsos.com/docs/using-the-secure-fields-form.html

Dump the contents of this into an html page and change the settings to your test account.
See where it says " // Grab the token here " ? The variable called "result" will contain the needed token.

Code: 
<html>
<head> <title> My Payment Page </title> </head>
<body>

<script language="JavaScript" type="text/javascript" src="https://js.paymentsos.com/v2/latest/secure-fields.min.js"></script>
<script>POS.setPublicKey("99346d84-5186-4221-9c16-dc51a8de27fb");
</script>


<body>
  ...
  <!-- Embed the form after loading the Secure Fields Javascript SDK and setting your public key -->
  <form id="payment-form">
    <input type="text" id="cardholder-name" placeholder="John Doe" />
    <div id="card-secure-fields">
      <!-- The payment form will be displayed here -->
    </div>
    <button type=”submit”>Pay</button>
  </form>

  <!-- After embedding the form, set your environment, initialize the form's fields
   and send the data to PaymentsOS when the form is submitted -->
  <script>

    // Set your environment. Values are either "test" or "live".
    // If omitted, the test environment will be used.
    POS.setEnvironment("test");

    // Initialize the form's fields
    POS.initSecureFields('card-secure-fields');

    // Attach a click event to the form that is invoked when the
    // form is submitted. On submit, pass the card information to
    // PaymentsOS and receive the token representing the card
    // information in your site.
    document.getElementById('payment-form').addEventListener('submit', function(event) {
      event.preventDefault();
      const additionalData = {
        holder_name: document.getElementById('cardholder-name').value // This field is mandatory
      }
      POS.createToken(additionalData, function(result) {

        // Grab the token here

      });
    });
  </script>
</body>
</html>

If you dont know anything about javascript and html , I'm not sure you want to start by integrating payment gateways. This is a complex thing even at the best of times and you're going to need a lot of basic knowledge to do it.
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X