Before you Begin

To obtain the Public API key from the Business Portal, refer to the steps here.

Example Payment Form

For additional details, please refer here.

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
        <script src="https://hosted.paysafe.com/checkout/v2/paysafe.checkout.min.js"></script>
        <script src="https://hosted.paysafe.com/checkout/v2/paysafe.checkout.min.js"></script>
    </head>
    <body style = "width :'100%'">
        <button onclick="checkout()"> Deposit $25 </button>
    </body>
    <script>
        function checkout() {
            var PAYSAFECARD_CONSUMER_ID = "merchantclientid5HzDvoZSodKDJ7X7VQ";
            var PAYSAFECASH_CONSUMER_ID = "123456";
            var SIGHTLINE_CONSUMER_ID = "user8525";
            var SKRILL_CONSUMER_ID = "gregeteller@mailinator.com";
            paysafe.checkout.setup("<PLACE_YOUR_API_KEY_HERE>", {
                "currency": "BRL",
                "amount": 2500,
                "locale": "en_US",
                "amountoptions": [500, 10000, 60000],
                "simulator": "EXTERNAL",
                "merchantRefNum": "193767720k213012",
                "canEditAmount": true,
                "billingAddress": {
                    "nickName": "Address 2",
                    "street": "222333 Peachtree Place",
                    "street2": "jhgsadjsa",
                    "city": "Atlanta",
                    "zip": "30318",
                    "country": "US",
                    "state": "GA"
                },
                "environment": "TEST",
                "merchantDescriptor": {
                    "dynamicDescriptor": "Paysafe test",
                    "phone": "9505610677"
                },
                "customer": {
                    "firstName": "John",
                    "lastName": "Smith",
                    "email": "paysafe.user@paysafe.com",
                    "phone": "3069443197",
                    "dateOfBirth": {
                        day: 28,
                        month: 2,
                        year: 1977
                    }
                },
                threeDs: {
                    merchantUrl: window.location.href,
                    messageCategory: "PAYMENT",
                    authenticationPurpose: "PAYMENT_TRANSACTION",
                    deviceChannel: "BROWSER"
                },
                "paymentMethodDetails": {
                    applePay: {
                        accountId: "348860",
                        label: "Pay With Apple",
                        requestShippingAddress: true,
                        requestBillingAddress: false,
                        type: 'buy',
                        color: 'white-outline'
                    },
                    paysafecard: {
                        consumerId: PAYSAFECARD_CONSUMER_ID
                    },
                    paysafecash: {
                        consumerId: PAYSAFECASH_CONSUMER_ID
                    },
                    sightline: {
                        consumerId: SIGHTLINE_CONSUMER_ID,
                        ssn: "123456930"
                    },
                    skrill: {
                        consumerId: SKRILL_CONSUMER_ID,
                        emailSubject: "Payout for Payout for",
                        emailMessage: "Note for email here",
                        accountId: "1001461040"
                    },
                    instantach: {
                        consumerId: "greg_neteller@mailinator.com",
                        emailSubject: "Payout for Payout for Payout",
                        emailMessage: "Note for email here",
                        paymentId: "123456"
                    },
                    vippreferred: {
                        consumerId: "123547016"
                    },
                    safetypay_bank_transfer: {
                        consumerId: "123547016"
                    },
                    safetypay_cash: {
                        consumerId: "123547016"
                    },
                    boleto_bancario: {
                        consumerId: "123547016"
                    },
                    spei: {
                        consumerId: "123547016"
                    },
                    mach: {
                        consumerId: "123547016"
                    },
                    khipu: {
                        consumerId: "123547016"
                    },
                    pix: {
                        consumerId: "123547016"
                    },
                    paypal: {
                        consumerId: "sb-cpfxo1472281@personal.example.com"
                    },
                    interacEtransfer: {
                        consumerId: "madhu.baddam@paysafe.com",
                        type: "EMAIL",
                        userCookie: "user-cookie",
                    },
                    neteller: {
                        consumerId: "netellertest_EUR@neteller.com",
                        recipientDescription: "logo_url_alt_text",
                        logoUrl: "http://www.paysafe.com/icon.jpg"
                    },
                }
            }, function (instance, error, result) {
                if (result && result.paymentHandleToken) {
                    console.log(result);
                    // make AJAX call to Payments API
                    // alert(result.paymentHandleToken + " - token to be used to make server to server call to Payments API");
                    instance.showSuccessScreen("Your goods are now purchased. Expect them to be delivered in next 5 business days.");
                } else {
                    console.error(error);
                    // Handle the error
                }
            }, function (stage, expired) {
                switch (stage) {
                case "BeforePayment": // Handle the scenario
                case "DuringPayment": // Handle the scenario
                case "AfterPayment": // Handle the scenario
                default: // Handle the scenario
                }
            });
        }
    </script>
</html>

Did you find this page useful?