Enable customer management options

Learn how to enable customer management options in the store.

The custom application can be used to manage saved payment methods and to upload tax certificates.

Managing saved payment methods

You can save Digital River payment methods for a customer and they will be available for selection in the Drop-in Checkout. Summary details of the payment method will also be available on the commercetools customer to facilitate display and removal within an account area.

Saving payment methods

To save a credit card you must use the Digital River drop-in Javascript library to capture the card details and then update the commercetools customer with the id of the source returned by Digital River. To do this use the following steps:

1. You will need your Digital River public API key. This is configured in the Digital River -> API Keys section of the commercetools Merchant Center and can be retrieved using the custom objects API with the digital_river container and the key public_api_key.

2. Load the drop-in library from https://js.digitalriverws.com/v1/DigitalRiver.js.

3. Gather a billing address for the credit card.

4. Render the credit card form.

   const apiKey = <your PUBLIC API key>; 
   const config = {
     options: {
       flow: "managePaymentMethods",
     },
     paymentMethodConfiguration: {
       enabledPaymentMethods: ['creditCard'], // only credit cards are supported
     },
     billingAddress: <the billing address>,
     onReady: function () {
       // handle onReady if required
     },
     onSuccess: async function (data) {
       await savePaymentDetails(data);
     },
     onCancel: function () {
       // handle onCancel if required
     },
     onError: function (error) {
       // handle onError if required
     }
   };
   const drPaymentMethods = new window.DigitalRiver(apiKey);
   const form = drPaymentMethods.createDropin(config);
   form.mount(<id of div in the page in which to render>);

5. Save the source against the commercetools customer.

   1. The data object passed to savePaymentDetails has the source id in data.source.id.

   2. Set the custom type of the customer to drCustomerFields, only when not already set (setting this when already set will clear existing field values).

   3. Set the source id on the custom field drAttachSource. This field will be automatically cleared as part of the save process.

6. Optionally, wait for the source to be saved. Saving is an asynchronous process, so if you want to display when this is complete you will need to poll the commercetools customer resource waiting until the drSources property is updated with the source you have saved.

See the Digital River documentation for more details on the managePaymentMethods flow.

Sources can also be saved in the drop-in checkout. You do not need to do anything to enable this for registered users. Sources added this way will automatically be added to the commercetools customer.

Displaying payment methods

When a payment method is saved, summary details are added to the drSources custom field on the commercetools customer. This is a set of strings where each string is JSON encoded data about the payment, similar to

{
  "id":"0472f4b5-87b4-4e90-bf02-d86be18a2ed6",
  "creditCard": {
    "brand":"Visa",
    "expirationMonth":12,
    "expirationYear":2023,
    "lastFourDigits":"1111"
  }
}

The data in the creditCard block is simply the data we receive from Digital River in the webhook.

Deleting payment methods

To delete a payment source from a customer, simply set the value of the drDetachSource custom field on the customer. This field will be automatically cleared and the source removed from the customer in Digital River and commercetools.

Again, this is an asynchronous process. So if you want to display when this is complete you will need to poll the commercetools customer resource waiting until the drSources property is updated with the specified source removed.

Adding a tax certificate

Note: This feature is not currently enabled. You can add a tax certificate to a customer, but Digital River will not use it

US customers can upload a tax certificate to Digital River to allow them to make tax-exempt purchases. To perform this via the integration with commercetools follow these steps:

1. Gather details of the tax certificate from the customer. The tax certificate file should be an image.

2. Set the custom type of the customer to drCustomerFields, only when not already set (setting this when already set will clear existing field values).

3. Set the custom fields as indicated in the table below.

4. Updating Digital River is an asynchronous process. To check it completes poll the commercetools customer and waits until the drTaxCertificateFileId custom field is updated.

Custom field	Value	Notes
drTaxCertificateFileContents	Base64 encoded contents of the tax certificate	In JS you can use FileReader().readAsDataURL(file). Automatically cleared
drTaxCertificateFileName	Name of the tax certificate file
drTaxCertificateStartDate	Validity start date of the tax certificate	YYYY-MM-DD format
drTaxCertificateEndDate	Validity end date of the tax certificate	YYYY-MM-DD format
drTaxCertificateAuthority	Two letter state code of the issuing state