LogoLogo
System Status
  • Digital River API
  • Getting started
  • Using our services
    • Local pricing
    • Item classification
    • Subscriptions
    • e-Invoicing
  • Integration options
    • Low-code checkouts
      • Implementing a Prebuilt Checkout
      • Implementing a Components checkout
      • Offering local pricing
      • Using a shipping endpoint
      • Processing subscription acquisitions
      • Adding custom fields
      • Offering store credit
      • Displaying policies and getting consent
      • Collecting e-invoice information
      • Handling completed checkout-sessions
    • Direct integrations
      • Standard flow
      • Building checkouts
        • Checking out guest and registered customers
        • Describing line items
          • Setting the price of an item
          • Managing items with shared SKU identifiers
        • Providing address information
        • Handling shipping choice
        • Tax identifiers
        • Applying a discount
        • Setting the customer type
        • Providing the IP address
        • Selecting a currency
        • Initiating a charge
        • Setting the purchase location
        • Configuring taxes
        • Accessing regulatory fee information
        • Localizing invoices and credit memos
        • Providing an upstream identifier
        • Applying store credit
        • Handling e-invoicing requirements
        • Landed cost
        • Tax calculation inputs
        • Selling entities
        • Payment sessions
        • Applying store credit (legacy)
        • Country specs
      • Building payment workflows
        • Handling redirect payment methods
        • Handling delayed payment methods
      • Subscription acquisitions
        • Handling subscription acquisitions
        • Handling external subscription acquisitions
        • Subscription information
      • Digital River coordinated fulfillments
        • Checking inventory levels
        • Using shipping quotes
        • Reserving inventory items
        • Managing a fulfillment order
        • Cancelling a fulfillment order
    • Connectors
  • Order management
    • Processing orders
    • Handling a rejected order
    • Accessing invoices and credit memos
    • Fulfilling goods and services
    • Capturing and cancelling charges
    • Payment reauthorizations
    • Handling reversals
      • Return basics
        • Digital River coordinated returns
        • Third party coordinated returns
      • Refund basics
        • Issuing refunds
        • Refunding asynchronous payment methods
      • Disputes and chargebacks
    • Customer notifications
    • Responding to events
      • Events
        • Key event types
        • All event types
      • Webhooks
        • Creating a webhook
        • Digital River API safelist
        • Digital River signature
      • Expanding events
      • Preventing webhooks from getting disabled
    • Distributor model
  • Subscription Management
    • Managing a subscription
    • Managing an external subscription
  • Payments
    • Payment solutions
      • Drop-in payments
        • How Drop-in payments work
        • Drop-in payments integration guide
      • DigitalRiver.js with Elements
        • Elements integration guide
        • Configuring payment methods
          • Configuring Afterpay
          • Configuring Alipay+ (cross-border)
          • Configuring Alipay (domestic)
          • Configuring Amazon Pay
          • Configuring Apple Pay
          • Configuring Bancontact
          • Configuring BNP Paribas
          • Configuring BLIK
          • Configuring CCAvenue
          • Configuring Clearpay
          • Configuring Credit Cards
          • Configuring FPX Online Banking
          • Configuring Google Pay
          • Configuring iDEAL
          • Configuring Klarna
          • Configuring Konbini
          • Configuring Online Banking (IBP)
          • Configuring Online Banking (Korea Bank Transfer)
          • Configuring PayCo
          • Configuring PayPal
          • Configuring SEPA Direct Debit
          • Configuring Trustly
          • Configuring Wire Transfer
          • Common payment sources
          • Common payment objects
    • Supported payment methods
      • Afterpay
      • Alipay (domestic)
      • Alipay+ (cross-border)
      • Amazon Pay
      • Apple Pay
      • Bancontact
      • BNP Paribas
      • BLIK
      • CCAvenue
      • Clearpay
      • Credit Cards
      • FPX Online Banking
      • Google Pay
      • iDEAL
      • Klarna
      • Konbini
      • Korea Bank Transfer (Online Banking)
      • Online Banking (IBP)
      • Pay with Installments France
      • PayCo
      • PayPal
      • PayPal Billing Agreement
      • PayPal Credit
      • PayPal Pay in 3
      • PayPal Pay in 4
      • PayPal RatenZahlung (Installment Payment)
      • SEPA Direct Debit
      • Trustly
      • Wire Transfer
    • Source basics
      • Managing sources
      • Handling credit card sources
      • Retrieving sources
    • Authorization declines
    • PSD2 and SCA
      • How to ensure SCA compliance
    • Payment testing scenarios
  • Product management
    • Product basics
    • Managing SKUs
    • Using product details
    • Grouping SKUs
    • SKU-inventory item pairs
    • Managing inventory items
    • Regulatory fees
      • What are regulatory fees?
        • Fees terminology
        • Regulatory fee management
        • European regulatory fees
        • Compliance obligations
        • WEEE directive requirements
        • Copyright directive requirements
        • Compliance challenges
      • Managing regulatory fees
  • Customer management
    • Customer basics
    • Creating and updating customers
    • Setting up tax exemptions
    • Recording a customer's request to be forgotten
  • Financial reporting
    • Financials basics
    • Sales transactions
      • Returning a list of sales transactions
      • Getting a sales transaction by ID
    • Sales summaries
      • Returning a list of sales summaries
      • Getting a sales summary by ID
    • Payouts
      • Returning a list of payouts
      • Getting a payout by ID
      • Get a list of transactions included in payout by ID
  • Developer resources
    • Digital River API reference
    • DigitalRiver.js reference
      • Including DigitalRiver.js
      • Initializing DigitalRiver.js
      • DigitalRiver object
      • Elements
        • Amazon Pay element
        • Apple Pay elements
        • Google Pay elements
        • IBAN element
        • iDEAL element
        • Konbini elements
        • Compliance element
        • Offline Refund elements
        • Online Banking elements
        • Tax Identifier element
        • Invoice attribute element
        • Delayed Payment Instructions element
        • PayPal elements
      • Guidelines for capturing payment details
      • Security
      • Digital River payment objects
      • Error types, codes, and objects
    • DigitalRiverCheckout.js reference
      • Including DigitalRiverCheckout.js
      • Initializing DigitalRiverCheckout.js
        • DigitalRiverCheckout configuration object
      • DigitalRiverCheckout object
        • Configuring Prebuilt Checkout
          • Performing actions
          • Defining experience
        • Components
          • Configuring components
          • Address component
          • Shipping component
          • Tax identifier component
          • Invoice component
          • Wallet component
          • Payment component
          • Compliance component
          • Order summary component
          • Thank you component
        • Rendering a checkout button
          • Performing actions on the checkout button
        • Determining the checkout's status
      • Accessing country and currency
    • DynamicPricing.js reference
    • Postman collection
  • administration
    • Sign in
    • Digital River Dashboard
      • Digital River Dashboard quick start guide
      • Key features
      • Reset your password
      • Test and production environments
      • Account
        • Adding an account
        • Switching accounts
        • Account access
      • Profile settings
        • Viewing your personal information
        • Changing your password
        • Updating your phone number
        • Enabling multi-factor authentication
      • Finance
        • Payouts
          • Viewing your payout details
          • Filtering your payouts
          • Exporting your payouts
        • Sales summaries
          • Viewing your sales summaries details
          • Filtering your sales summaries
          • Exporting your sales summaries
          • Exporting your sales summary details
        • Transactions
          • Viewing your transaction details
          • Filtering your transactions
          • Exporting your transactions
      • Order management
        • Orders
          • Searching for orders
          • Filtering your orders
          • Viewing the order details
          • Cancelling items
          • Fulfilling items
          • Downloading an invoice
          • Downloading a credit memo
          • Creating shipping labels
          • Recording a customer's request to be forgotten
          • Viewing returns and refunds
          • Creating a return
          • Accepting a return
          • Creating a refund
          • Viewing the order's timeline
        • Checkouts
          • Searching for checkouts
          • Filtering your checkouts
          • Viewing the checkout details
        • Prebuilt Checkout links
          • Generate Prebuilt Checkout links
          • View and work with Prebuilt Checkout link details
          • Add a customer during Prebuilt Checkout
          • Add a product during Prebuilt Checkout
      • Customers
        • Viewing customer details
        • Searching for customers
        • Filtering your customers
        • Editing account information
        • Adding a customer
        • Tax IDs and certificates
          • Adding a tax certificate
          • Adding a tax ID
          • Deleting a tax ID
        • Metadata
          • Adding metadata
          • Editing metadata
        • Manage subscriptions from the Customer Details page
        • Disabling a customer
        • Recording a customer's request to be forgotten
        • Deleting a customer
      • Catalog
        • SKUs
          • Viewing the SKU details
          • Searching for SKUs
          • Filtering your SKUs
          • Adding a SKU
          • Editing a SKU
          • Deleting a SKU
          • Adding a fee to a SKU
          • Editing a fee
          • Deleting a fee
          • Viewing product tariff codes
        • Managing customer subscriptions from Digital River Dashboard
      • Developers
        • API keys
          • Updating your API version
          • Getting your API keys
          • Changing the API version for your key
          • Creating a restricted key
          • Editing a restricted key
          • Deleting a restricted key
          • Rotating keys
        • Webhooks
          • Creating a webhook
          • Editing a webhook
          • Deleting a webhook
          • Rotating a webhook's secret
        • API logs
          • Filtering the API log
          • Viewing the API log details
        • Event logs
          • Filtering the events log
          • Viewing the event details
      • Settings
        • Users and roles
          • Roles
          • Searching for a user by name or email
          • Filtering your users and roles
          • Adding a user
          • Editing a user
          • Deleting a user
        • Prebuilt Checkout
        • Payment methods
          • Viewing your payment methods
          • Viewing payment method details
            • Enabling currencies
            • Managing countries
          • Enabling or disabling a payment method
  • General Resources
    • eCompass
    • eCompass documentation
    • Release notes
      • 2024
      • 2023
      • 2022
      • 2021
      • 2020
      • 2019
    • Standards and certifications
      • Certification process
      • Compliance requirements
      • Documentation requirements
      • Integration checklists
        • Admin portal
        • Products and SKUs
        • Customers and tax exemptions
        • Checkouts, payment sources, and orders
        • Disclosures, compliance statements, and emails
        • Fulfillments and cancellations
        • Customer portal
        • Order refund synchronization
        • Reversals
        • Error handling
      • Test and use cases
    • Commerce infrastructure
    • Versioning
    • Glossary
