Customer On-File Payments

Cash App Pay makes it easy to checkout and make future purchases through an on-file payment grant.

Cash App Pay calls this on-file payment grant Cashtag on file. The on-file payment grant is created and associated with the merchant’s customer account. Then the merchant uses the on-file payment grant to charge the customer when they shop at the merchant’s online store.

On-File payment grants make future purchases easier and quicker for the customer. This is because the customer does not have to add their payment information and approve the payment every time they make a transaction. There is no need for the customer to go through an approval process, as merchants know the customer, and the customer is registered with Cash App.

Follow the sections and steps below to enable this feature:

1. Setup Cash App as a Payment Method.

When the customer approves the purchase, you, the merchant, get a Cash App on-file payment grant and customerId. You use these to associate and store with the customer’s account for future purchases. Use the example code below:

1
const cashAppPayOnFileOptions = {
2
  button: true,
3
  onComplete: function (event) {
4
    // Store and associate the returned grantId and customerId with your customer
5
    event.data.grantId && setCustomerGrantId(event.data.grantId)
6
    event.data.id && setCustomerId(event.data.id)
7
  },
8
  redirectConfirmUrl: window.location.href,
9
  cashAppBrandId: 'BRAND_dmp63stvn7nqcqdw3mz1w76w7'
10
}
11
12
afterpayButton.initializeForCashAppOnFileGrant({
13
  countryCode: 'US',
14
  cashAppPayOnFileOptions
15
})

2. Purchase Flow

For a signed-in customer, you, the merchant, can use a Cash App grantId and customerId to complete a Cash App pay purchase. We assume that you have already retrieved these two values.

1
const purchaseOnFileOptions = {
2
  onComplete: function (event) {
3
    // do things with the virtualCard
4
    const { virtualCard, status, token, grantId, cashTag, id } = event.data
5
  },
6
  redirectConfirmUrl: window.location.href,
7
  // Provide the stored grantId and customerId 
8
  customerId: getCustomerId(),
9
  grantId: getCustomerGrantId()
10
}
11
12
bindAttributesToButton(afterpayButton)
13
afterpayButton.purchaseWithOnFileGrant(purchaseOnFileOptions)

3. Setup Cash App as Payment Methods During the Purchase Flow

From your point of view, this is a combination of the two previous use cases above.

To combine the flows, include the requestOnFileGrant: true within cashAppPayOptions for afterpayButton.initializeForCashAppPay().

1
bindAttributesToButton(afterpayButton)
2
afterpayButton.initializeForCashAppPay({
3
  ...cashAppPayOnFileOptions,
4
  requestOnFileGrant: true
5
})

Suggested disclaimer copy for $Cashtag on-file

Cash App Pay suggests that you add this disclaimer when a customer selects $Cashtag on-file for payment: