# Skrape Inline (Pop-Up)

Skrape is the simplest solution to accept payments on your website. Simply integrate our lightweight JavaScript library on your checkout page, and call the SkrapeCheckout() function when the customer clicks on your payment button. We take care of the payment process and notify you when it's completed.

\
This guide will demonstrate how to utilize the Skrape Inline feature on your website.

### API Payload

<table><thead><tr><th width="191">Key</th><th width="103">Type</th><th width="111">Required</th><th>Description</th></tr></thead><tbody><tr><td>api_key</td><td>string</td><td>Yes</td><td>API key provided by Skrape to identify the merchant.</td></tr><tr><td>token_name</td><td>string</td><td>Yes</td><td>The name of the token or currency to be used for the transaction.</td></tr><tr><td>network_name</td><td>string</td><td>Yes</td><td>The blockchain network on which the transaction will be made, "testnet" or "mainnet"</td></tr><tr><td>tx_ref</td><td>string</td><td>No</td><td>A unique reference number for the transaction.</td></tr><tr><td>amount</td><td>string</td><td>Yes</td><td>Amount to be paid</td></tr><tr><td>customer</td><td>object</td><td>Yes</td><td>Holds the customer firstname, last name, email</td></tr><tr><td>customer.email</td><td>string</td><td>Yes</td><td>The email of the customer.</td></tr><tr><td>customer</td><td>object</td><td>Yes</td><td>It holds the customer email, first name, last name</td></tr><tr><td>customer.first_name</td><td>string</td><td>No</td><td>The first name of the customer.</td></tr><tr><td>customer.last_name</td><td>string</td><td>No</td><td>The last name of the customer.</td></tr><tr><td>customization</td><td>object</td><td>Yes</td><td>It holds the transaction title, description</td></tr><tr><td>customization.title</td><td>string</td><td>Yes</td><td>Customization title</td></tr><tr><td>customization.description</td><td>string</td><td>No</td><td>Customization description</td></tr><tr><td>callback_url</td><td>string</td><td>No</td><td>Callback url where the result will be posted after the payment is completed successfully</td></tr><tr><td>callback</td><td>function</td><td>No</td><td>Callback function that will be called after the payment is completed successfully with response object</td></tr><tr><td>onClose</td><td>function</td><td>No</td><td>Callback function that will be called when the transaction was not completed, window closed.</td></tr></tbody></table>

### Guide

* First, include the Inline library from Skrape using a script tag:

```html
<script src="https://skrape-inline.vercel.app/skrape-inline-checkout.js"></script>
```

* After that, include a payment button, which customer clicks after reviewing their order and ready to make a payment, attach an onclick event to the button that calls a custom JS function named payWithSkrape().

```html
<button type="submit" onclick="payWithSkrape()">Pay</button>
```

* Finally, within the PayWithSkrape() function, invoke the function named SkrapeCheckout() with some specific parameters.

```javascript
function payWithSkrape(e) {
    e.preventDefault();

    SkrapeCheckout({
        api_key: "skr_live_3017cae7-6214-4423-af4d-1684c72d7ff9",
        token_name: "USDT",
        network_name: "testnet",
        tx_ref: 'tx323fdk35smnsd35sdn9slkdw' ,
        amount: 100,
        customer: {
            first_name: 'Charles',
            last_name: 'Real',
            email: 'charlesreal@gmail.com'
        },
        customization: {
            title: "NFT Merchandise Store",
            description: "Bringing together the Web3 community"
        },
        callback_url: 'https://charlesreal.com/',
        callback: function (response) {
            //this happens after the payment is completed successfully
            let reference = response.reference;
            alert('Payment complete! Reference: ' + reference + ', Status: ' + response.status);
        },
        onClose: function () {
            alert('Transaction was not completed, window closed.');
        }
    })
}
```

Please note that the script is given is just an example and you would need to replace the apikey, callback\_url and any other information with your own information

### Demo

<figure><img src="/files/rEyvC9VS7GPPFqtuZ6yo" alt=""><figcaption></figcaption></figure>

### How it works

This script is a simple JavaScript code that implements a payment form for making a payment using Skrape Checkout. The script does the following:

1. Includes the Skrape Checkout library by loading the script from the given url.
2. It binds the `payWithSkrape` function to the `submit` event of a form or onClick event e.t.c This means that when the form is submitted, the `payWithSkrape` function will be called.
3. In the `payWithSkrape` function, the function calls the SkrapeCheckout() function, passing it several options, that initiates the checkout process, to be able to process the payment.
4. The options passed to the SkrapeCheckout() function include:

* `api_key`: The API key for the Skrape service, which authenticates the website to interact with the Skrape service.
* `token_name`: The name of the token that the payment will be made in, which is "USDT" in this case.
* `network_name`: The name of the blockchain network that the token is on, which is "testnet" in this case.
* `tx_ref`: A unique reference for the transaction, generated using a combination of a random number and the current date and time.
* `amount`: The amount of the token that the customer will pay, which is obtained from the value of an element with an ID of "amount" on the website.
* `customer`: An object that contains information about the customer, such as their first and last name, and email. These values are obtained from elements on the website.
* `customization`: An object that contains the title and description of the payment, which are set to "test" and "Demo description", respectively.
* `callback_url`: A URL that the Skrape service will send a request to once the payment is complete.
* `callback`: A function that is called when the payment is complete, which receives a response object and alerts the user with the reference and status of the payment.
* `onClose`: A function that is called when the user closes the checkout window without completing the payment, which alerts the user that the transaction was not completed.

After this configuration is set, the checkout can be opened by calling the SkrapeCheckout() function on SkrapeCheckout.


---

# 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://skrape-docs.gitbook.io/skrape/accept-payments/skrape-inline-pop-up.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.