Headless SDK (Payment)

Yuno's Headless SDK gives you full control over the checkout UX and UI without requiring you to be PCI-compliant. With Headless SDK, you can make card payments or enroll card information into your customers' accounts. Access the Headless SDK (Enrollment) for more information. This page covers the payment operation. Below you can check the guides available.

Payment workflow

The following image describes the complete payment workflow. Below, each step is described in detail.

Step 1: Create a customer (Optional)

First, create a customer. After creating the customer, you can associate payment methods with their account. You can skip this step if you already have a customer ID from a previous customer creation.

Use the Create Customer endpoint to create new customers and get a customer id. The id will be used in the following steps.

The customer_session parameter is optional.

You can skip this step if you already have a customer ID and plan to provide it directly when creating the payment. Alternatively, you may choose to omit this step entirely.

Step 2: Create a checkout session

Next, create a checkout session. A new checkout session must be created for each new payment. This session provides access to all available payment methods (whether previously enrolled or not) for a specific customer.

Use the Create Checkout Session endpoint and provide the customer id to get a new checkout_session.

Step 3: Display payment methods

Query the available payment methods using the Retrieve Payment Methods endpoint with the checkout_session. Show these methods to the customer so they can select their preferred payment method to execute the payment.

Step 4: Implement the SDK and get a one-time token

After the customer selects the payment method, initialize Headless SDK to generate a one-time token before proceeding with the payment.

To initialize Yuno's Headless SDK, provide your API credentials and the checkout_session. Follow these steps:

1. Include the library in your project.
2. Initialize the SDK with your public key.
3. Start the checkout process by calling yuno.apiClientPayment() with your configuration.
4. Collect the user information and generate the one-time token using the apiClientPayment.generateToken function.

For more information on how to initiate Yuno's SDK, refer to the platform-specific guide:

Step 5: Create the payment

With the one-time token, create the payment. This process gathers all order details, including customer specifics, total amount, currency, products, and shipping details. Use the Create Payment endpoint, providing the one_time_token.

The response from Create Payment will include the sdk_action_required field, which indicates if additional actions are required based on the payment type:

• Synchronous payment: If sdk_action_required is false, the payment is complete.
• Asynchronous payment: If sdk_action_required is true, additional actions are required to complete the payment. Use the continuePayment function to complete the payment. See the instructions in Step 6.

Step 6: Continue payment (if needed)

If sdk_action_required is true, call continuePayment() to display additional screens or steps for the customer.

Yuno recommends incorporating the continuePayment() method because some asynchronous payment methods require additional actions from the customer to complete the payment.

Step 7: Receive payment result through webhook

Yuno recommends configuring webhooks in your dashboard. Webhooks are the best way to ensure your system is up-to-date with payment progress and status. Since event notifications trigger automatically, your system won't need to perform recurrent requests to Yuno.

Enroll a credit card while paying

With Headless SDK, you can save credit/debit cards for future purchases within the same payment request without the enrollment integration. You can obtain the vaulted token while executing the apiClientPayment.generateToken function in Step 4.

Provide a checkbox on your checkout for users to choose if they want to save their card for future use. If the user selects this option, set payment_method.card.save = true when calling the apiClientPayment.generateToken function. You'll receive the vaulted_token in the function response.

After enrolling in a payment method, you can use the vaulted token to perform payments. To access information about the payment methods enrolled by each user, you can use one of the following endpoints:

• Get payment methods by checkout session.
• Get payment methods by customer.