CloudPayments

Payment widget is a pop-up for used to enter card information and the email of the payer. The form can only be loaded from the system addresses, since this will ensure the confidentiality of card data.

Embedding

To integrate the widget, you need to add a script into the head element of your site's markup.

            <script src="//widget.cloudpayments.ru/bundles/cloudpayments"></script>

For payment form to be shown, you need to call charge or auth method of cp.CloudPayments object.

                            var pay = function () {
                    var payments = new cp.CloudPayments({ language: "en-US" });
                    payments.charge({ // options
                        publicId: 'test_api_00000000000000000000001',
                        description: 'Demo purchase (you will not be charged)',
                        amount: 10,
                        currency: 'USD',
                        invoiceId: '1234567',
                        accountId: 'user@example.com',
                        data: {
                            myProp: 'myProp value'
                        }
                    },
                    function (options) { // success
                        $('#checkout-result').text('Payment was successful');
                    },
                    function (reason, options) { // fail
                        $('#checkout-result').text('Payment failed');
                    });
                };    
            
        

and attach as a click event handler to a button, for example.

$('#checkout').click(pay);

Parameters

Methods charge and auth determine the payment scheme: charge for one-step and auth — for two-step payment.

Parameter	Format	Use	Description
publicId	String	Required	Site identifier, can be found in merchant account.
description	String	Required	Description of payment purpose in any format
amount	Float	Required	Payment amount
currency	String	Required	Currency: RUB/USD/EUR/GBP
invoiceId	String	Optional	Order or invoice number
accountId	String	Optional	User identifier
data	JSON	Optional	Any other parameters which will be used with the transaction

You can also specify the form behavior if the payment is successful or unsuccessful by using the following parameters:

Parameter	Format	Usage	Description
onSuccess	Function or String	Optional	A function or a website page address. If a function is specified, it will be called after a successful payment. If an address is specified, the user will be transferred to that page after a successful payment.
onFail	Function or String	Optional	A function or a website page address. If a function is specified, it will be called after a failed payment. If an address is specified, the user will be transferred to that page after a failed payment.