Powered by GitBook
On this page
  • Getting started
  • Step 1: Include DigitalRiver.js
  • Step 2: Include the base CSS file
  • Step 3: Initialize DigitalRiver.js with your public key
  • Step 4: Create a Drop-in payments container
  • Step 5: Create a Drop-in payments configuration object
  • Step 6: Use the configuration object to create an instance of Drop-in payments
  • Step 7: Mount Drop-in payments on the checkout or account management page
  • Step 8: Enable the payment method in Digital River Dashboard
  • Using Drop-in payments in checkouts
  • Finalize the checkout
  • Configure and mount Drop-in payments
  • Handle the onSuccess event
  • Optional. Allowing customers to save their payment information
  • Using Drop-in payments in account management settings
  • Build the configuration object
  • Create and mount Drop-in payments
  • Handle onSuccess
  • Configuring Drop-in payments
  • Payment session identifier
  • Options
  • Payment method configurations
  • Drop-in payment events
  • Billing address
  1. Payments
  2. Payment solutions
  3. Drop-in payments

Drop-in payments integration guide

Learn how to integrate Drop-in payments

PreviousHow Drop-in payments workNextDigitalRiver.js with Elements

Last updated 2 months ago

This page explains how to integrating into both and .

We recommend also using the and the to learn how to integrate into your app or website.

