Create a `payment_token`

A payment token represents an order or a purchase. The first step to open up a Layer payment page on your website or checkout page is to create a payment_token.

A payment_token can be created by referring to create payment token API. This API should be always called from your server. You will receive payment_token as a response from create payment token API.

❗️
Always call payment token API from server side!
This API has critical information related to your order and shouldn't be called directly via AJAX or from client side languages. Ensure that payment token is always generated from your server side and passed to your client side.

Trigger Layer payment page on your website or checkout page

<html>
<!-- To make Layer checkout responsive on your checkout page.-->
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!--Please add either of the following script to your HTML depending up on your environment-->

<!--For Sandbox--> 
<script id="context" type="text/javascript" 
src="https://sandbox-payments.open.money/layer"></script>

<!--OR-->

<!--For Production-->
<script id="context" type="text/javascript"
src="https://payments.open.money/layer"></script>

<body>
  <script>

//You can bind the Layer.checkout initialization script to a button click event.
//Binding inside a click event open Layer payment page on click of a button
 Layer.checkout({
        token: "payment_token",
        accesskey: "access_key",
        theme: {
            logo : "https://open-logo.png",
            color: "#3d9080",
            error_color : "#ff2b2b"
          }
    },
    function(response) {
    
        if (response.status == "captured") {
           // response.payment_token_id
           // response.payment_id
           window.location.href = "success_redirect_url";

        } else if (response.status == "created") {


        } else if (response.status == "pending") {


        } else if (response.status == "failed") {
          window.location.href = "failure_redirect_url";

        } else if (response.status == "cancelled") {
          window.location.href = "cancel_redirect_url";
        }
    },
    function(err) {
        //integration errors
    }
);
</script>
</body>

Layer.checkout expects two parameters to initiate and trigger the Layer payment page. One is the payment_token which you got from the previous step and the access_key.

Additionally Layer.checkout also accepts theme object as an optional parameter.

Theme object

The theme object takes on the following keys:

color — Main color of Layer will be changed to this
Note : Only accepts hex code colors. Default color is applied if this key does not exist or proper value has not been passed.

error_color —Error color (icons/ error lines / error messages) of Layer will be changed to this
Note : Only accepts hex code colors. Optional key parameter. Default color is applied if this key does not exist or proper value has not been passed.

logo - Logo is changed to image source passed.
Note : If image source is not available, default Open logo will be used. Image might take time to
load depending on size of the image.

📘
What is an access_key ?
access_key is a unique key which you can generate from your Open dashboard. You can either generate a sandbox access_key or production access_key depending upon your environment. access_key is considered as a public key and is safe to be passed from client side. You can relate access_key to a username. However you should NEVER expose your secret_key and is considered sensitive as a password.

Layer.checkout gives the below callback events in the block function(response) {} which will help you show appropriate transaction messages to your customer.

created - The event is triggered when the Layer payment page is opened. You do not need to take any action.

pending - Customer has been redirected to bank’s login page or 3d secure page. You do not need to take any action.

captured - Transaction is successful. You can redirect your user to your success page. Use this success only to redirect your user to a success page. Do not rely on captured event from Layer callback to process an order. When you receive captured, always cross-check the transaction status by polling on status check API with payment_token_id to confirm the transaction status.

failed - Transaction has been failed. Layer allows your customers to retry a transaction if it is failed by the bank letting your customer choose other payment modes. You do not need to take any action unless you do not want your customer to retry transaction.

cancelled - Layer payment page has been loaded, but your customer clicked on the cancel button without initiating the payment. In such scenarios, payment_id will be null. You can show a transaction cancelled page to your customer or let customer re-initiate the transaction. You can still use the same payment_token to re-trigger Later.checkout on click of Pay.