Resolve checkout-sdk

Overview

This guide is for merchant developers integrating Resolve into their e-commerce site. The goal is for your business to offer Resolve as a payment option to your customers as quickly and easily as possible. After integrating Resolve, your site will:

  • Offer Resolve as payment option on the checkout page

  • Process Resolve charges in your order management system

  • Load Resolve's credit application on your website

The integration steps are:

  1. Request a sandbox account

  2. Add Resolve.js to your website

  3. Add Resolve credit terms application on your website

  4. Initiate a checkout

  5. Capture charge to receive funds

  6. Test your integration

  7. Deploy to production

Instructions

Sandbox development

Request a merchant sandbox account

Develop and test the Resolve integration in your development environment connected to our sandbox. To get started, reach out to your Resolve account manager to request sandbox API credentials.

Create a sandbox customer account

Go to https://app-sandbox.resolvepay.com/<your_merchant_id> and submit a test customer application. Resolve will approve your sandbox buyer account for testing purposes.

1. Add Resolve.js to your website

Add the Resolve.js embed code to the head of your global page template.

<script src="//app.resolvepay.com/js/resolve.js"></script>

2. Add Resolve credit terms application on your website

Before a customer can pay with credit terms, they must have applied and been approved for a Resolve account. You'll want to allow customers to apply directly from your website.

Common places to insert Resolve's application include:

  • home page via a banner

  • product detailed page

  • dedicated financing landing page

  • wholesale, large orders, or commercial/trade program landing page

  • checkout page

After adding the Resolve.js embed code, you’ll use the following command to open the credit application. If you prefer to redirect to Resolve's hosted application page rather than open a modal on your website, then set modal: false .

You can find full example of the script below here: https://docs.resolvepay.com/docs/add-credit-application-modal

resolve.application({
  sandbox: true, // Do not include this line if implementing in production environment
  modal: true,
  merchant: {
    id: 'MERCHANT_ID',
  },
});

You can get your MERCHANT_ID from your Resolve account manager.

3. Initiate a checkout

When a customer is ready to pay with credit terms, you should launch the Resolve checkout. Typically, Resolve will add as another payment method in your checkout flow.

The following command does the following:

  1. Sends the checkout object to our checkout API

  2. Redirects the customer to the Resolve checkout process on the resolvepay.com domain or shows them a Resolve modal

  3. Validates the required data in the checkout object

resolve.checkout({
  sandbox: true, // INCLUDE ONLY IF USING SANDBOX ENVIRONMENT (default is production)
  modal: true,
  merchant: {
    id:          'MERCHANT_ID',
    success_url: 'https://www.merchantsite.com/confirm',
    cancel_url:  'https://www.merchantsite.com/cancel',
  },
  customer: {
    first_name: 'First',
    last_name:  'Last',
    name:       'First Last', // (optional) full name
    phone:      '',
    email:      '',
  },
  shipping: {
    name:            'First Last',
    company_name:    'Company Name', // optional
    phone:           '4153334567',
    address_line1:   '633 Folsom St',
    address_line2:   'FL 7', // optional
    address_city:    'San Francisco',
    address_state:   'CA',
    address_postal:  '94017',
    address_country: 'US',
  },
  billing: {
    name:            '',
    company_name:    '',
    phone:           '',
    address_line1:   '',
    address_line2:   '',
    address_city:    '',
    address_state:   '',
    address_postal:  '',
    address_country: '',
  },
  items: [{
    name:       'Product Name',
    sku:        'ABC-123',
    unit_price: 19.99,
    quantity:   3,
  }],

  order_number: 'ORDER_NUMBER', // (optional) merchant internal order id
  po_number:    '', // (optional) customer's purchase order #

  shipping_amount: 10.00,
  tax_amount:       5.00,
  total_amount:    74.97,
  
  metadata: { // (optional) this will help Resolve debug potential issues
    platform_resolve: '1.0.0',
    platform_type: 'checkout-sdk', 
    platform_version: '1.0.0',
  },
});

Calling this function will open the Resolve checkout where the customer will be asked to authenticate themself and confirm payment.

If you prefer to redirect to a full-page checkout instead of opening a modal window, set modal: false .

On successful checkout

After a successful checkout, an authorized charge is created. This is a pending charge that will show up in both the merchant's and customer's dashboard.

In addition, the customer will be redirected to success_urlwith a charge_id appended in the query string. 

https://www.merchantsite.com/confirm?charge_id=czTrT9opfkBaYZNh

When the customer arrives at the success_url, you should:

  1. Redirect the customer to the order confirmation page or display an order confirmation message

  2. Store the charge_id in your order management system, since it will be used to capture the charge

  3. Mark the order payment as pending

If you're fulfilling the customer's order immediately, then you should capture the charge (see instructions in the next section).

If you aren't fulfilling your order immediately, it's not advisable to capture the charge until you're ready to do so. Please speak with your Resolve account manager regarding best practices around capturing charges.

On unsuccessful checkout

If the customer cancels the checkout, they will be redirected back to cancel_url . Typically, this page is the payment method selection page in the checkout flow.

If the customer never arrives at the success_url page, you should assume the payment has failed and you should not fulfill the order.

4. Capture charge to receive funds

To receive funds and start the Net 30-60-90 clock for the customer, you will need to capture the charge using the charge_id.

Captures payment by making an authenticated API request (server-side) with the charge_id. A billing statement will be sent to the customer when this action occurs.

POST https://<merchant_id>:<secret_key>@app.resolvepay.com/api/charges/<charge_id>/capture

Success response

# charge object
{
  "id": "S189qSj9f",
  "number": "R334-66S9",
  "order_number": "ORDER NUMBER",
  "amount": 74.97,
  "fee": 3.75,
  "captured": true,
  "captured_at": "2018-03-30T17:54:08.329Z",
  "created_at": "2018-03-30T05:26:38.517Z",
  "updated_at": "2018-03-30T17:54:08.330Z",
  "merchant_cart": {
    ... // checkout object
  }
}

Example checkout code snippet

https://gist.github.com/bnguyen06/7049383695fd93ec48db6db14eccc9d6

5. Test your integration

After completing your integration, do a thorough testing of both your front-end and back-end integration in our sandbox to ensure that both the user experience and your order management system work as expected.

6. Deploy to production

Coordinate testing with Resolve

Before deploying the Resolve integration to your production site, Resolve will need to test it in your development or staging environment connected to our live environment. Contact your Account Manager to coordinate this test.

Connect to the production Resolve environment

Retrieve your production merchant_id and secret API keys from your Resolve account manager. You can also locate the merchant_id and secret API keys in your dashboard under Integrations > Direct API.

Remove any { sandbox: true } options from your application and checkout code to use our live environment.

PreviousProcessing transactions (WooCommerce)NextCancel an Uncaptured Charge

Last updated