npm i appcharge-checkout-vuejs-sdk
to install the Appcharge VueJS SDK.AppchargeCheckout
and AppchargeCheckoutInit
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).AppchargeCheckoutInit
component once the app loads:
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 |
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 |
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. |
getPricePoints
function:
getPricePoints
function allows you to retrieve price points for your store. It takes two parameters:
sandbox
or prod
.