Processing Payments

You (the merchant) initiate the Checkout when a customer wants to make a payment. The Customer is directed to a Checkout session to enter payment details in the form. After the transaction is complete, the Customer is redirected back to your website.

Here is a typical Scenario for Card Payments for a New Customer

  1. The Customer initiates the Payment and proceeds to Checkout.

  2. Merchant Server checks if the customer profile is already created at Paysafe.

  3. The merchant website initiates the Checkout with setup options.

  4. Paysafe Checkout collects Customer’s payment details.

  5. Paysafe server receives customer details and sends the Payment Handle Token to the Paysafe Checkout.

  6. Paysafe Checkout sends the Payment Handle Token to Merchant Website as a part of resultCallback. If the Customer wants to save the payment instrument details for future payments, then send customerOperation as ADD in the resultCallback function.

  7. Merchant website sends the Payment Handle Token to the Merchant server.

  8. Merchant server calls the Payments API using the private key. You must initiate a POST request to the endpoint:

    POST/paymenthub/v1/payments

    If the customerOperation=ADD, Merchant Website will send merchantCustomerId in the API call.

  9. Payments API processes the Payment and returns the Multiuse Payment Handle Token.If customerOperation is ADD, then on successful payment Paysafe will create the customer profile by using the merchantCustomerId and add the multi-use payment handle to the Customer.

  10. Merchant Server processes the Payment Response.Merchant Server must maintain the mapping of the merchantCustomerId and corresponding customerId.

  11. Merchant Website displays Success screen on the Merchant website.

Here is a typical Scenario for Card Payments for an Existing Customer

  1. The Customer initiates the Payment and proceeds to Checkout.

  2. Merchant Server verifies if the customer profile is already created at Paysafe.

  3. If the customerId exists, the merchant server makes an API call to single-use customer token API.

  4. The Paysafe server generates and sends the single-use customer token to Merchant Website.

  5. Merchant Website initiates the Paysafe Checkout using the single-use customer token.

  6. Paysafe Checkout displays the Customer’s saved payment details.

  7. The Customer chooses one of the saved instruments and opts to pay.

  8. Paysafe server generates and sends the single-use customer token to Merchant Website.

  9. Merchant Website initiates the Paysafe Checkout using the single-use customer token.

  10. Paysafe Checkout displays the Customer’s saved payment details.

  11. Paysafe server generates and sends the Payment Handle Response to the Paysafe Checkout.

  12. Paysafe Checkout sends the Payment Handle Token to Merchant Website as a part of resultCallback.

  13. Merchant website sends the Payment Handle Token to the Merchant server.

  14. Merchant server calls the Payments API using the private key. You must initiate a POST request to the endpoint:

    POST/paymenthub/v1/payments

    If the customerOperation=ADD, Merchant Website will send merchantCustomerId in the API call.

  15. Payments API processes the Payment and returns the Multiuse Payment Handle Token.

  16. Merchant Server processes the Payment Response.Merchant Server must maintain the mapping of the merchantCustomerId and corresponding customerId.

  17. Merchant Website displays Success screen on the Merchant website.

For other Payment Methods, you should send the following details(customer unique values) in the setup function:

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.

<!DOCTYPE html>
<!-- Sample Paysafe Checkout Code https://developer.paysafe.com
Please feel free to copy this code to a fresh HTML file, and run it on your device (all desktop and mobile devices are supported).
You may even use this code as baseline to integrate your website with Paysafe & start receiving online payments. -->
<html>
    <head>Paysafe Checkout Demo
    </head>
    <body>
        <button onclick="checkout()"> Paysafe Checkout </button>
    </body>
	<script src="https://hosted.paysafe.com/checkout/v2/paysafe.checkout.min.js"></script>

	<script type="text/javascript">

var API_KEY_MERCHANT_TEST = "<Please-Insert-Your-Base64-Encoded-API-Key-Here>";

