Integration Guide

HIPS Checkout is the best payment flow, on web and mobile. Checkout builds on hips.js to provide your users with a streamlined, mobile-ready payment experience that is constantly improving flow and payment options.

👍

You can integrate Checkout in as little as a single line of client-side code. As we release new HIPS features, we’ll automatically roll them out to your existing Checkout integration, so that you will always be using our latest technology and payment methods without needing to change a thing.

Checkout supports two different integrations:

• Inline iframe (Recommended) which seamless integrates in your current checkout page.
• Redirect to HIPS checkout page.

The following is a typical transaction flow for HIPS checkout.

1. Customer adds product to the cart and and proceeds to checkout.
2. Your system calls HIPS API Create Order with all items in the card and other costumer information.
3. You receive an order token from HIPS, example: UVWofp7AjHiRKNLjhUjMnhc3
4. You use the order token in hips.js for inline checkout (see below) or redirect the customer to HIPS hosted checkout page with the order token, example: https://checkout.hips.com/UVWofp7AjHiRKNLjhUjMnhc3.
5. When the customer has completed payment, the customer will be sent back to your store’s "thank you” page or if the inline iframe solution is used the store’s thank you page will just show after completed payment.
6. HIPS will now make a webhook callback to you, based on your webhooks settings in Hips Dashboard. If you want to provide additional specic webhooks, or prefer handling them centally, then you also can pass the hooks ➔ webhook_url when you create the order. Once you receive the webhook you should run the HIPS API View an order and check the status parameter to verify it to be successful.
7. When you fulfill the order (ship the order or deliver a service) you run the HIPS API Fulfill an order to collect the authorized funds. This is not necessary if you set fulfilled to true when you created the order.
8. Should you need to refund whole or part of an order, you run the HIPS API Revoke or refund

📘

Charge API

If you don’t want to use the checkout, and instead want to charge the customer direct within your own application. See the Charge API

JavaScript Examples

<script src="https://cdn.hips.com/js/v1/hips.js"></script>
  <script>
       Hips.checkout({
        token: 'UVWofp7AjHiRKNLjhUjMnhc3'
       });
  </script>

If you want to customize the inline checkout with own colors and fonts you can do that by providing some extra parameters:

<script src="https://cdn.hips.com/js/v1/hips.js"></script>
  <script>
       Hips.checkout({
        token: 'UVWofp7AjHiRKNLjhUjMnhc3',
        style: {
          'mainColor': 'BA68D1',
          'secondColor': 'C29ACE',
          'font': 'Comic Sans MS'
        }
       });
  </script>

🚧

You must replace UVWofp7AjHiRKNLjhUjMnhc3 with the order token received from HIPS for each new order.

📘

If you don’t want to use the inline iframe or hips.js you can redirect the customer to https://checkout.hips.com/ORDER_TOKEN_ID.