digital-river-react

WARNING: This is a pre-release version and the minor changes could have breaking changes. A stable version will have a version of 1.0.0 or greater.

This is a react library that wraps DigitalRiverJS.

It will automatically add the needed JS and CSS files to the DOM when the <DigitalRiverJS /> component is added.

Drop In Usage

Drop-in payments is a fast and easy way to add payment methods to your store’s checkout experience.

Drop-in payments is Digital River's all-in-one solution for accepting payments and ensuring compliance. Use this solution for a quick way to accept payments with ease.

Only add the <DropIn /> component when the billing address has been collected / the Dropin Component is ready to show.

Docs: https://docs.digitalriver.com/digital-river-api/payments/payment-integrations-1/drop-in

Options

Note: Either sessionId or billingAddress need to be provided.

Prop	Type	Description	Default Value
sessionId	string	Payment session ID.
billingAddress	object	Object of the users billingAddress.
flow	string	checkout (default) / managePaymentMethods	checkout
showSavePaymentAgreement	boolean	Display the save payment agreement on each payment method.	false
showComplianceSection	boolean	Show the compliance footer.	true
showTermsOfSaleDisclosure	boolean	Show the terms of sale disclosure.	false
usage	string	default (default) / subscription / convenience / unscheduled	default
buttonType	string	payNow (default) / buyNow / completeOrder / submitOrder / custom	payNow
buttonText	string	buttonType must be set to 'custom', then a custom text can be provided.
onSuccess	function	function (sourceData) - Object containing source and other data.
onCancel	function	function (result) - When a user closes a payment method. Contains the payment method closed.
onError	function	function (error) - Object containing error information
onReady	function	function (ready) - When DropIn is rendered. Returns an Object containing the payment methods available to the user.
className	string	CSS class to be applied to the parent div.

Once you have gathered the billing address, then load Dropin by passing in the required fields.

Add imports

import {DigitalRiverJS, DropIn, ButtonType, Flow, Usage} from "digital-river-react";

Basic Usage (default configuration)

Inside the render function:

<DigitalRiverJS
  APIKey={PUBLIC_API_KEY}
  locale={'en'}
>

     <DropIn
        className={loading ? 'hidden' : ''}
        sessionId={sessionId}
        billingAddress={billingAddress}
        onSuccess={(paymentData) => console.log('Payment Data', paymentData)}
        onError={(error) => { console.error(error); }}
        onReady={() => setLoading(false)}
    />   
      
</DigitalRiverJS>  

Advanced Usage

You can override the configuration depending on what Dropin is being used for. See the documentation for the different values and their usages.

<DigitalRiverJS
  APIKey={PUBLIC_API_KEY}
  locale={'en'}
>

     <DropIn
        className={loading ? 'hidden' : ''}
        sessionId={sessionId}
        billingAddress={convertBillingAddressToDropInBillingAddress(billingAddress)}
        onSuccess={onPaymentSource}
        onError={(error) => { console.error(error); }}
        onCancel={(cancelEvent) => console.log('User closed', cancelEvent)}
        onReady={() => setLoading(false)}
        flow={Flow.Checkout}
        showSavePaymentAgreement={true}
        showComplianceSection={true}
        showTermsOfSaleDisclosure={false}
        usage={Usage.Default}
        buttonType={ButtonType.PayNow}
        buttonText={''}
    />

</DigitalRiverJS>