Widget payments

Connection

To embed a payment widget on your site, you need to include a JavaScript code on the payment page.

<script src="https://psp.paymaster.tn/cpay/sdk/payment-widget.js"></script>

To display the widget, you need to call the initialization function, passing the necessary parameters there.

function pay () {

    var paymentWidget = new cpay.PaymentWidget();

    paymentWidget.init({
        merchantId: "cf128151-127b-44ed-bde5-26c531cad20d",
        invoice: {
            description: "test payment"
        },
        amount: {
            value: 10.50,
            currency: "TND"
        }
    });
}

The initialization function can be called, for example, by pressing the "Pay" button.

<button onclick="pay()">Pay</button>

Description of parameters

In requests, mandatory parameters are highlighted in bold.

Additional fields

For fields with select and checkbox types, you can specify an additionalAmount, which will be automatically added to the main amount of the invoice, depending on the choice of the payer.

If you want the payer to specify the amount himself, then amount.value must be set to 0 and add a field with type input and name amount. The field must be required.

Also, if you want the payer to choose the amount himself, then amount.value must be set to 0 and add a field with the select type, in which all selectOptions contain additionalAmount. The field must also be required.

In order for the payer to indicate his e-mail or phone number, you need to add a field with the input type and the name customerEmail or customerPhone respectively. The fields may be optional.

Creating an invoice via API

If you use API to create an invoice and want to use a payment widget, then the resulting payment link must be passed to the initialization function.

var paymentWidget = new cpay.PaymentWidget();

paymentWidget.init({
    invoice: {
        url: "https://psp.paymaster.tn/cpay/a62beecb68c84778b2424294f635b370"
    }
});