# Creating a Payment Page

Integrating a payment page is the easiest way to start accepting payments on your website. Since Hyp Pay hosts the payment form for you, you don't have to worry about the security and complexity of handling sensitive card data yourself. This not only keeps your customers' information safe but also drastically simplifies your PCI compliance.

This page walks you through creating a payment page using the Hyp Pay API. Here's a quick look at the steps you'll take to set up your payment page:

1. [Create a payment page request](#create-a-payment-page-request)
2. [Redirect to the payment page on the frontend](#redirect-to-the-secure-payment-page-on-the-frontend)
3. [Handle payment completion redirect](#handle-the-redirect-back-to-your-website)
4. (Optional) [Validate the transaction](#validate-the-transaction)

## Create a payment page request

To get things started, you'll send an initial GET request to the Hyp Pay API from your application's backend. We call this an APISign request. You should send it to `https://pay.hyp.co.il/p/` with a few URL parameters:

* The `action` parameter should be set to `APISign`.
* The `What` parameter should be set to `SIGN`.
* The `Sign` parameter should be set to `True`.
* `Masof` should be set to your terminal number.
* `KEY` should be set to your Hyp Pay API key.
* `PassP` should be set to your Hyp Pay API password.

That's the bare minimum you need to get a payment page up and running.

Here's a sample minimal APISign request:

{% code overflow="wrap" %}

```http
https://pay.hyp.co.il/p/?action=APISign&What=SIGN&Sign=True&KEY=your-api-key&PassP=your-api-password&Masof=0010345518
```

{% endcode %}

You'll probably want to add more parameters to customize the payment page and make it easier to use. Here are some of the optional parameters you can include:

* Payment information:
  * `Amount` - The amount of the transaction.
  * `Coin` - The currency of the transaction. Supported values: `1` for ILS (used by default), `2` for USD, `3` for Euro, `4` for GBP.
  * `Tash` - The maximum number of payments that the customer can choose to make.
  * `Order` - The order number of the transaction to keep in your merchant system.
  * `sendemail` - Set this to `True` to send the customer an email confirmation of the transaction. ([Sending an invoice](/pay/invoicing/basic-invoicing.md) is configured separately.)
* Display options:
  * `tmp` - The template to use for the payment page.
  * `PageLang` - The language to use for the payment page (`HEB` for Hebrew or `ENG` for English).
* Customer information:
  * `UserId` - Your customer's Israeli ID.
  * `ClientName` - Your customer's first name.
  * `ClientLName` - Your customer's last name.
  * `street` - Your customer's street address.
  * `city` - Your customer's city.
  * `email` - Your customer's email address.
  * `cell` - Your customer's mobile phone number.

Make sure to URL-encode all parameter values before constructing the request URL — your programming language's built-in URL encoding function should do the trick. While it won't make a big difference for the basic request we showed above, you'll need to be careful when adding more parameters with values that you don't control.

Here's a more realistic APISign request. This one is for a 10 NIS payment, includes an internal order number and customer info, and uses an English UI with a specific template (number two):

{% code overflow="wrap" %}

```http
https://pay.hyp.co.il/p/?action=APISign&What=SIGN&Sign=True&KEY=your-api-key&PassP=your-api-password&Masof=0010345518&Amount=10&Order=12345678910&tmp=2&PageLang=ENG&UserId=203269535&ClientName=Jenny&ClientLName=Parkington&street=HaDekel%2014&city=Rishon%20LeZion&email=jennyp@example.co.il&cell=0504999999
```

{% endcode %}

When you send this request, the API will send back a response like this:

{% code overflow="wrap" %}

```http
Amount=10&ClientLName=Parkington&ClientName=Jenny&Masof=0010345518&Order=12345678910&PageLang=ENG&Sign=True&UserId=203269535&action=pay&cell=0504999999&city=Rishon%20LeZion&email=jennyp%40example.co.il&street=HaDekel%2014&tmp=2&signature=0806fe45b00f11d4b3f3392d894fbfe8be372bb3822ae83fef87831c7c35426a
```

{% endcode %}

This response is just a set of URL query parameters. Most of them are the same as in the initial APISign request, but you'll notice the `action` parameter has changed to `pay` and a `signature` parameter has been added.

## Redirect to the secure payment page on the frontend

As soon as your backend gets the response from the APISign request, just append the entire response to `https://pay.hyp.co.il/p/?`.

For example, for the APISign request response shown above, your resulting payment page URL would be:

{% code overflow="wrap" %}

```http
https://pay.hyp.co.il/p/?Amount=10&ClientLName=Parkington&ClientName=Jenny&Masof=0010345518&Order=12345678910&PageLang=ENG&Sign=True&UserId=203269535&action=pay&cell=0504999999&city=Rishon%20LeZion&email=jennyp%40example.co.il&street=HaDekel%2014&tmp=2&signature=0806fe45b00f11d4b3f3392d894fbfe8be372bb3822ae83fef87831c7c35426a
```

{% endcode %}

Notice how the entire response is added to the URL, with all parameters in the exact same order — no extra processing needed.

Now, pass the resulting URL to your frontend and redirect the customer to it.

## Wait for the customer to enter payment details

When you've redirected the customer to the payment page, they'll see a page similar to this:

![Payment page](/files/Lsssg8GnicZbo4i8zT0D)

The customer then fills in their card information, selects the number of payments they want to make, and clicks the **Pay** button.

Hyp Pay handles all the card processing and validation for you. No card data ever touches your servers, which is great because you don't have to deal with strict PCI DSS requirements — Hyp Pay handles that heavy lifting for you.

Once the payment is processed, Hyp Pay will:

* If the payment succeeded, redirect the customer to your success page.
* If the payment failed, show an error or redirect to your error page (depending on how you [configured your success and error pages](/pay/getting-started/prerequisites-and-initial-setup.md#configure-success-and-error-pages)).

## Handle the redirect back to your website

If the payment is successful, the customer will be redirected back to your success page. When this happens, Hyp Pay passes a query string with several parameters — we usually call this a **payment completion redirect**.

Below is a sample success page URL with its query parameters:

{% code overflow="wrap" %}

```http
https://your-merchant-website.com/success.html?Id=408941655&CCode=0&Amount=10&ACode=0505293&Order=12345678910&Fild1=Jenny%20Parkington&Fild2=jennyp%40example.co.il&Fild3=&Sign=a84b11187377554427f267a9139ad4fd7daf7fb661dd668a9b954cf41cd25904
```

{% endcode %}

For redirects to the success page, you should save these parameters as they are useful in two ways:

1. You can validate the transaction using the `Sign` parameter.
2. You can save select transaction information to your internal customer database.

{% hint style="info" %}
In addition to handling the payment completion redirect, you may want to use webhooks as a transaction status delivery mechanism.

Webhooks provide a reliable server-to-server fallback in case the client-side redirect doesn't return a response due to connectivity issues. They are sent asynchronously (usually within a minute) for all transaction results. If your server is down, we retry sending every 10 minutes for up to 4 hours and 40 minutes.

To enable webhooks for your terminal, contact Hyp support by phone (\*6488, extension 3) or via [WhatsApp](https://wa.me/972732345000).
{% endhint %}

## Validate the transaction

While it's not strictly required, we definitely recommend [validating](/pay/security/transaction-validation.md) the transaction to make sure nothing was tampered with in transit.

To do this, have your backend make a GET request to `https://pay.hyp.co.il/p/` with these parameters:

* The `action` parameter set to `APISign`.
* The `What` parameter set to `VERIFY`.
* `Masof` set to your terminal number.
* `KEY` set to your Hyp Pay API key.
* `PassP` set to your Hyp Pay API password.
* All parameters passed to your success page URL, in the same order.

Here's what a validation request might look like based on the success page URL from the previous section:

{% code overflow="wrap" %}

```http
https://pay.hyp.co.il/p/?action=APISign&What=VERIFY&Masof=0010345518&KEY=your-api-key&PassP=your-api-password&Id=408941655&CCode=0&Amount=10&ACode=0505293&Order=12345678910&Fild1=Jenny%20Parkington&Fild2=jennyp%40example.co.il&Fild3=&Sign=a84b11187377554427f267a9139ad4fd7daf7fb661dd668a9b954cf41cd25904
```

{% endcode %}

If validation goes well, Hyp Pay will return a response with status code 0:

```
CCode=0
```

And that's it! You're now ready to deliver your product or service.

You might also want to save any transaction details you need from the payment completion redirect to your internal database. Once that's done, you can go ahead and discard any redirect parameters you don't need.

That covers the basics of the payment flow. If you want to see what else you can do with your payment pages, check out topics like:

* [Saving a Card Token](/pay/common-use-cases/tokenization.md)
* [Sending Payment Links via SMS or Email](/pay/common-use-cases/send-payment-links.md)
* [Postponing Transactions](/pay/common-use-cases/postponing-transactions.md)
* [Managing Recurring Payments](/pay/advanced-features/recurring-payments.md)
* [Handling Two-Phase Commits](/pay/advanced-features/two-phase-commits.md)

For more customization options, see [Customizing Payment Page Design](/pay/common-use-cases/customizing-payment-page-design.md).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.hyp.co.il/pay/getting-started/creating-a-payment-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.