function checkout() {
	paysafe.checkout.setup(	API_KEY_MERCHANT_TEST, {
		currency: "USD",    // 4 currencies currently supported by Paysafe Checkout - "USD", "CAD", "EUR", "GBP"
		amount: 10000,      // This qualifies as USD $ 100.00. Multiply Payment Amount by 100 and supply here.
		payout: false,      // payout: true --> for Withdrawal (standalone credits); payout: false --> for Payments/Deposit
		payoutConfig: {     // payoutConfig section required only when payout: true [for Withdrawal cases].
            "maximumAmount": 100000000
        },
		locale: "en_US",
		simulator: "EXTERNAL",
        imageUrl: "https://hosted.paysafe.com/checkout/resource/demo-store/images/logo.png", // Supply Your Logo URL here.
		environment: "TEST",       // environment: "LIVE" --> Production, "TEST" --> test environment for customers to try out Checkout & its features
		buttonColor: "#66cc99",    // feel free to change the color of buttons (RGB value)
		companyName: "Example Paysafe Merchant",  // Supply Your Company Name here
		holderName: "John Smith",  // Supply Customer's Name here
		customer: {
			firstName: "John",
			lastName: "Dee",
			email: "johndee@paysafe.com",
			phone: "1234567890",
			dateOfBirth: {    // dateOfBirth : This {section} is optional, needs to be provided only if you want to prefill DOB in Checkout.
				day: 1,       // If dateOfBirth : {section} is not supplied, Checkout will allow the customer to enter his DOB before Payment.
				month: 7,
				year: 1990
		 	}
		},
		billingAddress: {      // Supply customer's billing Address here.
			nickName: "John Dee",
			street: "20735 Stevens Creek Blvd",
			street2: "Montessori",
			city: "Cupertino",
			zip: "95014",
			country: "US",
			state: "CA"
		},
		merchantRefNum: "Supply Merchant Ref Num Here. (Unique For Every Transaction)",  // Will be unique and must keep changing every transaction
		canEditAmount: true,      // Makes the payment amount editable on Checkout screen. Make it false to open Checkout with a fixed non-editable amount.
		merchantDescriptor: {
			dynamicDescriptor: "XYZ",
			phone: "1234567890"
		},
		displayPaymentMethods: ["neteller", "skrill", "paysafecard", "paysafecash", "instantach", "paypal", "card", "vippreferred", "sightline", "ach", "eft"],
		// displayPaymentMethods : Array serves two purposes. You can use it to restrict the payment methods that a customer can see.
		// You can also use it to order the payment methods based on your preference.
		// If this field is present, the customer will only see those payment methods in the order specified, hence,
		// Ensure that you provide all payment methods if you are using it only for the purpose of payment method ordering.
		paymentMethodDetails: {        // Please read the Checkout Objects Documentation on developer.paysafe.com .....
                    paysafecard: {     // .... for details on paymentMethodDetails (including all supported mandatory and optional fields)
                        consumerId: "123456"
                    },
                    paysafecash: {
                        consumerId: "123456"
                    },
                    sightline: {
                        consumerId: "12341231256",
                        SSN: "123456789",
                        last4ssn: "6789",
                        //accountId: "1009688222"  // Supply Account ID only if multiple accounts are configured with same payment method
                    },
                    vippreferred:{
                        consumerId: "120288765",
                        //accountId: "1679688456"  // Supply Account ID only if multiple accounts are configured with same payment method
                    },
					card: {
						//accountId: "1009688230"  // Supply Account ID only if multiple accounts are configured with same payment method
					},
					skrill: {
                        consumerId: "greg_neteller@mailinator.com",
                        emailSubject: "Payout for Greg Neteller",
                        emailMessage: "You Have Received Payout of $100."
                    },
					instantach: {
						consumerId: 'john.doe@email.com',
                        paymentId: '3aeb9c63-6386-46a3-9f8e-f452e722228a',
                        emailSubject: 'Instant ACH Payout',
                        emailMessage: 'Your Instant ACH Payout request has been processed'
					},
					neteller: {
        				consumerId: "netellertest_EUR@neteller.com",
        				recipientDescription: "logo_url_alt_text",
        				logoUrl: "http://www.paysafe.com/icon.jpg"
    				}
                }
	}, function (instance, error, result) {
		if (result) {
			alert(JSON.stringify(result, null, 4));
		} else {
			alert(error);
		}
		if (result.token) {
			alert("Payment Token (Returned By Paysafe GW): " + result.token);
			if (result.paymentMethod == "Cards") {}
			if (result.paymentMethod == "DirectDebit") {}
			if (result.paymentMethod == "Interac") {}
		}
	}, function (stage, expired) {
		alert ("Payment Handle Stage :: " + stage);
		switch (stage) {
			case "PAYMENT_HANDLE_NOT_CREATED": // Handle the scenario
			case "PAYMENT_HANDLE_CREATED":     // Handle the scenario
			case "PAYMENT_HANDLE_REDIRECT":    // Handle the scenario
			case "PAYMENT_HANDLE_PAYABLE":     // Handle the scenario
			default:                           // Handle the scenario
		}
	});
}
    </script>
</html>
Did you find this page useful?