Getting started

Follow these steps to set up Drop-in payments:‌

Step 1: Include DigitalRiver.js

Include the following script on the pages where you want Drop-in payments to display (for example, on or pages):

<script type="text/javascript" src="https://js.digitalriverws.com/v1/DigitalRiver.js"></script>

Step 2: Include the base CSS file

Include the following link to the Drop-in payments CSS file on the same pages. If you'd like to customize styles, override this CSS file with your own.

 <link rel="stylesheet" href="https://js.digitalriverws.com/v1/css/DigitalRiver.css" type="text/css"/>

Step 3: Initialize DigitalRiver.js with your public key

let digitalriver = new DigitalRiver("YOUR_PUBLIC_API_KEY", {
     "locale": "en-US"
});

Step 4: Create a Drop-in payments container

Create a container element on the page where you want Drop-in payments to appear.

<div id="drop-in"></div>

Step 5: Create a Drop-in payments configuration object

let configuration = {
    "sessionId": "7637affb-cb4a-4d9a-815c-d4e6e393e28f",
    "options": {
        "button": {
            "type": "submitOrder"
        },
        "flow": "checkout",
        "showComplianceSection": true,
        "showSavePaymentAgreement": true,
        "showTermsOfSaleDisclosure": true,
        "usage": "unscheduled"
    }, 
    onSuccess: function(data) {}, 
    onError: function(data) {}, 
    onReady: function(data) {}, 
    onCancel: function(data) {}
}

Step 6: Use the configuration object to create an instance of Drop-in payments

let dropin = digitalriver.createDropin(configuration);

Step 7: Mount Drop-in payments on the checkout or account management page

Add the following statement to the appropriate checkout or account management page:

dropin.mount("drop-in");

Step 8: Enable the payment method in Digital River Dashboard

Using Drop-in payments in checkouts

Finalize the checkout

Configure and mount Drop-in payments

...                     
let configuration = {
    "sessionId": "7637affb-cb4a-4d9a-815c-d4e6e393e28f",
    "options": {
        "button": {
            "type": "submitOrder"
        },
        "flow": "checkout",
        "showComplianceSection": true,
        "showTermsOfSaleDisclosure": true
    }, 
    onSuccess: function(data) {}, 
    onError: function(data) {}, 
    onReady: function(data) {}, 
    onCancel: function(data) {}
}
                                    
let dropin = digitalriverpayments.createDropin(configuration);
dropin.mount("drop-in-container");

Customers then select how they want to pay.

Depending on which payment method customers select, they may be redirected to a third-party payment authorization site. Drop-in payments handle all these redirects.

Handle the onSuccess event

