deposits
v1 - User Endpoints Only
Search…
⌃K

JavaScript

The Deposits One-Click Payment SDK allows merchants to quickly onboard and checkout customers. We provide secure and customizable UI screens that can be used instantly to collect payments from your users, whether they have a Deposits account or not.

Use Cases

Simplified Security: By transferring the sensitive data straight to Deposits rather than your server, we make it easy for you to collect sensitive data such as credit card and ACH details while being PCI compliant.
Payment methods: Accepting card and ACH payments helps your business to expand its global reach and improve checkout conversion.
Native UI: On Android and iOS, we provide native screens and components for securely collecting payment information.
Fast Checkout: In the future, transactions will require less input and can be completed with a single click.

Demo

To see this SDK in action, you can initiate an example checkout process in staging or production.
You should be cautious when using the demo in production because it moves real money. However, in staging, you can make use of our test cards as payment information.

Getting Started

The only prerequisite for this SDK is your public key from the Deposits console. To make use of this SDK, you can embed the base URL suitable for the environment you’re working with. See the reference for further information.
Environment
Base URL
Development / Staging
Production

How to Use

There are two major steps involved in using this SDK;
  • Embed the base URL,
  • Initiate checkout.

Embedding the base URL

You can embed the SDK's base URL into your website using the script element, as shown below.
// staging environment
<script src="<https://api.deposits.dev/sdk/checkout.js>"></script>
// production environment
<script src="<https://api.deposits.com/sdk/checkout.js>"></script>

Initiating checkout

After embedding the base URL, you can then call the function that initiates the checkout process.
// Function to initiate checkout
DepositsCheckout({
amount,
api_key: "your-public-key",
email,
callback: (data) => {
console.log("callback", data);
},
on_page_closed: () => {
console.log("Page got closed");
},
redirect_url: "<https://yourlink.com>",
});

Checkout Options

The function that initiates the checkout process accepts different options that allow you further configure the look and feel of the checkout screen as well as provide you with the additional powers through out the checkout process.
Below is a list of all the options provided by the DepositsCheckout function:
Property
Required
Type
Description
email
true
String
The email address of the user you want to checkout
amount
true
Number
The amount the user is to pay, in dollars. (USD)
public_key
true
String
Your public key found on your Deposits Console.
business_public_key
false
String
The public key of the business you want to credit. Used for implementing multi-tenant one click checkout. To learn how to create and manage a business, check out our documentation.
redirect_url
false
String
A URL to redirect to after a successful payment.
reference
false
String
A unique identifier for your transaction. You can use this later to check the status of the transaction.
theme_color
false
String
A hexadecimal string that controls the colors of buttons, inputs and other elements on the checkout page.
background_color
false
String
A hexadecimal string that controls the background color of the checkout screens.
no_page_header
false
Boolean
Determines whether the page header should be hidden
no_scroll_bar
false
Boolean
Determines whether scrollbars should be hidden.
dark_mode_text
false
Boolean
Determines if the text should be light colored (Best for dark background colors).

Example

A typical implementation of this process would be as shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Checkout Demo</title>
</head>
<body>
<form id="form">
<input type="email" id="email" name="email" placeholder="Enter your email address" required>
<label for="email">Email Address</label><br>
<input type="number" id="amount" name="amount" placeholder="Enter a valid amount" required>
<label for="amount">Amount</label><br>
<button type="submit">
Initiate Checkout
</button>
</form>
<script src="<https://api.deposits.dev/sdk/checkout.js>"></script>
<script>
document.getElementById("form").addEventListener("submit", function (e) {
e.preventDefault();
const email = document.getElementById("email").value;
const amount = document.getElementById("amount").value;
DepositsCheckout({
amount,
public_key: "your-public-key",
email,
callback: (data) => {
console.log("callback", data);
},
on_page_closed: () => {
console.log("Page got closed");
},
redirect_url: "<https://google.com>",
});
});
</script>
</body>
</html>
In the above example, the EventListener notifies your webpage when to call our SDK to begin the checkout process.
We collect the information submitted by the user using the email and amount constants, which are two of the needed fields to start the checkout process. When the user attempts to submit the form, we can then launch the one-click checkout experience using the customer's email address and amount.

Callback and Redirects

You can define what happens when you call DepositsCheckout and the payment is completed. There are two ways to describe this.
  1. 1.
    Callbacks: With callbacks, you specify the Javascript function for us to call after the payment has been made successfully.
  2. 2.
    Redirects: If you specify a redirect_url as we specified in the example above, your customers will be directed to that URL after successful payment.
It is essential to know that a redirect takes priority over a callback. That is, if a redirect-url is provided, it will be called instead of the callback.

Response and Outcomes

After the checkout process has been initialized, there are a couple of possible outcomes from the Deposits SDK.

Successful Payments

After a transaction has been completed, the checkout SDK provides feedback mechanisms that allow you to continue the process. This feedback is handled differently depending on whether the SDK was used in Callback mode or Redirect Mode.

Success Feedback (Callback Mode)

If the SDK is used in callback mode, an object like this would be returned:
{
“data”: {
“amount”:540.00,
“merchant_name”: “money”,
“transaction_id”: “DPST_OCC_9ce705decede887e7e2534a07”,
“reference”: “fjh9fjh93j9f9hf9uuj9”,
},
“message”: “Card charged successfully”,
“status”: “success”
}

Success Feedback (Redirect Mode)

When the SDK is used in redirect mode, the transaction details are provided to that URL in the query parameters. It would include the transaction_id and the reference (if one was entered during initialization).

Failed Payments

If a customer's payment fails for whatever reason, the modal remains open for the consumer to try again. When this happens, we'll send you an email to let you know.

Canceled Payments

If the customer closes the payment modal before making a payment or clicks "Cancel Payment", we will cancel the payment session, hide the modal, and you won't be notified. Although, if you want to be notified if the payment is canceled, you can specify the on-page-closed function to be called if the payment is canceled.

References

Support

Have trouble integrating? For assistance, please contact [email protected].

Contributing

Only members of the deposits team can contribute to this. However, you can create an issue if you find a bug or have any challenges using this SDK.