Skip to main content

Accept an Online Payment

Securely accept payments online.

Build a payment form or use a prebuilt checkout page to start accepting online payments.

Qashier-hosted page

This is a Qashier-hosted page for when platform is web. It looks like this image below.

Online Payment Checkout Session

Redirect your customer to Qashier Checkout [Client-side] [Server-side]​

Add a checkout button to your website that calls a server-side endpoint to create a Checkout Session.

<html>
  <head>
    <title>Buy cool new product</title>
  </head>
  <body>
    <form action="/create-checkout-session" method="POST">
      <button type="submit">Checkout</button>
    </form>
  </body>
</html>

A Checkout Session is the programmatic representation of what your customer sees when they’re redirected to the payment form. You can configure it with options such as:

You must populate success_url with the URL value of a page on your website that Checkout returns your customer to after they complete the payment.

Checkout Sessions expire 24 hours after creation by default.

After creating a Checkout Session, redirect your customer to the url of CheckoutSession returned in the response.

// This example sets up an endpoint using the Express framework.

const express = require('express');
const fetch = require('node-fetch');
const app = express();
const url = "https://api.qashier.com/v3/payment/qpay/checkout/sessions";

app.post('/create-checkout-session', async (req, res) => {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer YOUR_SECRET_KEY'
    },
    body: JSON.stringify({
      line_items: [
        {
          price_data: {
            currency: 'sgd',
            product_data: {
              name: 'T-shirt',
            },
            unit_amount: 2000,
          },
          quantity: 1,
        },
      ],
      expires_at: 1234,
      success_url: 'http://localhost:4242/success',
    })
  });
  
  const data = await response.json();
  res.redirect(303, data.session.url);
});

app.listen(4242, () => console.log(`Listening on port ${4242}!`));

Payment methods​

By default, Qashier enables cards and other common payment methods that you have enabled(You can check on Qashier HQ).

Confirm your endpoint​

Confirm your endpoint is accessible by starting your web server (for example, localhost:4242) and running the following command:

curl -X POST -is "http://localhost:4242/create-checkout-session" -d ""

You should see a response in your terminal that looks like this:

HTTP/1.1 303 See Other
Location: https://qpay.qashier.com/c/pay/cs_test_...
...

Testing​

You should now have a working checkout button that redirects your customer to Qashier Checkout.

  1. Click the checkout button.
  2. You’re redirected to the Qashier Checkout payment form.

If your integration isn’t working:

  1. Open the Network tab in your browser’s developer tools.
  2. Click the checkout button and confirm it sent an XHR request to your server-side endpoint (POST /create-checkout-session).
  3. Verify the request is returning a 200 status.
  4. Use console.log(session) inside your button click listener to confirm the correct data returned.

Show a success page [Client-side] [Server-side]​

It’s important for your customer to see a success page after they successfully submit the payment form. Host this success page on your site.

Create a minimal success page:

<html>
  <head><title>Thanks for your order!</title></head>
  <body>
    <h1>Thanks for your order!</h1>
    <p>
      We appreciate your business!
      If you have any questions, please email
      <a href="mailto:orders@example.com">orders@example.com</a>.
    </p>
  </body>
</html>

Next, find the new transaction in the Qashier HQ Dashboard. Successful payments appear in the Dashboard’s Transaction. When you click a payment, it takes you to the payment details page.

Handle post-payment events​

Qashier sends a checkout.session.completed event when a customer completes a Checkout Session payment. It might trigger you to:

  • Send an order confirmation email to your customer.
  • Log the sale in a database.
  • Start a shipping workflow.

Listen for these events rather than waiting for your customer to be redirected back to your website. Triggering fulfilment only from your Checkout landing page is unreliable. Setting up your integration to listen for asynchronous events.

Handle the following events when collecting payments with the Checkout:

EventDescriptionAction
checkout.session.completedSent when a customer successfully completes a Checkout Session.Send the customer an order confirmation and fulfill (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) their order.
checkout.session.expiredSent when a Checkout Session is expired, either automatically or manually.

Test your integration​

To test your Qashier-hosted payment form integration:

  1. Create a Checkout Session.
  2. Fill out the payment details with a method from the following table.
    • Enter any future date for card expiry.
    • Enter any 3-digit number for CVC.
    • Enter any billing postal code.
  3. Click Pay. You’re redirected to your success_url.
  4. Go to Qashier HQ and look for the payment on the Transactions page. If your payment succeeded, you’ll see it in that list.
  5. Click your payment to see more details, like a Checkout summary with billing information and the list of purchased items. You can use this information to fulfil the order.

Cards​

Card numberScenarioHow to test
4242424242424242The card payment succeeds and doesn’t require authentication.Fill in the credit card form using the credit card number with any expiry date, CVC, and postal code.
4000002500003155The card payment requires authentication (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase).Fill in the credit card form using the credit card number with any expiry date, CVC, and postal code.
4000000000009995The card is declined with a decline code like insufficient_funds.Fill in the credit card form using the credit card number with any expiry date, CVC, and postal code.
6205500000000000004The UnionPay card has a variable length of 13-19 digits.Fill in the credit card form using the credit card number with any expiry date, CVC, and postal code.

Test cards​

NumberDescription
4242 4242 4242 4242Succeeds and immediately processes the payment.
4000 0000 0000 3220Requires 3D Secure 2 authentication for a successful payment.
4000 0000 0000 9995Always fails with a decline code of insufficient_funds.

Disclose Qashier to your customers​

Qashier collects information on customer interactions with Elements to provide services to you, prevent fraud, and improve its services. This includes using cookies and IP addresses to identify which Elements a customer saw during a single checkout session. You’re responsible for disclosing and obtaining all rights and consents necessary for Qashier to use data in these ways. For more information, visit our TBD privacy center.

Was this page helpful?