{
    "source": {
        "clientId": "gc",
        "channelId": "paylive",
        "liveMode": false,
        "id": "ebca2f55-1667-4e30-84be-68bb1be115f8",
        "sessionId": "02a86286-4924-41fa-ae82-dbafec952cb3",
        "clientSecret": "ebca2f55-1667-4e30-84be-68bb1be115f8_e9c65c5f-6778-4351-9230-2bdfa5f6de98",
        "type": "creditCard",
        "reusable": false,
        "owner": {
            "firstName": "John",
            "lastName": "Doe",
            "email": "test224234234324@test.com",
            "phoneNumber": "952-253-1234",
            "organization": "Digital River",
            "address": {
                "line1": "10380 Bren Road W",
                "city": "Minnetonka",
                "state": "MN",
                "country": "US",
                "postalCode": "55343"
            }
        },
        "amount": "521.04",
        "currency": "USD",
        "state": "chargeable",
        "creationIp": "73.65.125.164",
        "createdTime": "2022-05-31T18:27:43.543Z",
        "updatedTime": "2022-05-31T18:27:43.543Z",
        "flow": "standard",
        "language": "en",
        "creditCard": {
            "brand": "Visa",
            "expirationMonth": 12,
            "expirationYear": 2023,
            "lastFourDigits": "1111"
        }
    },
    "readyForStorage": false,
    "supportsStorage": true
}

Optional. Allowing customers to save their payment information

...                    
let configuration = {
    "sessionId": "d5437992-c2d3-4cc9-9be5-c49a9ed68bbb",
    "options": {
        "flow": "checkout",
        "showSavePaymentAgreement": true
    }
    onSuccess: function(data) {}, 
    onError: function(data) {}, 
    onReady: function(data) {}, 
    onCancel: function(data) {}
}
                                    
let dropin = digitalriverpayments.createDropin(configuration);
dropin.mount("drop-in-container");

Using Drop-in payments in account management settings

Build the configuration object

In this type of flow:

If you set showSavePaymentAgreement to false or showComplianceSection to true, then Digital River overrides the values you pass.

...
let configuration = {
    "options": {
        "flow": "managePaymentMethods",
        "usage": "subscription",
        "showTermsofSaleDisclosure": true
    },
    "billingAddress": {
        "firstName": "John",
        "lastName": "Doe",
        "email": "test224234234324@test.com",
        "organization": "Digital River",
        "phoneNumber": "952-253-1234",
        "address": {
            "line1": "10380 Bren Road W",
            "city": "Minnetonka",
            "state": "MN",
            "postalCode": "55343",
            "country": "US"
        }
    },
    onSuccess: function(data) {},
    onError: function(data) {},
    onReady: function(data) {},
    onCancel: function(data) {},
};
...

Create and mount Drop-in payments

Handle onSuccess

Configuring Drop-in payments

...
let configuration = {
    "sessionId": "d5437992-c2d3-4cc9-9be5-c49a9ed68bbb",
    "options": {
        "button": {
            "type": "custom",
            "buttonText": "A fully customized button"
        },
        "flow": "checkout",
        "redirect": {
            "disableAutomaticRedirects": true,
            "returnUrl": "https://mysite.com/success",
            "cancelUrl": "https://mysite.com/cancel"
        },
        "showComplianceSection": true,
        "showSavePaymentAgreement": true,
        "showTermsOfSaleDisclosure": true,
        "usage": "unscheduled",
        "consents": {
            "companyName": "Cool Company",
            "eula": {
                "url":https: //myecommercesite.com/eula
            },
            "termsOfUse": {
                "url":https: //myecommercesite.com/termsOfUse
            }
        }
    },
    "paymentMethodConfiguration": {
        "enabledPaymentMethods": [
            "alipay",
            "bankTransfer"
        ]
    }, 
    onSuccess: function(data) {}, 
    onError: function(data) {}, 
    onReady: function(data) {}, 
    onCancel: function(data) {},
    "billingAddress": {
        "firstName": "John",
        "lastName": "Doe",
        "email": "test224234234324@test.com",
        "organization": "Digital River",
        "phoneNumber": "952-253-1234",
        "address": {
            "line1": "10380 Bren Road W",
            "city": "Minnetonka",
            "state": "MN",
            "postalCode": "55343",
            "country": "US"
        }
    }
}
...

Payment session identifier

...
let configuration = {
    "sessionId": "d5437992-c2d3-4cc9-9be5-c49a9ed68bbb",
    ...
}
...

Options

The options object allows you to:

...
let configuration = {
    ...
    "options": {
        "flow": "checkout",
        "showSavePaymentAgreement": true,
        "showComplianceSection": true,
        "button": {
            "type": "custom",
            "buttonText": "A fully customized button"
        },
        "usage": "unscheduled",
        "showTermsOfSaleDisclosure": true,
        "redirect": {
            "disableAutomaticRedirects": true,
            "returnUrl": "https://mysite.com/success",
            "cancelUrl": "https://mysite.com/cancel"
        },
        "consents": {
            "companyName": "Cool Company",
            "eula": {
                "url":https: //myecommercesite.com/eula
            },
            "termsOfUse": {
                "url":https: //myecommercesite.com/termsOfUse
            }
        }
    },
    ...
}
...

Flow

Use options.flow to specify a mode of operation.

Show save payment agreement

The options.showSavePaymentAgreement attribute determines whether customers are given the option to save a selected payment method to their account.

