Example Payment Form

The following code sample shows a minimal Paysafe Checkout example that creates a payment overlay for the user. The overlay contains a payment button that creates a payment handle for the data entered by the user and displays the payment handle token (if successful) in the browser console.

<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>
    </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("c3V0LTM0ODg2MDpCLXFhMi0wLTVkM2VjYjMwLTEtMzAyYzAyMTQyYTM3NjgxMmE2YzJhYzRlNmQxMjI4NTYwNGMwNDAwNGU2NWI1YzI4MDIxNDU1N2EyNGFiNTcxZTJhOWU2MDVlNWQzMjk3MjZjMmIzZWNjNjJkNWY=",
        {
        "currency": "USD",
        "amount": 2500,
        "locale": "en_US",
        "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: 1975
        }
        },
        threeDs : {
        merchantUrl: window.location.href,
        messageCategory: "PAYMENT",
        authenticationPurpose: "PAYMENT_TRANSACTION",
        deviceChannel: "BROWSER"
        },
        "paymentMethodDetails": {
        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"
        },
        paypal:{
        consumerId: "sb-cpfxo1472281@personal.example.com"
        },
        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?