​
Before you begin

This guide assumes that you know how to

​
Accept payments with ACH via Stripe

​
Prepare the client session

ACH via Stripe requires the following data to process a payment successfully. Pass the following data in the client session, or in the payment request (for manual payment creation).
Parameter NameRequiredDescription
currencyCode✓3-letter currency code in ISO 4217 format. For ACH via Stripe, only USD is supported.
order
↳ lineItems		✓Details of the line items of the order
metadata✓In order to have ACH via Stripe successful, you need to pass your device info: IP address and user agent in the metadata.metadata.deviceInfo.ipAddress and metadata.deviceInfo.userAgent
paymentMethod✓
JSX
"paymentMethod": {
    "vaultOnAgreement": true,
    "paymentType": "FIRST_PAYMENT"
  }
That should be passed if one wishes to vault ACH via Stripe.

​
Prepare the SDK for payments

​
Show Universal Checkout

Pass device info when creating the client session ACH via Stripe requires that a mandate is accepted before the payment is completed.Mandates that are accepted online require IP address and user-agent of the device that the payment is made from.Specify this information when creating the client session, otherwise payments will remain in Pending state.
JSON
{
  ...
  "customer": {
    "emailAddress": "...",
    ...
  },
  "metadata": {
    "deviceInfo": {
      "ipAddress": "127.0.0.1", // IP address of the device accepting the mandate
      "userAgent": "Mozilla/5.0" // user-agent of the device accepting the mandate
    }
  },
  ...
}
Universal Checkout
ACH via Stripe is automatically presented to the customer when calling Primer.showUniversalCheckout with the Stripe publishable key set up.
Typescript
const options = {
    /* Other options... */
    stripe: {
        publishableKey: 'pk_...',
    }
}
Additionally, ACH via Stripe requires to show a Mandate to the user. You can either pass the full mandate text yourself via SDK options, or pass a merchant name and rely on the mandate text Primer provides you with.
JSX
const options = {
    /* Other options... */
    stripe: {
        publishableKey: 'pk_...',
        mandateData: {
          merchantName?: "Your Merchant Name", 
          fullMandateText?: "Your mandate text" // you can either pass merchantName or fullMandateText, not two at the same time.
          // In the case of passing a fullMandateText, you need to pass it localized already. 
        }
    }
}

​
Customization

Check the customization guide to learn how to customize payment method buttons.
Typescript
const options = {
  /* Other options ... */
  style: {
    paymentMethodButton: {
      background: string,
      borderRadius: number | string,
      boxShadow: string,
      borderColor: string,
      height: number,
      primaryText: TextStyle,
      logoColor: logoColor,
      marginTop: string,
    },
  },
}

​
Vaulting

When creating client session, vaultOnAgreement flag should be passed, along with paymentType:
JSX
"paymentMethod": {
    "vaultOnAgreement": true,
    "paymentType": "FIRST_PAYMENT"
  }
Note that the vaultOnAgreement flag is supported starting with API version 2.4. In order to vault ACH via Stripe accounts, pass the following data in the Client Session:
Parameter NameRequiredDescription
customerId✓A unique identifier for your customer
Minimum version of Web SDK: 2.47.0.ACH via Stripe payment tokens can be vaulted automatically on successful agreement if the vaultOnAgreement flag is turned on when creating the client session.
JSX

"paymentMethod": {
    "vaultOnAgreement": true,
    "paymentType": "FIRST_PAYMENT"
  }

​
Test

You can test payments using USD as the currency.

​
Sandbox testing

  • After selecting the payment method button in the Checkout, the page will navigate to a form
  • After you complete the form, the Stripe pop-up will appear
  • After finishing the steps inside the Stripe pop-up, the user will be taken back to the Checkout to confirm / decline mandate
  • At the end of this flow, the payment status will be first PENDING in the Primer Dashboard and depending on the user actions or external factors, like insufficient funds in the bank account, it will be either DECLINED, CANCELLED or SETTLED for successful completion in Primer Dashboard
  • To simulate the receiving of funds and transition the payment to SETTLED, you can choose in the Stripe pop-up: Test Institution and Success account in the next screen. Next you will be taken back to Checkout to confirm the mandate. Primer will receive a webhook and subsequently update the payment to SETTLED.

​
Go Live

You don’t need to do anything particular to go live — just make sure to use production credentials.