If set to false (default), customers are not given the option to save their payment details.

Show compliance section

The options.showComplianceSection attribute determines whether Drop-in payments display compliance information.

Making this compliance information available to customers is critical to accessing Digital River's merchant-of-record business model.

If false, then the compliance section is not displayed.

Customizing the text of the Drop-in button

By setting options.button.type to any of the following values, you can customize the text of the Drop-in payments button.

Value
Output (locale of en-US)

continue (default)

payNow

buyNow

completeOrder

submitOrder

You also can personalize the text by setting button.type to custom and button.buttonText to the characters you want to display.

Specifying a source's future use

Show terms of sale disclosure

The options.showTermsOfSaleDisclosure attribute determines whether Drop-in payments display the terms of sale to customers.

If set to true (default), then the terms of sale disclosure are displayed, and customers must accept them.

If set to false, no terms of sale are displayed.

Add disclosures

If you pass consents, then companyName is required. You're not required to provide either eula or termsOfUse, but if you do, you must specify a url that links to the relevant document.

...
let configuration = {
    ...
    "options": {
        ...
        "showTermsOfSaleDisclosure": true,
        ...
        "consents": {
            "companyName": "Cool Company",
            "eula": {
                "url": "https: //myecommercesite.com/eula"
            },
            "termsOfUse": {
                "url": "https: //myecommercesite.com/termsOfUse"
            }
        }
    },
    ...
}
...

Disabling redirects

It's nested disableAutomaticRedirects boolean determines who initiates the redirect to the payment provider. If you want to handle this redirect, then set disableAutomaticRedirects to true.

If you do, then returnUrl and cancelUrl are required and should be assigned the same value.

"options": {
    "redirect": {
        "disableAutomaticRedirects": true,
        "returnUrl": "https://mywebsite.com/paymentCallBack.html",
        "cancelUrl": "https://mywebsite.com/paymentCallBack.html"    
    }
}

If you want DigitalRiver.js to handle redirecting customers to the payment provider, then set disableAutomaticRedirects to false. If you do, returnUrl and cancelUrl are optional, and we ignore any values assigned to them.

"options": {
    "redirect": {
        "disableAutomaticRedirects": false  
    }
}

Expand the first payment method

When Drop-in payments loads options.expandFirstPaymentMethod determines whether the first payment method in the accordion control element is expanded or collapsed.

If expandFirstPaymentMethod is true(default) then the first displayed payment method is expanded.

If expandFirstPaymentMethod is false, then the first displayed payment method is collapsed.

Payment method configurations

...
const configuration = {
    ...
    paymentMethodConfiguration: {
        style: {
            base: {
                color: "#495057",
                height: "35px",
                fontSize: "1rem",
                fontFamily: "apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif",
                ":hover": {
                    color: "#137bee",
                },
                "::placeholder": {
                    color: "#999"
                },
                ":-webkit-autofill": {
                    color: "purple"
                },
                ":focus": {
                    color: "blue"
                }
            },
            invalid: {
                color: "#dc3545",
                ":-webkit-autofill": {
                    color: "#dc3545"
                }
            },
            complete: {
                color: "#28a745",
                ":hover": {
                    color: "#28a745",
                },
                ":-webkit-autofill": {
                    color: "#28a745"
                }
            },
            empty: {
                color: "#000000"
            },

        },
        creditCard: {
            cardNumberPlaceholderText: "Credit Card Number",
            cardExpirationPlaceholderText: "MM/YY",
            cardCvvPlaceholderText: "CVV",
            style: styles,
            mask: true
        },
        onlineBanking: {
            style: styles,
            placeholderText: "Select a Bank",
        },
        googlePay: {
            style: {
                buttonType: "plain",
                buttonColor: "dark",
                buttonLanguage: "en"
            }
        },
        applePay: {
            style: {
                buttonType: "plain",
                buttonColor: "dark",
                buttonLanguage: "en"
            }
        },
        payPal: {
            style: {
                label: "checkout",
                size: "responsive",
                color: "gold",
                shape: "pill",
                layout: "horizontal",
                fundingicons: "false",
                tagline: "false"
            },
        },
        enabledPaymentMethods: ['creditCard'],
        disabledPaymentMethods: ['klarna']         
    },
    ...
};

digitalriver.createDropin(configuration).mount("dropin");

Style

Credit card

The creditCard object allows you to configure how credit cards are displayed.

  • cardNumberPlaceholderText: The placeholder that appears in the card number field. If you specify a value, then localization is not applied.

  • cardExpirationPlaceholderText: The placeholder that appears in the card expiration date field. If you specify a value, then localization is not applied.

  • cardCvvPlacholderText: The placeholder that appears in the card security code field. If you specify a value, then localization is not applied.

  • mask: Indicates whether data entered in the card number and security code fields is automatically masked after successful validation.

Online banking

The onlineBanking object allows you to configure how the online banking payment method is displayed.

  • placeholderText: The placeholder that appears in the online banking selector.

Google Pay

