🔒 Embedded Checkout

📷 Product Diagram

📝 Overview

This is an SDK designed to integrate UseePay’s embedded checkout experience. It allows developers to easily and securely accept subscription payments.

💳 Supported Payment Methods

(Refer to the official documentation for the latest list.)

🚀 Quick Start

Create a PaymentIntent

On your server, create a PaymentIntent to manage the full lifecycle of the customer’s payment.
In the response, return the clientSecret and id. These will be used on the frontend to complete the payment.
Click to view API docs

1. Include UseePay SDK:

2. Verify SDK Availability:

3. Initialize UseePay with your OpenAPI Public Key:

🧠 Note:
You do not need to manually specify whether you’re using sandbox or production.
UseePay SDK will automatically detect the environment based on the prefix of your public key:

PK_TEST_**** → sandbox

PK_**** → production

4. Initialize UseePay Elements:

Example:

5. Create the Payment Element:

Example:

Option	Type	Default	Description
`layout`	`'accordion'` \| `Object`	`'accordion'`	Specifies the layout for the Payment Element. You can pass a string (`'accordion'`) to use the default accordion layout, or pass an object for fine‑grained control.

Detailed explanation:

String ('accordion') – When you pass only the string 'accordion', the Payment Element renders using the accordion layout with its default settings.

Object – You can also pass an object to configure the accordion layout with additional custom parameters, giving you more control over the rendering behavior.

`layout` Object Configuration

Field	Type	Required	Default	Description
`type`	String	Yes	`'accordion'`	The layout style of the Payment Element.
`hideHeaderWhenSingle`	Boolean	No	`false`	When set to `true`, automatically hides the accordion header if only a single payment method is available.

6. Mount the Element to the DOM:

Example:

7. Confirm the Payment:

🔍 Parameters

Parameter	Type	Description
`paymentIntent`	Object	The resulting payment intent
`error`	Object	Error object if any occurs

`error` Object

Field	Type	Description
type	String	Type of error

Possible `error.type` Values

Value	Description
`no_select_payment_method`	No payment method selected
`validation_error`	Form validation error

✅ Payment Status

⚠️ When calling confirmPayment, always check the result status and handle accordingly.
📘 Click here to view full result code documentation

If you’ve followed all the steps above — congratulations!
You’ve successfully integrated the UseePay Embedded Subscription Checkout.

🎉 Tips

If you want to use a specific payment method, you should set payment_method_types when creating the paymentIntent.

Video Demo

If the video doesn’t load, please click the link:
https://youtube.com/shorts/4u2yg7IcH3A?feature=share

Payment Element

🔒 Embedded Checkout#

📷 Product Diagram#

📝 Overview#

💳 Supported Payment Methods#

🚀 Quick Start#

Create a PaymentIntent#

1. Include UseePay SDK:#

2. Verify SDK Availability:#

3. Initialize UseePay with your OpenAPI Public Key:#

4. Initialize UseePay Elements:#

5. Create the Payment Element:#

layout Object Configuration#

6. Mount the Element to the DOM:#

7. Confirm the Payment:#

🔍 Parameters#

error Object#

Possible error.type Values#

✅ Payment Status#

🎉 Tips#

Video Demo#

🔒 Embedded Checkout

📷 Product Diagram

📝 Overview

💳 Supported Payment Methods

🚀 Quick Start

Create a PaymentIntent

1. Include UseePay SDK:

2. Verify SDK Availability:

3. Initialize UseePay with your OpenAPI Public Key:

4. Initialize UseePay Elements:

5. Create the Payment Element:

`layout` Object Configuration

6. Mount the Element to the DOM:

7. Confirm the Payment:

🔍 Parameters

`error` Object

Possible `error.type` Values

✅ Payment Status

🎉 Tips

Video Demo