VueJS 3 SDK

To seamlessly integrate Appcharge’s VueJS 3 SDK into your application, follow these steps:

Install the SDK: In your VueJS 3 app, execute npm i appcharge-checkout-vuejs3-sdk to install the Appcharge VueJS SDK.

npm i appcharge-checkout-vuejs3-sdk

Import the SDK: In your VueJS component, import the AppchargeCheckout and AppchargeCheckoutInit components:

import { AppchargeCheckout, AppchargeCheckoutInit } from "appcharge-checkout-vuejs3-sdk";

Integrate the Components: Note that the Appcharge’s VueJS 3 SDK is comprised of two components, AppchargeCheckout and AppchargeCheckoutInit.

AppchargeCheckoutInit component needs to be rendered once at the top level of the web app (App.vue) - this component will create a handshake with Appcharge’s Checkout solution, resulting in faster loading times for the checkout itself.
AppchargeCheckout component needs to be conditionally rendered once a user makes an action that requires payment (clicking on a bundle, for example).

Start by rendering the AppchargeCheckoutInit component once the app loads:

<AppchargeCheckoutInit 
  :environment="sandbox"
	:checkoutToken="checkoutToken"
/>

Appcharge’s checkout init component allowed properties:

Prop	Type	Mandatory	Default	Description
`environment`	string (`sandbox`\| `prod`)	No	`sandbox`	The environment you are working with (for testing use `sandbox`)
`checkoutToken`	string	Yes	-	Unique public token for each game. Used to distinguish multiple game stores under the same domain

Each time a user selects an offer in your application, your system performs a server-to-server request to create a checkout session, more data can be found here. Then, incorporate Appcharge’s VueJS Component into your code by adding the following snippet:

<AppchargeCheckout 
  :checkoutUrl="checkoutUrl"
  :sessionToken="sessionToken"
	:checkoutToken="checkoutToken"
	:locale="locale"
  @close="onClose"
/>

Note: If you want to localize your checkout, please refer to the Checkout Language Localization documentation. It is recommended that you show Appcharge’s VueJS Component component once you have the required props by adding a boolean for showing and hiding the checkout component.

Appcharge’s checkout component allowed properties:

Prop	Type	Mandatory	Params available	Description
`checkoutUrl`	string	Yes	No	The checkoutUrl as provided by the “backend-to-backend” request
`sessionToken`	string	Yes	No	The session token as provided by the “backend-to-backend” request
`checkoutToken`	string	Yes	No	Unique public token for each game. Used to distinguish multiple game stores under the same domain
`referrerUrl`	string	No	No	The domain you’re coming from, for example `www.appcharge.com`. The referrerUrl must be an HTTPS domain.
`locale`	string	No	No	Defines the checkout language. Use `displayName;ISOcode` if the display name differs from the ISO 639-1 code (e.g., `spanish;es`), or just the ISO code if they match (e.g., `es`)
`onClose`	Function	No	Yes	The checkout popup has closed
`onOrderCreated`	Function	No	Yes	Order has been created
`onOrderCompletedFailed`	Function	No	Yes	The order has failed due to an internal error/publisher reward error
`onOrderCompletedSuccessfully`	Function	No	Yes	An order has updated with the publisher and confirmation was received
`onPaymentIntentFailed`	Function	No	Yes	The player has clicked on ‘Pay’ and the payment failed
`onPaymentIntentSuccess`	Function	No	Yes	The player has clicked on ‘Pay’ and the payment has been charged successfully

All frontend events are received with a set of parameters, please notice that not all parameters are available for every event, parameters that are not available will be undefined.

Name	Type	Description
orderId	string	Unique identifier for the order.
date	string	Date of the order.
sessionId	string	Identifier for the session associated with the order.
bundleName	string	Name of the bundle associated with the order.
bundleId	string	Identifier for the bundle.
bundleSKU	string	Stock Keeping Unit (SKU) for the bundle.
products	Product[]	Array of products included in the order.
totalSum	number	Total sum of the order.
totalSumCurrency	string	Currency of the total sum.
paymentMethodName	string	Name of the payment method used for the order.
userId	string	Identifier for the user placing the order.
userCountry	string	Country associated with the user.
reason	string	(Optional) Reason for the order or additional notes.

Price points:

In your VueJS component, import the getPricePoints function:

import { getPricePoints } from "appcharge-checkout-vuejs3-sdk";

the getPricePoints function allows you to retrieve price points for your store. It takes two parameters:

environment (string, mandatory): This parameter specifies the environment and can be either sandbox or prod.
domain (string, optional): This parameter is the domain of your store. If not provided, the function will use the current domain as the default.

async fetchPricePoints() {
  try {
    const pricePoints = await getPricePoints("sandbox");
  } catch (error) {
    console.error(error);  
  }

Overview

Checkout

AppDirect

Payment Links