Apple Pay

PayPal

Enable and disable payment methods

Use enabledPaymentMethods and disabledPaymentMethods to enable and disable specific payment methods, respectively.

If you don't define either of these lists, then, by default, Drop-in payments display all transaction-applicable payment methods to customers.

If you do define enabledPaymentMethods, then Drop-in payments only display those that are in this list. However, it's not displayed if your list contains a payment method that doesn't apply to the transaction.

Drop-in payment events

These events provide real-time updates on the status of payment methods.

...
let configuration = {
    ... 
    onSuccess: function(data) {}, 
    onError: function(data) {}, 
    onReady: function(data) {}, 
    onCancel: function(data) {}    
    ...
}
...

onSuccess

It also contains readyForStorage and supportsStorage booleans.

When these variables are true, it signifies customers were presented with that specific disclosure and actively accepted it.

{
    "source": {
        "clientId": "gc",
        "channelId": "paylive",
        "liveMode": false,
        "id": "ab1fce40-e8a3-4b62-86a1-8a524111c4e7",
        "sessionId": "c09e1774-4f6d-47da-8617-ba42a87dd5e8",
        "clientSecret": "ab1fce40-e8a3-4b62-86a1-8a524111c4e7_9b6021c7-c813-4314-b8ee-a1180f4ee80a",
        "type": "creditCard",
        "reusable": false,
        "owner": {
            "firstName": "Fred",
            "lastName": "Flintstone",
            "email": "test@digitalriver.com",
            "phoneNumber": "000-000-0000",
            "address": {
                "line1": "10380 Bren Road West",
                "line2": "Ichikawa-shi",
                "city": "Minnetonka",
                "state": "MN",
                "country": "US",
                "postalCode": "55346"
            }
        },
        "amount": "371.04",
        "currency": "USD",
        "state": "chargeable",
        "creationIp": "209.87.180.27",
        "createdTime": "2022-07-08T10:09:30.503Z",
        "updatedTime": "2022-07-08T10:09:30.503Z",
        "flow": "standard",
        "language": "en",
        "creditCard": {
            "brand": "Visa",
            "expirationMonth": 12,
            "expirationYear": 2023,
            "lastFourDigits": "1111"
        }
    },
    "readyForStorage": false,
    "supportsStorage": true,
    "consents": {
        "eula": false,
        "termsOfUse": false,
        "termsOfSale": true
    }
}

For details on how to handle this event, refer to:

onError

If an error occurs, you receive the onError event. The event's data object contains a type and an array of errors[], each of which typically has a code and a message.

{
    "type": "validation_error",
    "errors": [
        {
            "code": "invalid_card_number",
            "message": "Please enter a valid card number"
        },
        {
            "code": "invalid_expiration_date",
            "message": "Please enter a valid expiration year"
        },
        {
            "code": "incomplete_security_code",
            "message": "Please enter a valid card security code"
        }
    ]
}

onCancel

You receive the onCancel event when customers cancel the payment process (e.g., during the redirect phase) before authorizing payment. The event's data object cancelled the paymentMethod.

{
    "paymentMethod": "googlePay"
}

onReady

You will receive the onReady event when Drop-in payments are ready to accept input. The event's data object contains an array that lists all paymentMethodTypes presented to the customer.

{
     "paymentMethodTypes": [
          "applePay",
          "creditCard",
          "directDebit",
          "googlePay",
          "wireTransfer"
      ]
}

Billing address

...
let configuration = {
    ...
    "billingAddress": {
        "firstName": "John",
        "lastName": "Doe",
        "email": "test224234234324@test.com",
        "organization": "Digital River",
        "phoneNumber": "952-253-1234",
        "address": {
            "line1": "10380 Bren Road W",
            "city": "Minnetonka",
            "state": "MN",
            "postalCode": "55343",
            "country": "US"
        }
    }
}
...
Field
Required or Optional
Description

billingAddress

Required

The customer's billing address.

billingAddress.firstName

Required

The customer's first name.

billingAddress.lastName

Required

The customer's last name.

billingAddress.email

Required

The customer's email address.

billingAddress.organization

Optional

The business customer's organization.

billingAddress.phoneNumber

Required

The customer's phone number.

billingAddress.address.line1

Required

The first line of the address.

billingAddress.address.line2

Optional

The second line of the address

billingAddress.address.city

Optional

City or town.

billingAddress.address.state

Optional

The state, county, province, or region.

billingAddress.address.postalCode

Required

ZIP or postal code.

billingAddress.address.country

Required

billingAddress.address.additional AddressInfo

Optional

Additional address information that may be useful or required for some addresses.

with your . If you provide locale, then Drop-in payments are localized based on that value.

Create a configuration object. For details, refer to .

Create an instance of Drop-in payments by passing the to .

Once invoked, mount() displays Drop-in payments in the .

Sign in to and .

To use Drop-in payments in checkout flows, you'll need to (1) , (2) , and (3) .

You can also .

Before interacting with Drop-in payments, your integration should obtain the customer's billing information and use it to set the billTo.

