Before you start
This guide assumes that you know how to
Accept payments with Stripe ACH
Prepare the client session
Stripe ACH 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 Name | Required | Description |
|---|---|---|
3-letter currency code in ISO 4217 format. For Stripe ACH only USD is supported. | ||
| Details of the line items of the order | ||
In order to have Stripe ACH successful, you need to pass your device info: IP address and user agent in the metadata.
|
Prepare the SDK for payments
Show Universal Checkout
Pass device info when creating the client session
Stripe ACH 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.
1234567891011121314
{ ... "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.
123456
const options = { /* Other options... */ stripe: { publishableKey: 'pk_...', }}
Additionally, Stripe ACH 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.
1234567891011
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.
123456789101112131415
const options = { /* Other options ... */ style: { paymentMethodButton: { background: string, borderRadius: number | string, boxShadow: string, borderColor: string, height: number, primaryText: TextStyle, logoColor: logoColor, marginTop: string, }, },}
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
PENDINGin the Primer Dashboard and depending on the user actions or external factors, like insufficient funds in the bank account, it will be eitherDECLINED,CANCELLEDorSETTLEDfor 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 InstitutionandSuccessaccount 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 toSETTLED.
Go live
You don’t need to do anything particular to go live — just make sure to use production credentials.