Guides

Capture a payment using the Hosted Checkout Page

Suggest Edits

PayArc provides a hosted checkout page that you can use to complete transactions/checkout for Invoices or Manual Subscriptions. The hosted checkout page works across all types of devices and makes checkout easy for merchants and customers.

Let's assume you want to create an order for $100, with a 3% surcharge.

1. Retrieve your API access token

Log into the PAYARC Dashboard (https://dashboard.payarc.net), click on the "API" link in the left navigation bar, then click on the "Reveal Token" link on the API page.

Your API Access Token carries many privileges, please make sure to keep it secure. Do not share your API Access Token with anyone or on any websites like GitHub, client-side code, etc.

2. Create an order

POST https://testapi.payarc.net/v1/orders/

A PAYARC-hosted payment page that helps collect payments quickly. It works across devices and is designed to increase conversion. Checkout makes it easy to build a first-class payments experience.

This checkout is valid for one time only. Provide payment_form_url value from the response to the customers. The customers can use that url and open checkout page on any browser to make payments.

import http.client

conn = http.client.HTTPSConnection("testapi.payarc.net")
payload = 'amount=10000&surcharge_percent=3'
headers = {
  'Accept': 'application/json',
  'Content-Type': 'application/x-www-form-urlencoded',
  'Authorization': 'Bearer {{Access-Token-From-Payarc-Dashboard}}'
}
conn.request("POST", "/v1/orders/", payload, headers)
res = conn.getresponse()
data = res.read()
print(data.decode("utf-8"))

var https = require('follow-redirects').https;
var fs = require('fs');

var qs = require('querystring');

var options = {
  'method': 'POST',
  'hostname': 'testapi.payarc.net',
  'path': '/v1/orders/',
  'headers': {
    'Accept': 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded',
    'Authorization': 'Bearer {{Access-Token-From-Payarc-Dashboard}}'
  },
  'maxRedirects': 20
};

var req = https.request(options, function (res) {
  var chunks = [];

  res.on("data", function (chunk) {
    chunks.push(chunk);
  });

  res.on("end", function (chunk) {
    var body = Buffer.concat(chunks);
    console.log(body.toString());
  });

  res.on("error", function (error) {
    console.error(error);
  });
});

var postData = qs.stringify({
  'amount': '10000',
  'surcharge_percent': '3',
});

req.write(postData);

req.end();

var client = new HttpClient();
var request = new HttpRequestMessage(HttpMethod.Post, "https://testapi.payarc.net/v1/orders/");
request.Headers.Add("Accept", "application/json");
request.Headers.Add("Authorization", "Bearer {{Access-Token-From-Payarc-Dashboard}}");
var collection = new List<KeyValuePair<string, string>>();
collection.Add(new("amount", "10000"));
collection.Add(new("surcharge_percent", "3"));
var content = new FormUrlEncodedContent(collection);
request.Content = content;
var response = await client.SendAsync(request);
response.EnsureSuccessStatusCode();
Console.WriteLine(await response.Content.ReadAsStringAsync());


{  
  "id": "1P4R6gBz4MBq1zMx",  
  "payment_form_url": "https://checkout.payarc.net/pay/order/{{order_id}}?orderToken={{order_token}}",  
  "token": "{{PAYARC-generated-token}}"  
}

3. Add a Checkout Button And Form

Now let's add a checkout button to your webpage

First, retrieve the id and token from the Create Order response. These will be used by the PAYARC checkout library to generate the checkout model.

Then, include the payarc.js library in your page.

📘

The payarc.js library is available in a test version, for validating the payment, and a live version to be used when you are ready for production.

You can use the events paymentCompleted and paymentDeclined to handle the results of the payment.

Your customers can complete their payments using the form.

<style>
body {
  background: #f9f9f9;
  overflow-y: scroll;
  margin: 0;
}
</style>
<script>
function payarcCheckout(amount, orderId, orderToken) {
    const payArc = new PayArc({
        amount: amount,
        orderId: orderId,
        orderToken: orderToken,
        viewScheme: 'light'
    });
    payArc.renderModal();
    payArc.on('paymentCompleted', function() {
        payArc.closeModal();
        alert("Payment was Success");
    });
    payArc.on('paymentDeclined', function() {
        payArc.closeModal();
        alert("Payment Failed!");
    });
}
</script>

4. Check the order status

You can list a customer's orders based on a few parameters, using the order retrieval API: https://testapi.payarc.net/v1/orders/customer/get

import http.client

conn = http.client.HTTPSConnection("testapi.payarc.net")
payload = 'amount=9999&status=SUCCESS&customer_id=&order_name=&send_via=&created_at=2021-09-13'
headers = {
  'Authorization': 'Bearer {{Access-Token-From-Payarc-Dashboard}}',
  'Accept': 'application/json'
}
conn.request("GET", "/v1/orders/customer/get", payload, headers)
res = conn.getresponse()
data = res.read()
print(data.decode("utf-8"))

var https = require('follow-redirects').https;
var fs = require('fs');

var qs = require('querystring');

var options = {
  'method': 'GET',
  'hostname': 'api.payarc.net',
  'path': '/v1/orders/customer/get',
  'headers': {
    'Authorization': 'Bearer {{Access-Token-From-Payarc-Dashboard}}',
    'Accept': 'application/json'
  },
  'maxRedirects': 20
};

var req = https.request(options, function (res) {
  var chunks = [];

  res.on("data", function (chunk) {
    chunks.push(chunk);
  });

  res.on("end", function (chunk) {
    var body = Buffer.concat(chunks);
    console.log(body.toString());
  });

  res.on("error", function (error) {
    console.error(error);
  });
});

var postData = qs.stringify({
  'amount': '9999',
  'status': 'SUCCESS',
  'customer_id': '',
  'order_name': '',
  'send_via': '',
  'created_at': '2021-09-13'
});

req.write(postData);

req.end();

var client = new HttpClient();
var request = new HttpRequestMessage(HttpMethod.Get, "https://testapi.payarc.net/v1/orders/customer/get");
request.Headers.Add("Authorization", "Bearer {{Access-Token-From-Payarc-Dashboard}}");
request.Headers.Add("Accept", "application/json");
var collection = new List<KeyValuePair<string, string>>();
collection.Add(new("amount", "9999"));
collection.Add(new("status", "SUCCESS"));
collection.Add(new("customer_id", ""));
collection.Add(new("order_name", ""));
collection.Add(new("send_via", ""));
collection.Add(new("created_at", "2021-09-13"));
var content = new FormUrlEncodedContent(collection);
request.Content = content;
var response = await client.SendAsync(request);
response.EnsureSuccessStatusCode();
Console.WriteLine(await response.Content.ReadAsStringAsync());

ParameterDescription
Amount
Required
Numeric, Min Length: 1 , Max Length: 8		This is the amount of the orders. This must be a positive integer and represented in cents.
The minimum amount for testing a transaction in the test environment is $0.50
Examples: 9 → would equal $0.09;
99999 → would equal $999.99
Status
_Conditionally Required, if the field is present in the input data and must be one of the below values.
Allowable values: SUCCESS, FAILED, ORDER_UNDER_PROCESS		Current status of an order.
ORDER_UNDER_PROCESS is used when the order is sent to the customer but not yet paid.
Customer ID
Optional
Alpha numeric		Customer_ID the order is associated with. Customer IDs are created in the Create Customer API.
Order_name
Optional
String, Min Length: 0, Max Length: 191		The short description of the order. The description is added in the Create an Order API.
Send_via
Optional
Array, Allowable values: SMS,EMAIL, SMS,EMAIL		How you are sending the order to the customer (Email and/or SMS)
Created_at
Optional
Date (YYYY-MM-DD)		The date the order was created.
Example: 2023-01-23

Updated about 1 month ago