For more details, refer to on the page.

The checkout's totalAmount should also be finalized. So, when applicable, make sure you've set the checkout's , , shippingDiscount, , and any other data that may affect totalAmount.

Retrieve the checkout's and use it to set in the . In that same object, you should also set:

to checkout

to true

to true

Once the and methods are invoked, Drop-in payments open on the experience page containing the container element. For more details on this process, refer to the section.

If customers supply the required information, click the , and payment is successfully authorized, you should handle by passing source.id to your backend and use your to .

In the following example, the data object of onSuccess contains a whose is chargeable. Since readyForStorage is false, this source can only be used once (i.e., it can't generate multiple ).

During , you can also allow customers to save their payment details for use in future transactions by enabling .

This feature ensures that a customer's payment details are collected in a manner.

When you enable this feature, each displayed is accompanied by a box that customers must check if they want that payment information saved to their account.

If customers check the box and click the , Drop-in payments perform any required authentications and, assuming that process is successful, the data object of contains a that is readyForStorage.

In this case, handle onSuccess by passing source.id to your backend and use your to before you .

Outside of , you can use to collect a customer's payment information and then determine whether the resulting should be saved to the . To do this, you'll need to:

In the , set to managePaymentMethods. This informs Digital River that you're collecting payment information in an account management setting.

Drop-in payments currently support and the . To ensure that customers are only presented with these options, add creditCard and/or payPalBilling to your list in .

There's no to reference, so you shouldn't define . Instead, you need to pass the billing information you collect from customers in .

If customers are replacing an active subscription's recurring payment method, make sure you set to subscription and to true. This prompts Drop-in payments to display a recurring billing agreement and forces customers to accept it.

Drop-in payments automatically (a) require customers to agree to save their payment information for use in future transactions, and (b) don't display compliance information. As a result, you don't need to pass or .

Once you invoke the and functions, Drop-in payments open on your designated account management page. For details, refer to the section.

Customers then select the payment method to add to their account, provide their personal information, and agree to the storage terms. They may also be required to complete , a process handled by Drop-in payments.

If Digital River successfully creates a , the data object of contains a that is readyForStorage. Handle this event by sending source.id to your backend and use your to .

The method requires a configuration object. You can use this object to:

The sessionId references a .

If is checkout, then you should retrieve the and use it to set sessionId. DigitalRiver.js then uses that identifier to look up the payment session and retrieve the customer's billing address that you assigned to the checkout's .

In , Digital River recommends that, before calling , you pass the customer's billing information in the billTo. Doing so lets you use the returned tax data to present customers with finalized tax amounts before moving into the payment collection stage.

If you set to managePaymentMethods, then you don't need to pass a sessionId. But, as a result, you're required to send a customer's billing information in .

If you're , set flow to checkout (default).

If you're , then set flow to managePaymentMethods. This setting informs Digital River that you're collecting and saving a customer's payment information for future transactions and doing so outside of a checkout flow.

You only need to set this flag when is checkout. If options.flow is managePaymentMethods, then the save payment agreement is automatically displayed.

If showSavePaymentAgreement is true, and the selected , customers are presented with a box that they must check to save the payment method. Digital River displays appropriate localized disclosure statements with this setting and handles any needed .

If true (default), then Drop-in payments display to a -specific compliance section. The information in this section is localized based on how you .

These settings don't change the text of the Google Pay and PayPal buttons. For information on styling these buttons, refer to .

The button's text is localized based on the locale you pass when .

Set options.usage to indicate how the will likely be used in future transactions. Passing this value increases the probability that payment providers will approve future authorization requests. The accepted values are subscription, convenience, and unscheduled.

subscription: The is to be used for , made at regular intervals, for a product or a service.

convenience: This value applies mainly to saved payment used for . These are scenarios where customers are typically present during checkout and want to access their payment information quickly. Always select this option if you don't offer subscriptions or don't have unscheduled merchant-initiated transactions.

unscheduled: The is to be used in unscheduled merchant-initiated transactions. These are contracts that occur on a non-fixed schedule using saved card information. Automatic top-ups are one such example. They occur whenever a customer's balance drops below a pre-defined amount.

The terms are localized based on how you .

The terms depend on whether customers make a one-time purchase or .

You can use options.consents to add your end-user license agreement and terms of use to Digital River's disclosures. To make this feature work, must be true.

Once you and Drop-in payments, your consents are appended to Digital River's disclosures.

In , redirect allows you to configure how with a of redirect are handled.

With this configuration, if customers select a redirect payment method, then returns a whose is pending_redirect.

At this point, you can and allow customers to review the transaction's details. If they decide to purchase, and redirect them to the payment provider's portal. While there, customers approve or cancel the transfer of funds. Once they complete either of these actions, they're sent to the location you specified in returnUrl and cancelUrl. When this resource loads, call a function that triggers a server-side refresh order request and then, in the response, check the and the . Use these values to determine whether to (1) display the order confirmation page (i.e., the "thank you" page) or (2) recreate the and redo the payment collection stage.

For details, refer to .

With this configuration, once customers select a payment method, DigitalRiver.js creates a , checks its , and then, if it's redirect, immediately sends customers to the payment provider's portal. If customers approve the transfer of funds and the provider authorizes payment, then returns a whose is chargeable.

The paymentMethodConfiguration allows you to customize payment methods.

Drop-in payments use to capture secure payment details. These elements have a predefined style, but you can also customize their look and feel by defining a style object.

For details, refer to .

style: For details, refer to .

style: For details, refer to .

For details on googlePay.style, refer to .

For details on applePay.style, refer to .

For details on payPal.style, refer to .

The supports the following events:

: Occurs when a is successfully created

: Occurs when there's a validation error

: Occurs when a payment method is cancelled

: Occurs when Drop-in payments are ready to accept input

If Digital River creates a , you receive the onSuccess event.

The event's data contains the .

If readyForStorage is true then (1) customers approved saving the source to their account and (2) Digital River has performed any required .

A readyForStorage value of true doesn't indicate that customers can reuse that same in future transactions. To accomplish that, you must . This request flips the source's value to true.

The supportsStorage value indicates whether the .

If you set to true, then data also contains consents. Its termsOfSale boolean references Digital River's terms of sale and its eula and termsOfUse booleans indicate whether in the contains a eula.url and termsOfUse.url.

in the section

in the section

You can use billingAddress to pass a customer's billing information. For details on when to use this object, refer to the in the section.

A two-letter Alpha-2 country code as described in the international standard.

Digital River Dashboard
enable payment methods
PSD2 and SCA-compliant
reusable payment method
SCA
payment session
payment method supports reusability
SCA
payment source
Handling redirect payment methods
elements
source
source
SCA
Drop-in payments
Drop-in payments builder
Building payment workflows page
our supported payment methods
get started
checkout flows
account management flows
Step 1: Include DigitalRiver.js
Step 2: Include the base CSS file
Step 3: Initialize DigitalRiver.js with your public key
Step 4: Create a Drop-in payments container
Step 5: Create a Drop-in payments configuration object
Step 6: Use the configuration object to create an instance of Drop-in
Step 7: Mount Drop-in payments on a checkout or account management page
Step 8: Enable the payment method in Digital River Dashboard
checkout
account management
Configuring Drop-in payments
designated container
finalize your checkout
configure and mount Drop-in payments
handle the onSuccess event
allow customers to save their payment information in checkout flows
flow
showComplianceSection
showTermsOfSaleDisclosure
create
mount
Getting started
checkout flows
showSavePaymentAgreement
source
configurable button
onSuccess
Build the configuration object
Create and mount Drop-in payments
Handle onSuccess
configuration object
flow
PayPal Billing Agreement
credit cards
enabledPaymentMethods
paymentMethodConfiguration
payment session
sessionId
billingAddress
usage
showTermsofSaleDisclosure
showSavePaymentAgreement
showComplianceSection
create
mount
Getting started
createDropIn()
Pass a payment session identifier
Define key options
Customize payment methods
Configure how you handle events
Send the customer's billing address
options.flow
billingAddress
Define a flow
Enable save payment agreements
Show compliance information
Define a payment's intended use
Enable terms of sale agreements
Add disclosures
Disable automatic redirects
Customize button text
Expand first payment method
using Drop-in payments in a checkout flow
using Drop-in payments in an account management flow
options.flow
selling entity
initialize DigitalRiver.js
Payment method configurations
initializing DigitalRiver.js
initialize DigitalRiver.js
showTermsOfSaleDisclosure
create
mount
configuration object's
Drop-in payments' configuration object
source
onSuccess
onError
onCancel
onReady
showTermsOfSaleDisclosure
consents
configuration object
Handle onSuccess
Using Drop-in payments in checkouts
Handle onSuccess
Using Drop-in payments in an account management portal
Payment session identifier
Configuring Drop-in payments
ISO 3166
Initialize the DigitalRiver.js library
Providing address information
shippingChoice
taxIdentifiers[]
source
Drop-in payments
checkout flows
source
onSuccess
recurring transactions
payment session's
source
onSuccess
configuration object
sessionId
Drop-in payments' configuration object
configurable button
onSuccess
options.flow
checkout flows
createDropin()
options
onSuccess
payment.session.id
createDropin()
Billing address requirements
shipFrom
shipTo
source supports reusability
Styling an element container
Styling an element container
Styling an element container
payment.session.id
billTo
state
flow
state
flow
state
reusable
create the order
public API key
secret API key
secret API key
secret API key
Google Pay element styles and customization
PayPal element style options
Apple Pay styles and customization
checkout's
charges
source
customer's record
checkout's
checkout's
source
source
sources
source
source
source
sources
order's
checkout
source
associate the source with the checkout
associate the source with the customer
associate the source with the checkout
associate the source with the customer
associate the source with the customer
associate the source with the checkout
one-off transactions
buy a subscription product
state
state