Create a Shopper Request

To use the Pay Kit SDK to create a shopper request, a merchant loads the script from Cash App's global CDN. The following scripts are available for sandbox development and production environments:

• Sandbox development:
<script src="https://sandbox.kit.cash.app/v1/pay.js"></script>

• Production:
<script src="https://kit.cash.app/v1/pay.js"></script>

Initialize the Pay Kit

Once the scripts are loaded, merchants initiate the Pay Kit with a clientId provided by Radial Payment Solutions (RPS):

const pay = await window.CashApp.pay({ clientId: 'YOUR_CLIENT_ID' });

The preceding code is doing the following:

• window.CashApp.pay(...): This function call initiates a payment using the Pay Kit. window.CashApp is an object that contains the pay method, which starts the payment process.It becomes available after including the Pay Kit script on the webpage.

• await: This keyword is used because window.CashApp.pay(...) is an asyncronous function that returns a Promise. A Promise is an object representing the completion or failure of an asynchronous operation. In this case, await is used to wait for the payment process to complete before moving on to the next line of code.

• { clientId: 'YOUR_CLIENT_ID' }: This is the configuration object passed to the pay method.

  Note: There are separate clientIds for sandbox development and production.

Render the Cash App Pay and Create the Customer Request

Pay Kit provides a fully managed UI that you can customize to fit the checkout experience. To add the CashApp button, a division, (that is, "div") container needs to exist that the Cash App UI window can populate.

html: <div id="cash-app-pay"><!-- Populated by Pay Kit --></div>

Generate the Cash App Pay Button

Merchants initiate a request to perform actions on a customer's account. Approved actions result in grants that can be used to create payments. The Pay Kit exposes a customerRequest method that creates a Customer Request with one or more actions. Note: Once you make this call, the Cash App Pay button appears. When the customer clicks the button using a web-based checkout, the QR code is shown.

await pay.customerRequest({
                        actions: {
                        payment: {
                        amount: {
                        currency: "USD",
                        value: 1234,
                        },
                        scopeId: 'merchant_id',
                        },
                        },
                        redirectURL: "redirect_url",
                        referenceId: "reference-id",
                        });

                    await pay.render('#cash-app-container');

This code generates the Cash App Pay button when the CustomerRequest call is made.

Listen for Events

The Pay Kit SDK emits a number of events throughout the lifecycle of a payment. One of the most important ones is CUSTOMER_REQUEST_APPROVED, which is emitted after a shopper approves a one-time payment or other action. You use this data to create a payment, as shown in the following example.

cashAppPay.addEventListener('CUSTOMER_REQUEST_APPROVED', (data) => {
                        grandId = data.grants.payment.grantId;
                    });

Events

PayEventData: CustomerInteractionData | CustomerRequestData

CustomerInteractionData

CustomerRequestData

Customer

The Customer who approved the request.

Grants

The map of action to details about a grant may have keys payment or onFile (same as Actions below). GrantDetail has the following properties:

Parameters

Once the Grant ID is received, the webstore should send the Authorization request with the Grant Id. Refer to Create Payment for the next steps.