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

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

Guide

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

<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().

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

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

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: '[e-mail]'
        },
        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

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.