# Checkout SDK

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


## Integration steps

1. [Request a sandbox account](#sandbox-development)
2. [Add Resolve.js to your website](#step-1-add-resolvejs-to-your-website)
3. [Add Resolve credit terms application on your website](#step-2-add-resolve-credit-terms-application-on-your-website)
4. [Initiate a checkout](#step-3-initiate-a-checkout)
5. [Capture charge to receive funds](#step-4-capture-charge-to-receive-funds)
6. [Test your integration](#step-5-test-your-integration)
7. [Deploy to production](#step-6-deploy-to-production)


## Sandbox development

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.

## Step 1: Add Resolve.js to your website

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


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

## Step 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 placement locations 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`.


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

## Step 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



```javascript
resolve.checkout({
  sandbox: true,
  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',
    phone:      '',
    email:      '',
  },
  shipping: {
    name:            'First Last',
    company_name:    'Company Name',
    phone:           '4153334567',
    address_line1:   '633 Folsom St',
    address_line2:   'FL 7',
    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',
  po_number:       '',
  shipping_amount: 10.00,
  tax_amount:      5.00,
  total_amount:    74.97,
  metadata: {
    platform_resolve:  '1.0.0',
    platform_type:     'checkout-sdk',
    platform_version:  '1.0.0',
  },
});
```

Set `modal: false` for a full-page checkout instead of a modal window.

### 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.

The customer is redirected to your `success_url` with the `charge_id` appended:


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

On your success page:

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.


For immediate fulfillment, capture the charge right away. Otherwise, consult your account manager about capture timing best practices.

For invoices in the "Pay Now" flow, see the [Checkout SDK Invoice Flows](/guides/checkout-sdk-invoices) guide.

### 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 reaches the success page, assume the payment failed and do not fulfill the order.

## Step 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`.

| Environment | Endpoint |
|  --- | --- |
| Production | `POST` `https://app.resolvepay.com/api/charges/<charge_id>/capture` |
| Sandbox | `POST` `https://app-sandbox.resolvepay.com/api/charges/<charge_id>/capture` |


For legacy integrations, see the [v2 API documentation](https://app.resolvepay.com/docs/api/v2).

Use either HTTP Basic Auth (`merchant_id` + `secret_key`) or Bearer token auth.

For request/response schemas and live examples, see the Merchant API reference:

- [Capture a charge](/merchant-api/openapi/charges/capturecharge)


## Step 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.

## Step 6: Deploy to production

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.

### Connect to the production Resolve environment

For production credential setup and authentication configuration, see the [Direct API Access and Authentication](/guides/direct-api-access-and-authentication) guide.

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