Payment Method	Card Number	CVV
Visa	4012000098765439	999
Mastercard	5146315000000055	998
Mastercard BIN 2	2223000048400011	998
Discover	6011000993026909	996
American Express	374101000000608 or 371449635392376	9997
Diner's Club	36256000000725	123
JCB	3566000000000000	123

Payment Method	Card Number	CVV
Visa	4532802195368947	999

Payment Method	Card Number	CVV
Visa	4012000098765439	999
American Express	374101000000608 or 371449635392376	9997

Payment Method	Card Number	CVV
Visa	4012000098765439	Anything but 999
Mastercard	5146315000000055	Anything but 998
Mastercard BIN 2	2223000048400011	Anything but 998
Discover	6011000993026909	Anything but 996
American Express	374101000000608 or 371449635392376	Anything but 9997

Configuration option	Description
Token Mode	Public tokens are for embedded components, including Creator components. Private tokens are for Payabli APIs and payment devices.
Token Type	The organization API token type is the most commonly used, and gives partners and paypoints access to most endpoints. The application API token is more advanced, and is used for authentication and managing entities. You rarely need to use an application API token. See the [API Token Types](#api-token-types) section for more information.
Token Lifetime	API tokens can have a lifetime of between 1 and 24 months. Remember that you can delete unused or compromised API tokens at any time from the dashboard.
IP Restrictions	Use this option to create an allowlist of IP addresses that can make requests with this API token. Leaving this option blank allows all IP addresses to make requests with this API token.
Creator Token?	Select Yes to use this API token with Creator components. The API token type must be Public . Creator API tokens require that you configure domain restrictions.
Domain Restrictions	Only available with Creator API tokens. For security, you must add the domains that you embed Creator components on. For example, if they're embedded on `https://app.myproduct.com` , then add `https://app.myproduct` here.
Description	A descriptive name for the API token. This description appears in the dashboard and helps identify the API token.

Number of requests	Period
200	Minute
3000	15 Minutes
10000	Hourly

Description	Default Limit
Max number of declines per card, hourly	3
Max number of declines per IP address, hourly	3
Max declines per paypoint, hourly	10
Max declines per payor, hourly	3
Max transactions per paypoint in 15 minutes	250
Max transactions per card hourly	10

Request type	Timeout
Write requests (POST, PUT, DELETE)	30 seconds
Read requests (GET)	90 seconds

ResultCode	Name	Description	Solution
1	Request successful	The API request executed without errors	There's nothing to do.
2	Request failed	The API request failed due to a processor decline	Check the response for the failure reason.
3	Request failed	The API request failed due to a technical error	Check the response for the failure reason.
10	Request initiated	An asynchronous process has started successfully.	There's nothing to do.

ResponseCode	Name	Description	Solution
3001	Invalid entrypoint name	Entrypoint specified in parameter doesn't exist	Correct the parameter and try again.
3002	Invalid Amount	Amount value is empty or negative	Provide a valid amount.
3003	Invalid parameter value in request	The value in parameter is incorrect	Provide the correct value for parameter.
3004	Invalid TimeZone value	The timezone value is invalid	Provide a value between -12 and +12.
3005	Invalid paypoint ID	The paypoint ID value is invalid	Provide a valid paypoint ID value.
3006	Invalid user status	The value provided is invalid	Provide a valid status value for user (either 0, 1, or 85).
3007	The transaction cannot be refunded	We can't refund this transaction because it already has an associated chargeback or return.	There's no solution for this, transactions with an associated chargeback or ACH return can't be refunded. See [Chargebacks and Returns Overview](/guides/pay-ops-disputes-chargebacks-returns-overview) for more information.
3012	Invalid Amount	Amount value is greater than available amount for action	Provide a valid amount.
3013	Invalid Amount	Amount value is different to amount in invoices	Provide a valid amount.
3014	Invalid Amount	Amount value is not as same as the authorized amount	Please make sure that the amount in the request matches the authorized amount
3015	Invalid Total Amount	Total Amount value is zero	Please make sure that the total amount in the request is greater than zero
3016	Invalid Total Amount	Total Amount value is less than the allowed value	Please make sure that the total amount in the request is greater than 85% of the authorized amount

ResponseCode	Name	Description	Solution
3201	Empty scope array for user	The scope specified for user is empty	Provide a valid scope for user.
3202	Empty access array for user	The access specified for user is empty	Provide a valid access array for user.
3203	Empty email address for user	The email specified for user is empty	Provide a valid email address for user.
3204	Duplicated email address	A user with this email address exists already	Provide a valid email address that isn't used in Payabli yet.
3205	Invalid scope declared by requestToken	The scope provided is outside of the scope of the used API token in the request	Review the scope provided in request. The platform rules don't allow scopes not included in the parent API token.
3206	Invalid access declared by requestToken	The access provided is outside of the access authorized of the API token used in the request	Review the access provided in request. The platform rules don't allow access not included in the parent API token.
3207	Invalid email address	The email address is invalid	Review the value of the email address provided in request. The email address need to follow the format specified in RFC 881.
3208	Invalid phone number	The phone number is invalid	Review the value of the phone number provided in request. The phone number need to satisfy the regular expression `"^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$"` Examples: - +1(786)111-2222 - 234.222.1234 - 111 222 2345 - 555-444-1111
3209	Invalid country code	The country code is invalid	Review the value of the country code provided in the request. The country code must be in ISO-3166-1-Alpha 2 format. Refer to the [ISO reference](https://www.iso.org/obp/ui/#search) for help.
3210	Invalid mail country code	The mail country code is invalid	Review the value of the mail country code provided in the request. The country code must be in ISO-3166-1-Alpha 2 format. Refer to the [ISO reference](https://www.iso.org/obp/ui/#search) for help.
3211	Invalid start date	The start date value is invalid	Provide the value in one of accepted formats: YYYY-MM-DD or MM/DD/YYYY.
3212	Invalid billing table	Invalid billing table	The paypoint already has a billing table. Use the update endpoint or delete the current billing table.

ResponseCode	Name	Description	Solution
3401	Invalid Bill Number	Field `BillNumber` empty	Provide the `BillNumber` in the request.
3402	Duplicated Bill Number	The value provided in the field `BillNumber` already exists	Provide a different `BillNumber` in the request, or set the [`allowDuplicatedBills`](/developers/api-reference/moneyout/authorize-a-transaction-for-payout#request.query) query parameter to `true` to bypass validation.
3403	Missing Vendor information	Vendor data missing from request	Provide the minimum required data for Vendor.
3404	Invalid Vendor Number	Field `VendorNumber` empty	Provide the required value in request.
3405	Missing frequency value	The required frequency for scheduled bill is empty	Provide the required frequency value in request:- `onetime` \- `weekly` \- `every2weeks` \- `every6months` \- `monthly` \- `every3months` \- `annually`
3406	Invalid frequency value	Frequency value for scheduled bill is invalid	Provide the required frequency value in request:- `onetime` \- `weekly` \- `every2weeks` \- `every6months` \- `monthly` \- `every3months` \- `annually`
3407	Invalid EndDate format	Date value empty or in an invalid format	Provide the date value in an accepted format: YYYY-MM-DD or MM/DD/YYYY.
3408	Invalid EndDate value	Date value can't before or equal to today's date	Provide a valid value for `Date` field.
3409	Vendor is Inactive	Can't complete the action because the Vendor status is inactive	Update vendor status to active. See [Vendor Status](/guides/pay-out-developer-vendors-manage#vendor-status) for help.
3410	Invalid Bill Id	The Bill identifier doesn't exist or doesn't have a valid status	Provide a valid bill identifier in the request.
3411	Invalid Bill status	Can't complete the action because the Bill status is invalid	Verify the status of the bill before resubmitting the request. See [Bills](/guides/pay-out-schemas-overview#bill-statuses) for statuses.
3412	Bill has associated payments	Can't complete the action because the bill has associated payment records	Cancel the associated payments.
3413	Existing payment link for Id	A payment link already exists for the provided ID	Review the Payment link ID and try again.
3414	Invalid entrypoint	The entrypoint associated with the bill doesn't exist	Verify the entrypoint to make sure it's related to the bill.
3415	Invalid EntryPage	The EntryPage associated with the paypoint doesn't exist	Verify the EntryPage related to the paypoint.
3416	Missing email	The vendor associated with the bill doesn't have a valid email address	Verify the vendor's email address isn't empty and has a valid format.
3417	Invalid Invoice Id	The Invoice identifier doesn't exist or doesn't have a valid status	Provide a valid identifier value in the request.
3418	Invalid customer	The Invoice doesn't have a valid customer associated with it	Review the customer associated with the invoice and try again.
3419	Invoice not available	The invoice status is not allowed with this action	Verify the status of the invoice before resubmitting the request.
3420	Duplicated Bill Number	The value provided in field `BillNumber` exists already within the Vendor	Provide a different `BillNumber` in the request, or set the [`allowDuplicatedBills`](/developers/api-reference/moneyout/authorize-a-transaction-for-payout#request.query) query parameter to `true` to bypass validation.
3421	Invalid Vendor Id	The Vendor identifier doesn't exist or doesn't have a valid status	Provide a valid Vendor ID value in the request.
3422	Invalid Vendor Name	Field `Name1` empty	Provide the required value in the request.
3423	Missing address field	Field `address(1)` empty	Provide the required value in the request.
3424	Missing address field	Field `city` in address empty	Provide the required value in the request.
3425	Missing address field	Field `state` in address empty	Provide the required value in the request.
3426	Missing address field	Field `zip` in address empty	Provide the required value in the request.
3427	Invalid EIN	Invalid value provided for EIN field	Provide the required value in the request using the of 9 digit format.
3428	Missing email	Vendor email address is required for virtual card (vCard)	Verify the that vendor's email isn't empty and has a valid format.
3429	Empty transaction list	List of transaction in input wasn't provided	Verify that the list of transactions is provided in the request.
3430	Invalid Customer Id	The Customer identifier doesn't exist or has invalid status	Verify the included customer's information and try again.
3431	Empty approvals	Empty approvals	Provide the required value in the request.
3432	No attachments found	No attachments found	Provide the required attachments.
3433	Invalid orgId	Invalid `orgId`	Provide a valid organization ID.
3434	Invalid Level in request	Invalid Level	Provide a valid level for the entrypoint: `0` for partner, `2` for paypoint.
3435	Invalid Vendor Status	The vendor status is invalid.	Provide a valid vendor status: `0` for inactive, `1` for active, and `-99` for deleted.
3436	Duplicated vendor under entry	Duplicated vendor under entry	The vendor already exists under the paypoint.
3437	Invalid Year value	The year value is invalid	Provide the value in the accepted format: YYYY.
3438	Invalid dates	The startDate cannot be greater than the endDate	Provide valid `startDate` and `endDate` parameters.
3439	Invalid parameters for custom mode	The custom mode must provide a valid startDate and endDate parameters	Provide valid `startDate` and `endDate` parameters when using the custom mode.

ResponseCode	Name	Description	Solution
3501	Invalid request	The search field is missing, null, or empty in the request	Provide a valid search field in the body request.

ResponseCode	Name	Description	Solution
3601	Invalid payment link Id	The provided payment link ID is invalid or inactive	Review the payment link ID and try again.
3602	Invalid invoice/bill	The provided payment link ID doesn't have a valid invoice/bill associated	Review the payment link ID and try again.
3603	The entrypoint doesn't exist	The provided payment link ID isn't associated to a valid entrypoint	Review the payment link ID and try again.
3604	EntryPage doesn't exist	The entrypoint doesn't have a valid EntryPage	Verify that the entrypoint has a payment page created. Review the payment link ID and try again.
3605	Invalid vendorId or customerId	A `customerId` or a `VendorId` is required for a new vCard	Verify the request and provide the missing data.
3614	Subdomain doesn't exist	The entrypoint doesn't have a valid subdomain	Verify the entrypoint has a payment page created. Review the information in the request and try again.

ResponseCode	Name	Description	Solution
3701	Invalid application ID	Invalid application ID or doesn't exists	Provide a valid application ID and try again.
3702	An error occurred while processing the request	An error occurred while processing the request	Try again later. If the error persists please contact your API provider.
3703	Duplicated Bank account	The bank account already exists	To update an existing bank account, use the edit endpoint.
3704	Invalid bank ID	Invalid bank ID	Provide a valid bank ID.
3705	Invalid routing number	Invalid routing number	Provide a valid routing number.
3706	Invalid account number	Invalid account number	Provide a valid account number.
3707	Invalid account type	Invalid account type	Provide a valid account type: Checking or Savings.
3708	Invalid bank account holder type	Invalid bank accountholder type	Provide a valid bank accountholder type: Personal or Business.
3709	Invalid bank account function	Invalid bank account function	Provide a valid bank account purpose: `0` : Deposit, `1` : Withdraw, `2` : Deposit/Withdraw
3710	Invalid bank name	Invalid bank name	Provide a valid bank name.
3711	Invalid account holder name	Invalid accountholder name	Provide a valid accountholder name.
3712	Billing ID not found	Billing ID not found	Provide a valid billing ID in the request.
3713	The entrypoint doesn't have a billing table	The entrypoint doesn't have a billing table	Create a billing table if required.
3714	Error with the billing request	There is an error with the billing request	Review the billing object for any missing or invalid field.
3715	Duplicated bank information	The combination of bank account number, routing number and function already exists	Verify the bank information or update the existing bank entity.

ResponseCode	Name	Description	Solution
3901	Empty Text field	The input field Text is empty	Provide a value in required field Text.
3902	Invalid color code provided in field darkColor	The hexadecimal HTML code provided is incorrect	Provide a correct HTML code value. Reference [https://html-color.codes/](https://html-color.codes/)
3903	Invalid color code provided in field lightColor	The hexadecimal HTML code provided is incorrect	Provide a correct HTML code value. Reference [https://html-color.codes/](https://html-color.codes/)
3904	Both color codes need to be provided in fields lightColor and darkColor	The hexadecimal HTML code provided is incorrect or the field is empty	Provide a correct HTML code value. Reference [https://html-color.codes/](https://html-color.codes/)
3905	max length for Number field is 19 chars	The string length is greater than is allowed	Reduce the string length to a maximum of 19 characters.
3906	max length for Text field is 23 chars	The string length is greater than is allowed	Reduce the string length to a maximum of 23 characters.
3907	max length for Holder field is 30 chars	The string length is greater than is allowed	Reduce the string length to a maximum of 30 characters.
3908	max length for Holder1 field is 30 chars	The string length is greater than is allowed	Reduce the string length to a maximum of 30 characters.
3909	max length for ExpDate field is 8 chars	The string length is greater than is allowed	Reduce the string length to a maximum of 8 characters.
3910	max length for Cvv field is 4 chars	The string length is greater than is allowed	Reduce the string length to a maximum of 4 characters.
3911	Amount cannot be negative	A negative value isn't accepted	Provide a positive value in the input field.
3912	Invalid Theme value provided	The theme name provided doesn't exists	Provide a valid value in the input field.

ResponseCode	Name	Description	Solution
4001	Invalid Xchange AccountId	Invalid Xchange AccountId	Provide a valid Xchange AccountId.
4002	Invalid User account	Invalid User account	Either the user doesn't exist or there is a problem with their token.
4003	Model cannot be null	Model can't be null	The entry model is null. Review and try again.
4004	The Server field cannot be null or empty	The `Server` field can't be void or empty	Review the `Server` field and try again.
4005	The UserId field cannot be null or empty	The `UserId` field can't be void or empty	Review the `UserId` field and try again.
4006	The RemotePathIn field cannot be null or empty	The `RemotePathIn` field can't be void or empty	Review `RemotePathIn` fields and try again.
4007	The RemotePathOut field cannot be null or empty	The `RemotePathOut` field can't be void or empty	Review the `RemotePathOut` field and try again.
4008	The Schedule field cannot be null or empty	The `Schedule` field can't be void or empty	Review the `Schedule` field and try again.
4009	The LastCheck field cannot be less than the actual date	The `LastCheck` field can't be less than the actual date	Review the `LastCheck` field and try again
4010	The EntryName field cannot be null or empty	The `EntryName` field can't be null or empty	Review the `EntryName` field and try again.
4011	The OrgType field cannot be null or empty	The `OrgType` field can't be void or empty	Review the `OrgType` field and try again.
4012	The Orgid field cannot be null or 0	The `Orgid` field can't be null or 0	Review the `Orgid` field and try again.
4013	The Mode field cannot be null	The `Mode` field can't be void or empty	Review the `Userid` field and try again.
4014	The Channel field cannot be null or 0	The `Channel` field can't be null or 0	Review the `Channel` field and try again.
4015	The content of the PKey field isn't Base64 encoded	The content of the `PKey` field isn't Base64-encoded	Review the `PKey` field and try again.
4016	The Organization/Paypoint has no associated token	The organization or paypoint has no associated token	Review the request data and try again.
4017	The data wasn't saved in the Payabli database	The data wasn't saved in the Payabli database	An error occurred while saving the data to the database. Contact the support team.
4018	Invalid Xchange Account	Invalid Xchange account	Provide a valid Xchange account and try again.
4019	The user isn't related to the organization	The user isn't related to the organization	The user isn't related to the organization.
4020	The configuration isn't related to the xchange account organization	The configuration isn't related to the Xchange account organization	The configuration isn't related to the Xchange account organization.
4021	The Type field cannot be null or different from IP, Card or PayorId	The `Type` field must be `IP` , `Card` or `PayorId` and can't be null.	Review the `Type` field and try again.
4022	At least one of these fields is required: Content, FraudHistoryId, or TransId	At least one of these fields is required: `Content` , `FraudHistoryId` , or `TransId`	Review the request and try again.
4023	The service cannot be deleted	The service cannot be deleted, because there are still transactions that haven't settled yet	Wait until all transactions are marked as settled, then delete the service.
4024	The service cannot be updated	The service cannot be updated, because there are still transactions that haven't settled yet	Wait until all transactions are marked as settled, then update the service.
4025	Purposes cannot be null	Purposes is null	Purposes can't be null. Review and try again.
4026	The keyword cannot be repeated	A keyword is repeated	Keywords can't be repeated. Review and try again.
4027	Empty input file	The input file is empty	The input file can't be empty. Review and try again.
4028	Empty file content	Empty file content	The file has no content. Review and try again.
4029	The size of the PKey File is not allowed	The size of the PKey File is not allowed	The size of the PKey File is not allowed. Review and try again.
4030	PKey File does not have the allowed format	PKey File does not have the allowed format	PKey File does not have the allowed format. Review and try again.
4031	The password and key file cannot be empty, at least one is required	The password and key file cannot be empty, at least one is required	The password and key file cannot be empty, at least one is required. Review and try again.

ResponseCode	Name	Description	Solution
5004	Invalid Service Fee value	Provided service fee value is less than zero	Please make sure that the service fee value in the request is greater than or equal to zero.
5005	Invalid Service Fee value	Provided service fee value is lesser than value agreed	Review the service fee value provided in the request and try again. See [Pass-Through Fees](/guides/pay-in-fees-passthrough-overview) for more information on how fees work.
5006	Invalid Service Fee value	Provided service fee value is greater than value agreed	Review the service fee value provided in the request and try again. See [Pass-Through Fees](/guides/pay-in-fees-passthrough-overview) for more information on how fees work.
5009	Invalid stored method relationship	The `storedMethodId` provided isn't associated with the customer provided.	Review values to make sure the stored method belongs to the specified customer, and try again. See [Tokenization](/guides/platform-tokenization-overview) for more information on stored methods.
5010	Invalid chargeback ID	The provided chargeback identifier does not exists in the platform.	Review the value of the chargeback identifier and try again.
5011	Invalid chargeback status	The chargeback status provided is not allowed	Review the value of the chargeback status and try again.
5012	Invalid ACH return ID	The provided ACH return identifier does not exist in the platform	Verify the ACH return identifier and make sure that it's correct
5013	Invalid ACH return status	The provided ACH return status is not allowed for this transaction	Check the ACH return status and make sure that it's valid for this transaction
5014	Invalid transaction method	The provided transaction identifier is invalid or does not correspond to a valid ACH payment	Verify the transaction identifier and make sure that it corresponds to a valid ACH payment
5015	Invalid transaction ID	The provided transaction identifier does not exist in the platform	Verify the transaction identifier and make sure that it's correct
5016	Invalid transaction ID	The transaction already has an associated return	This transaction has already been returned
5017	Invalid transaction method	The provided transaction identifier is invalid or does not correspond to a valid card payment	Verify the transaction identifier and make sure it corresponds to a valid card payment

ResponseCode	Name	Description	Solution
6000	Opt-in process is already pending for this customer	An opt-in request has already been sent to this customer	The customer must complete the opt-in process.
6001	SMS configuration is missing	SMS sending isn't configured	Contact Payabli Support to enable this feature.
6002	The request has failed because the user hasn't consented to communications	The recipient hasn't opted-in to receiving SMS communications	The customer must complete the opt-in process
6003	Invalid customer ID	The provided customer identifier doesn't exist or doesn't have a valid status	Provide a correct identifier value in the request.
6004	Missing or invalid phone number	Phone number is required for customer consent request	Verify that the customer's phone number isn't empty and has a valid format.
6005	Invalid payment link type	Invalid payment link type	Payment link must be for an invoice.
6006	Missing or invalid phone number	Phone number is required to send a payment link	Verify that the customer's phone number isn't empty and has a valid format
6007	Missing or invalid email address	Email address is required to send a payment link	Verify that the customer's email isn't empty and has a valid format
6008	Invalid additional email addresses	One or more of the additional email addresses aren't valid	Verify that the additional email addresses aren't empty and has a valid format
6009	Invalid channel	Invalid communication channel value	Verify that the communication channel is one of the valid options: sms or email
6010	Invalid invoice	The provided payment link ID doesn't have a valid invoice associated	Verify that the invoice exists and has a valid status
6101	Invalid domain ID	The provided domain ID is invalid.	Verify that the domain ID is correct and try again.
6103	Failed to cascade the domain	An error occurred while cascading the domain.	Try cascading the domain again later.
6201	No card service found for this paypoint	Card service is required to enable Apple Pay.	Contact Payabli for help.
6202	Cascading is not supported for this entity type.	Cascading domains is allowed only for the domains owned by organizations.	Use a domain owned by an organization.
6202	Card services are disabled for this paypoint	Card services should be enabled to use Apple Pay.	Contact Payabli for help.
6203	No card gateway found for this paypoint	Card gateway is required to enable Apple Pay.	Contact Payabli for help.
6204	Invalid card credentials for this paypoint	Card credentials are required to enable Apple Pay.	Contact Payabli for help.
6205	Apple Pay configuration update in progress for this organization	There is an ApplePay configuration update in progress for this organization.	Wait for the update to finish and try again.
6206	Failed to cascade organization updates	An error occurred while cascading the organization updates.	Try again later.

ResponseCode	Name	Description	Solution
7001	Invalid transaction ID	The provided transaction identifier doesn't exist in the platform	Review the value of the transaction ID and try again.
7002	Invalid transaction status	The status of the transaction doesn't allow the action requested.	Verify the status of the transaction. For Void, Cancel, or Reverse the valid statuses are 1 and 11, for Refund the valid status is 1. Learn more about [Transaction Statuses](/guides/pay-out-schemas-overview#payout-transaction-statuses)
7003	Invalid payment method	Stored payment methods can't be validated.	Change the payment method or remove the reference to a stored payment method in the request.
7004	Invalid payment method	Provided payment method can't be executed.	Try a different payment method.
7005	Missing card number	Field `cardnumber` in payment method object is empty	Provide a valid card number in payment method object.
7006	Missing payment method	The payment method object is empty	Provide valid data in payment method object.
7007	Invalid payment method	Stored payment method provided doesn't exist	Provide valid data in payment method object.
7008	Missing payment details	The payment detail object is empty	Provide a valid data in payment detail object.
7009	Invalid currency code	Currency code provided is invalid	Provide a valid ISO 4217 currency code.
7010	Invalid card expiration date	The expiration date provided is invalid	Review the expiration date. Accepted formats are MM/YY and MMYY.
7011	Invalid payment method	No payment instrument was provided in request	Review the payment method object for any missing data. If the payment method is card, then either a `cardNumber` or `storedMethodId` are missing. If the payment method is ACH, then either `achRouting` or `storedMethodId` are missing or invalid.
7012	Invalid payment method	Missing account or card holder in request	Review the payment method object for any missing data.
7013	Invalid payment method	Missing bank account number in request	Review the payment method object for any missing data.
7014	Invalid payment method	Invalid bank account type in request	Review the payment method object for invalid data. Accepted values for bank account type are: SAVINGS or CHECKING
7015	Invalid payment method	missing `achholder` or `checknumber` in check payment method	Review the payment method object and payment detail object for any missing data.
7015	Invalid card number	Invalid card number provided.	Provide a valid card number in payment method object.
7016	Invalid CVV number	Invalid CVV number provided.	Provide a valid CVV number in payment method object.
7017	Invalid payment method	Missing device identifier in `paymentMethod` object	Review the payment method object for any missing data.
7018	Invalid payment method	Invalid device identifier in `paymentMethod` object	Review the payment method object for any missing data.
7019	Invalid payment method	Stored payment method provided and customer don't match	Provide the correct `customerId` linked to the stored payment method provided.
7020	Error in customer data	Something is wrong with the customer data	Review customer object for missing or invalid fields.
7021	Invalid invoice number	Customer associated to payment doesn't match with referenced invoice	Review customer object and invoice data provided in request.
7022	Invalid invoice action	Trying to pay a scheduled Invoice	Review the data provided in request and try again.
7023	Invalid invoice action	Trying to pay an invoice with an invalid status	Review the data provided in request and try again.
7024	Invalid invoice action	Trying to pay an invoice with zero or negative amount	Review the data provided in request and try again.
7025	Invalid invoice action	Trying to overpay an invoice	Review the data provided in request and try again.
7026	Invalid invoice number	Vendor associated to payment doesn't match with referenced invoice	Review vendor object and invoice data provided in request.
7027	Invalid card expiration date	The expiration date provided is invalid- minimum accepted is 3 months	Review the expiration date. The value must be in MM/DD/YY format.
7028	Invalid card expiration date	The expiration date provided is invalid- maximum accepted is 2 years and 363 days	Review the expiration date. The value must be in MM/DD/YY format.
7029	Invalid MCC value provided	The MCC value is invalid	Review the data provided in request and try again.
7030	Invalid TCC value provided	The TCC value is invalid	Review the data provided in request and try again.
7031	Invalid expense limit provided	The expense limit value is invalid	Review the data provided in request and try again.
7032	Invalid expense limit period provided	The expense limit period value is invalid	Review the data provided in request and try again.
7033	Invalid cardtoken provided	The `cardtoken` value is invalid	Review the data provided in request and try again.
7034	Invalid cardtoken provided	The vCard is cancelled	Review the data provided in request and try again.
7035	Invalid customer ID	Invalid customer ID	Review the data provided in request and try again.
7036	Invalid payment method	Missing bank account holder or check number in request	Review the payment method object for any missing data.
7037	Invalid transaction status	The current status of transaction doesn't allow requested action	Review status of transaction before submitting the request. Payabli doesn't accept void action for funded payments or payments with funding in transit. Refunds can't be performed for unsettled payments. Learn more about [voids and refunds](/guides/pay-in-developer-transactions-cancel#choose-a-method) .
7038	Invalid stored method type	Provided stored method isn't supported by the paypoint	A Universal tokenized method was provided in the request, but the target paypoint doesn't support it. Try a different payment method.
7039	Invalid stored method type	Provided stored method isn't supported by the paypoint	A Network tokenized method was provided in the request, but the target paypoint doesn't support it. Try a different payment method.
7040	This type of stored method cannot be used with this paypoint	Review the payment method object. Only universal tokens and network tokens can be used at a payment point other than the one they belong to.	Try a different payment method.
7041	Tokenization provider of stored method is incompatible with processor in paypoint	Review the payment method object. The tokenization provider for needs to be the same or be compatible with payment provider	Try a different payment method.

ResponseCode	Name	Description	Solution
8001	Invalid Token in request	Provided token is in use under different service	Remove provided token from other services before executing the action.
8002	Invalid parameter in request	Requested component type requires a valid subType	Provide a valid subType in request.
8003	File system service is not available	The server is not ready to handle the request	Please try again, if the error persists contact your administrator.
8012	Invalid amount	Invalid amount value provided for action	Review amount provided. Transactions with split funding instructions don't allow partial capture.
8013	Invalid split funding instructions	Missing or invalid split instructions provided for action	Review the instructions provided for the action. Review amounts and recipients.
8014	Invalid split funding instructions	Invalid Amount in split instruction. Amount provided greater than balance in split	Review the instructions provided for the action. Review amounts and recipients.
8016	Invalid split funding instructions	Invalid Amount in split instruction. Amount provided cannot be negative	Review the instructions provided for the action. Review amounts and recipients.
8015	Invalid split funding instructions	Invalid Amount in split instruction. Amount provided is different to sum of amounts in split instructions	Review the instructions provided for the action. Review amounts and recipients.
8082	Invalid split funding instructions	Empty recipient value in split funding instructions	Review the instructions provided for the action. Make sure all recipients for the split are provided.
8083	Invalid split funding instructions	Provided recipient value in split funding instructions is outside of scope of the origination.	Review the instructions provided for the action. Review all the recipients for split are in the same level under the same parent organization.
8084	Invalid split funding instructions	Invalid Amount in split instruction. Amount provided cannot be negative or zero	Review the instructions provided for the action. Review amounts and recipients.
8086	Invalid split funding instructions	Provided recipient does not have a configured funding account	Review the instructions provided for the action. Review the recipients.
8088	Invalid split funding instructions	Origination for split need to be included in split instructions	Review the instructions provided for the action. Review the recipients.
8099	Invalid split funding instructions	Origination entry point does not have split funding capability enabled	Contact Support to have split funding enabled.

ResponseCode	Name	Description	Solution
9001	Invalid Authorization Token	Token in input doesn't have access to Entity in scope or Token isn't allowed to execute requested action.	Use the authorized API token for the request. Review the reference to the entity in request parameter (entry name, paypoint ID, organization ID, signing) is correct and is within the token scope.
9002	Unauthorized Token	User or Customer entity doesn't have permission to the requested action.	Verify permissions assigned to the user or customer.
9003	Unauthorized Token	Token type or origin IP address aren't accepted by action	Use the correct API token for action. For web components the token type is different of the direct API token. Verify if your token has IP restriction. See [Authentication](/developers/api-reference/api-overview#authentication) for more information on token types and restrictions.
9004	Inactive Paypoint	The paypoint isn't active in the platform.	Reach out to the support team to clarify the status of your paypoint.
9005	Blocked by Fraud Control	The card or the origin IP of request is blacklisted in the platform	Reach out to the support team to clarify the status of your paypoint.
9006	Unauthorized Token	Expected Validation code is missing or invalid	Use the correct validation code for action. Verify value provided in CAPTCHA for payment pages.
9007	Invalid entryId	The provided entry ID is invalid	Review the data provided in request and try again.
9008	Invalid orgId parameter	Invalid `orgId` parameter	Provide a valid `orgId` parameter.
9009	Invalid entry point name	Invalid entrypoint name	Review the entry point name in the request and try again.
9010	Invalid Fraud History Id	Invalid Fraud History ID	Provide a valid ID parameter.
9011	Unauthorized Token	Domain Origin not in scope	Review your domain restrictions to see the domain originating the request is included in scope.
9012	Invalid Fraud Blacklist Id	Invalid Fraud Blacklist ID	Invalid Fraud Blacklist ID.
9013	Invalid Tier Id	Invalid Tier Id	Provide a valid ID parameter.
9014	Invalid Tier Name	Invalid Tier Name	Provide a valid Name parameter.
9051	Fraud alert	A velocity fraud alert condition was triggered	Verify your request and fraud limits with the Support team.

ID	Element
`cardNumber`	Card number input
`cardNumberContainer`	Card number container
`cardExpirationDate`	Card expiration date input
`cardExpirationDateContainer`	Card expiration date container
`cardCvv`	Card CVV input
`cardCvvContainer`	Card CVV container
`cardZipcode`	Card zip code input
`cardZipcodeContainer`	Card zip code container
`cardHolderName`	Cardholder name input
`cardHolderNameContainer`	Cardholder name container
`achAccountType`	Bank account type selector
`achAccountTypeContainer`	Bank account type container
`achAccountHolderName`	Bank account holder input
`achAccountHolderNameContainer`	Bank account holder container
`achRouting`	Bank routing input
`achRoutingContainer`	Bank routing container
`achAccount`	Bank account input
`achAccountContainer`	Bank account container

Component	Callback
EmbeddedMethod UI	functionCallBackSuccess, functionCallBackReady, functionCallBackError
PayMethod UI	functionCallBackSuccess, functionCallBackError
VirtualTerminal UI	functionCallBackSuccess, functionCallBackError
ExpressCheckout UI	functionCallBackSuccess, functionCallBackReady, functionCallBackError, functionCallBackCancel

/// Include the Payabli Script First, add the Payabli embedded component script to your HTML. Make sure to include the `data-test` attribute for testing in the sandbox environment. Including `` in the `` element prevents problems with special characters such as ‘á’ or ‘ñ’. ```html Payabli Integration ``` /// Create the Container Add a container element where the embedded component renders. The configuration references this element by its `id` attribute. This `

` element serves as the mounting point where the embedded component renders. ```html focus=8-9 Payabli Integration

Payment Form

``` /// Configure the Component Create the configuration object that defines how your embedded component behaves. This configuration includes authentication tokens, payment method settings, and callback functions. The `rootContainer` property connects the component to your HTML element by matching the `id` attribute value. The `token` value must be a **public API token**. See the [Configuration Reference](#configuration-reference) for more information. ```html focus=12-50 Payabli Integration

``` /// Add Callback Functions Implement success and error callback functions to handle component responses and form validation states. These callback functions execute after the user submits payment information and the component receives a response from Payabli's API. These functions can call the `closeModal` and `payabliExec` methods to manage the embedded component's state. ```html focus=54-91 Payabli Integration

Payment Form

``` /// Initialize and Show Modal The final step creates a working payment method component that can securely save payment methods for future transactions. Add a click handler to the button that calls the `showModal` method to display the embedded component. ```html focus=94-100 Payabli Integration

Payment Form

Click below to save a payment method:

```

### Configuration reference These are the configuration parameters available for the PayMethod component. If you need to pass more than data than what's supported, consider using the temporary token flow. See [Temporary Token Flow](/guides/platform-developer-tokenization-temp-flow) for more information. This value determines the type of embedded component to render.\ Accepted values are: `methodEmbedded`, `methodLightbox`, `vterminal`, or `expressCheckout`.\ For the PayMethod UI, this value is `methodLightbox`. See the [Embedded Components Overview](/guides/pay-in-components-overview) for more information on other component types. Container ID used for the component. Sets the default payment method that's shown. Accepted values are: `card` or `ach`. Text label for the action button. When true the component is hidden when it's instanced. API token for authentication. When `true`, the component uses the `customerData` object to create a new customer record. When `temporaryToken` is `true` and `forceCustomerCreation` is `false`, the component doesn't create a new customer record. See [Temporary Token Flow](/guides/platform-developer-tokenization-temp-flow#disable-customer-creation) for more information. Complete URL of a custom CSS stylesheet to use with the component. When `true`, the token created for the payment is temporary. Set this parameter to false to create a storedMethodId and save the payment profile. `cardService` object used to configure accepted card types. Enable/disable card option. Enable/disable acceptance of American Express cards. Enable/disable acceptance of Discover cards. Enable/disable acceptance of Visa cards. Enable/disable acceptance of MasterCard cards. Enable/disable acceptance of Diner's Club cards. Enable/disable acceptance of JCB cards. Card input fields descriptors. This object applies only to the EmbeddedMethod UI component. Optional, but *strongly recommended*. Descriptor object for input field. Descriptor object for input field. Descriptor object for input field. Descriptor object for input field. Optional, but *strongly recommended*. Descriptor object for input field. `achService` object used to configure accepted ACH types. Enable/disable ACH option. Enable/disable acceptance of Checking account. Enable/disable acceptance of Savings account. When set to true, the embedded component will validate ACH account and routing numbers in real time. This is an add-on feature. Contact the Payabli team for more information. ACH input field descriptors. This only applies to the EmbeddedMethod UI component. Required. Descriptor object for input field. Required. Descriptor object for input field. Required. Descriptor object for input field. Use the `confirm` input descriptor to add matching validation to this field. See [Style Individual Fields](/guides/pay-in-components-overview#style-individual-fields) for more. Required. Descriptor object for input field. Use the `confirm` input descriptor to add matching validation to this field. See [Style Individual Fields](/guides/pay-in-components-overview#style-individual-fields) for more. `paymentMethod` object with data related to the payment method. **Required when saving a payment method or executing a payment**. Can be passed to the component via payabliExec method. Customer Object with data related to customer. Can be passed to the component via payabliExec method. **Required when saving a payment method**. Which fields are required depends on whether the paypoint has custom identifiers. If you aren't using custom identifiers, then you must include at least one of these values: `firstname` and `lastname`, `email`, or `customerId`. When `true`, if tokenization fails, Payabli will attempt an authorization transaction to request a permanent token for the card. If the authorization is successful, the card will be tokenized and the authorization will be voided automatically. The amount for the `fallbackAuth` transaction. Defaults to one dollar. The callback function called when the component executes successfully. The callback function called when the component receives an error. See [functionCallBackError response](#functioncallbackerror-response) in the next section for a complete reference. ## Response The embedded component returns a response object to the callback functions defined in the configuration. The response object contains the result of the transaction (success, declined, or error) and details about the transaction. ### Response examples Click the tab to see an example response returned by the embedded component for each result. ```js Stored method success { responseText: "Success", responseData: { referenceId: "187-c5892026d9f345ffa63bf909d574fe92", resultCode: 1, resultText: "Added", customerId: 1636, methodReferenceId: "187-c5892026d9f345ffa63bf909d574fe92" } } ``` ```js Stored method decline { responseText: "Declined", responseData: { referenceId: "187-d2a29970fa604edba5a6dbec67ace3ae", resultCode: 2, resultText: "200: Transaction was declined by processor.. DECLINE", customerId: 1636, methodReferenceId: "187-d2a29970fa604edba5a6dbec67ace3ae" } } ``` ### Response reference The response object passed to a callback function has the following structure: "Success" or "Declined" Container for response details. Identifier for the transaction (for payments) or the stored payment method (for save payment method). The `referenceId` is used as the `storedMethodId` in other operations. See [Handling responses and errors](/guides/pay-in-components-overview#handling-responses-and-errors) for more. Result of operation. 1 is success, 2 is declined, and 3 is error. Message related the result. If the operation was successful, it returns "Added"/"Approved". If there was an error, it returns error details. ID for the customer owner of payment or saved payment method. Identifier for stored payment method for saved payment methods. This field has a value of `null` for payment transactions. The `methodReferenceId` is used as the `storedMethodId` in other operations. See [Handling responses and errors](/guides/pay-in-components-overview#handling-responses-and-errors) for more. ### `functionCallBackError` response The `functionCallBackError` function is called when the component can't validate the payment information before submitting it to Payabli's API. The response object passed to `functionCallBackError` contains an array with codes, keys, and descriptions of failed validations. You can check the values in the array to offer your customized error message.

Code	Key	Description
802	paymentMethodsCardNumberError	Error in Card number field
803	paymentMethodsCardExpirationDateError	Error in Card Expiration field
804	paymentMethodsCardCvvError	Error in CardCVV field
805	paymentMethodsCardZipcodeError	Error in Card Zip code field
901	paymentMethodsAchAccountHolderNameError	Error in ACH Holder field
902	paymentMethodsAchAccountTypeError	Error in ACH Account type field
903	paymentMethodsAchRoutingError	Error in ACH Routing field
904	paymentMethodsAchAccountError	Error in ACH Account number field

## Related resources See these related resources to help you get the most out of Payabli. * **[Embedded components overview](/guides/pay-in-components-overview)** - Learn how to use Payabli's embedded components to create customized checkout experiences without handling sensitive payment information yourself * **[Extend embedded components with the temporary token flow (for developers)](/guides/platform-developer-tokenization-temp-flow)** - Use the temporary token flow with embedded components to have complete control over user transaction experience without expanding PCI scope *** title: VirtualTerminal UI subtitle: >- Learn how to use the VirtualTerminal UI component on your site or in your app to securely accept payments description: >- Embed VirtualTerminal UI on your site to securely accept card and ACH payments. Configure fields, styling, and response handling with a customizable component 'og:description': >- Embed VirtualTerminal UI on your site to securely accept card and ACH payments. Configure fields, styling, and response handling with a customizable component keywords: >- embedded payments, VirtualTerminal UI, virtual terminal, embedded components, accept payments, card payments, ACH payments icon: puzzle-piece slug: guides/pay-in-components-virtual-terminal-ui area: * Pay In subArea: * Components audience: * developers *** The VirtualTerminal UI component lets you embed a payment terminal inside your website or application. This modal-based component is perfect for admin interfaces, customer service tools, and any application where you need to process payments on behalf of customers. an image of a virtual terminal component window

an image of a virtual terminal component window

## Usage This component lets you add a robust virtual terminal tool to your pages or apps. Follow the configuration walkthrough to set it up in your project. See [Library URLs](/guides/pay-in-components-overview#library-urls) for important information about embedded components library URLs. ### Configuration walkthrough

` element serves as the mounting point where the embedded component renders. ```html focus=8-9 Payabli Integration

Virtual Terminal

``` /// Initialize and Show Terminal The final step creates a working virtual terminal that can process transactions with both card and ACH payment methods. ```html focus=108-114 Payabli Integration

Virtual Terminal

Click below to open the payment terminal:

```

### Configuration reference These are the configuration parameters available for the VirtualTerminal component. If you need to pass more than data than what's supported, consider using the temporary token flow. See [Temporary Token Flow](/guides/platform-developer-tokenization-temp-flow) for more information. This value determines the type of embedded component to render.\ Accepted values are: `methodEmbedded`, `methodLightbox`, `vterminal`, or `expressCheckout`.\ For the VirtualTerminal UI, this value is `vterminal`. See the [Embedded Components Overview](/guides/pay-in-components-overview) for more information on other component types. Container ID used for the component. Sets the default payment method that's shown. Accepted values are: `card` or `ach`. Text label for the action button. When true the component is hidden when it's instanced. API token for authentication. Complete URL of a custom CSS stylesheet to use with the component. When `true`, enables the recurring payment option in terminal. When `true`, enables the one-time payment option in terminal. `lineItem` objects with data related to the line items for the transaction. `cardService` object used to configure accepted card types. Enable/disable card option. Enable/disable acceptance of American Express cards. Enable/disable acceptance of Discover cards. Enable/disable acceptance of Visa cards. Enable/disable acceptance of MasterCard cards. Enable/disable acceptance of Diner's Club cards. Enable/disable acceptance of JCB cards. Card input fields descriptors. This object applies only to the EmbeddedMethod UI component. Optional, but *strongly recommended*. Descriptor object for input field. Descriptor object for input field. Descriptor object for input field. Descriptor object for input field. Optional, but *strongly recommended*. Descriptor object for input field. `achService` object used to configure accepted ACH types. Enable/disable ACH option. Enable/disable acceptance of Checking account. Enable/disable acceptance of Savings account. When set to true, the embedded component will validate ACH account and routing numbers in real time. This is an add-on feature. Contact the Payabli team for more information. ACH input field descriptors. This only applies to the EmbeddedMethod UI component. Required. Descriptor object for input field. Required. Descriptor object for input field. Required. Descriptor object for input field. Use the `confirm` input descriptor to add matching validation to this field. See [Style Individual Fields](/guides/pay-in-components-overview#style-individual-fields) for more. Required. Descriptor object for input field. Use the `confirm` input descriptor to add matching validation to this field. See [Style Individual Fields](/guides/pay-in-components-overview#style-individual-fields) for more. `paymentMethod` object with data related to the payment method. **Required when saving a payment method or executing a payment**. Can be passed to the component via payabliExec method. Customer Object with data related to customer. Can be passed to the component via payabliExec method. **Required when saving a payment method**. Which fields are required depends on whether the paypoint has custom identifiers. If you aren't using custom identifiers, then you must include at least one of these values: `firstname` and `lastname`, `email`, or `customerId`. `paymentDetails` object with data related to the payment. **Required when running a payment**. Can be passed to the component via payabliExec method. See [paymentDetails Object]() for a full reference. When `true`, if tokenization fails, Payabli will attempt an authorization transaction to request a permanent token for the card. If the authorization is successful, the card will be tokenized and the authorization will be voided automatically. The amount for the `fallbackAuth` transaction. Defaults to one dollar. The callback function called when the component executes successfully. The callback function called when the component receives an error. See **functionCallBackError response** in the next section for a complete reference. ## Response The embedded component returns a response object to the callback functions defined in the configuration. The response object contains the result of the transaction (success, declined, or error) and details about the transaction. ### Response examples Click the tab to see an example response returned by the embedded component for each result. ```js Payment success { responseText: "Success", responseData: { authCode: "123456", referenceId: "40-692c62895d1541d28c0bf77b275a26e4", resultCode: 1, resultText: "Approved", avsResponseText: "", cvvResponseText: "", customerId: 706, methodReferenceId: null } } ``` ```js Payment decline { responseText: "Declined", responseData: { authCode: null, referenceId: "40-2c437c3dcdc242bea96f52bdf42d2eeb", resultCode: 2, resultText: "200: Decline. Generally insufficient funds or incorrect card data supplied, for example, expiry date or security code.. DECLINE", avsResponseText: "", cvvResponseText: "", customerId: 706, methodReferenceId: null } } ``` ```js Stored method success { responseText: "Success", responseData: { referenceId: "187-c5892026d9f345ffa63bf909d574fe92", resultCode: 1, resultText: "Added", customerId: 1636, methodReferenceId: "187-c5892026d9f345ffa63bf909d574fe92" } } ``` ```js Stored method decline { responseText: "Declined" responseData: { referenceId: "187-d2a29970fa604edba5a6dbec67ace3ae", resultCode: 2, resultText: "200: Transaction was declined by processor.. DECLINE", customerId: 1636, methodReferenceId: "187-d2a29970fa604edba5a6dbec67ace3ae" } } ``` ### Response reference The response object passed to a callback function has the following structure: "Success" or "Declined" Container for response details. Authorization code for payments. Identifier for the transaction (for payments) or the stored payment method (for save payment method). The `referenceId` is used as the `storedMethodId` in other operations. See [Handling responses and errors](/guides/pay-in-components-overview#handling-responses-and-errors) for more. Result of operation. 1 is success, 2 is declined, and 3 is error. Message related the result. If the operation was successful, it returns "Added"/"Approved". If there was an error, it returns error details. ID for the customer owner of payment or saved payment method. ## Related resources See these related resources to help you get the most out of Payabli. * **[Embedded components overview](/guides/pay-in-components-overview)** - Learn how to use Payabli's embedded components to create customized checkout experiences without handling sensitive payment information yourself *** title: ExpressCheckout UI subtitle: >- Learn how to use the ExpressCheckout UI component on your site or in your app to securely accept digital wallet payments description: >- Add ExpressCheckout UI to your site to accept Apple Pay and Google Pay. Integrate digital wallet payments with minimal code using a drop-in checkout component 'og:description': >- Add ExpressCheckout UI to your site to accept Apple Pay and Google Pay. Integrate digital wallet payments with minimal code using a drop-in checkout component keywords: >- embedded payments, ExpressCheckout UI, Apple Pay, Google Pay, digital wallets, embedded components, checkout component icon: puzzle-piece slug: guides/pay-in-components-express-checkout area: * Pay In subArea: * Components * Wallets audience: * developers *** The ExpressCheckout component lets you embed an express checkout for digital wallets inside your website or application. This component provides seamless integration with Apple Pay and Google Pay. an image of an ExpressCheckout component rendered on a site

an image of an ExpressCheckout component rendered on a site

## Usage This component lets you add a robust low-code way to accept payments from digital wallets to your pages or apps with automatic device compatibility detection. Follow the configuration walkthrough to set it up in your project. See [Library URLs](/guides/pay-in-components-overview#library-urls) for important information about embedded components library URLs. ### Configuration walkthrough

` element serves as the mounting point where the embedded component renders. ```html focus=8-9 Payabli Integration

Express Checkout

``` /// Add Callback Functions Implement success, error, ready, and cancel callback functions to handle component responses and form validation states. These callback functions execute after the user interacts with the digital wallet buttons and the component receives a response from Payabli's API. ```html focus=63-105 Payabli Integration

Express Checkout

``` /// Initialize the Component The final step creates a working express checkout that can process transactions with digital wallets. ```html focus=112-113 Payabli Integration

Express Checkout

Pay securely with your digital wallet:

```

### Configuration reference These are the configuration parameters available for the ExpressCheckout component. This value determines the type of embedded component to render.\ Accepted values are: `methodEmbedded`, `methodLightbox`, `vterminal`, or `expressCheckout`.\ For the ExpressCheckout UI, this value is `expressCheckout`. See the [Embedded Components Overview](/guides/pay-in-components-overview) for more information on other component types. Container ID used for the component. When `true`, transactionDetails object is returned in the response. See a full example of the `transactionDetails` object in the [Transaction integration guide](/guides/pay-in-developer-transactions-create#includedetailstrue-response). API token for authentication. This should be a **public** API token, as described [here](/developers/api-reference/api-overview#authentication#organization-token-most-common). When the API token belongs to an organization, the entrypoint name identifies the target paypoint (merchant). Complete URL of a custom CSS stylesheet to use with the component. Configuration for the express checkout functionality. The amount for the transaction. The fee for the transaction. The currency for the transaction. Define the number of columns to use for digital wallet display. Card networks to accept payments from. Suggested options: * `amex` * `visa` * `discover` * `masterCard` * `jcb` When `true`, Apple Pay is enabled. The Apple Pay button style. Supported options: * “black”: Default black button. * “white-outline”: White button with an outline. * “white”: Solid white button. The text on Apple Pay button. Supported options: | Button Type | Description | Text on Apple Pay Button | | -------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------ | | `"plain"` | An Apple Pay button with the Apple Pay logo only, useful when an additional call to action isn't needed. | Apple Pay logo only (no text) | | `"buy"` | Use this button for product purchases. | Buy with Apple Pay logo | | `"donate"` | Used by approved nonprofits. Lets people make donations. | Donate with Apple Pay logo | | `"check-out"` | Use this button for purchase experiences that include other payment buttons that start with "Check out". | Check Out with Apple Pay logo | | `"book"` | Use this button for booking appointments, flights, or other experiences. | Book with Apple Pay logo | | `"continue"` | Use this button for general purchases. | Continue with Apple Pay logo | | `"top-up"` | Use this button for adding money to an account, or payment system. | Top Up with Apple Pay logo | | `"order"` | Use this button for placing orders for items. | Order with Apple Pay logo | | `"rent"` | Use this button for renting items such as equipment or cars. | Rent with Apple Pay logo | | `"support"` | Use this button for helping people give money to projects, causes, organizations, and other entities. | Support with Apple Pay logo | | `"contribute"` | Use this button to help people give money to projects, causes, organizations, and other entities. | Contribute with Apple Pay logo | | `"tip"` | Use this button to let people tip for goods or services. | Tip with Apple Pay logo | | `"pay"` | Use this button for general purchases. | Pay with Apple Pay logo | The Apple Pay button locale. Supported options: * **en-US**: English (US) * **ar-AB**: Arabic * **ca-ES**: Catalan * **zh-CN**: Chinese (China) * **zh-HK**: Chinese (Hong Kong) * **zh-TW**: Chinese (Taiwan) * **hr-HR**: Croatian * **cs-CZ**: Czech * **da-DK**: Danish * **de-DE**: German * **nl-NL**: Dutch * **en-AU**: English (Australia) * **en-GB**: English (UK) * **fi-FI**: Finnish * **fr-CA**: French (Canada) * **fr-FR**: French (France) * **el-GR**: Greek * **he-IL**: Hebrew * **hi-IN**: Hindi * **hu-HU**: Hungarian * **id-ID**: Indonesian * **it-IT**: Italian * **ja-JP**: Japanese * **ko-KR**: Korean * **ms-MY**: Malay * **nb-NO**: Norwegian * **pl-PL**: Polish * **pt-BR**: Portuguese (Brazil) * **pt-PT**: Portuguese (Portugal) * **ro-RO**: Romanian * **ru-RU**: Russian * **sk-SK**: Slovak * **es-MX**: Spanish (Mexico) * **es-ES**: Spanish (Spain) * **sv-SE**: Swedish * **th-TH**: Thai * **tr-TR**: Turkish * **uk-UA**: Ukrainian * **vi-VN**: Vietnamese When `true`, Google Pay is enabled. The Google Pay button style. Supported options: * “dark”: Solid black button. * “light”: Solid white button. The text on Google Pay button. Supported options: | Button Type | Description | Text on Google Pay Button | | ------------ | ---------------------------------------------------------------------------------------------------------- | ------------------------------ | | `"plain"` | An Google Pay button with the Google Pay logo only, useful when an additional call to action isn't needed. | Google Pay logo only (no text) | | `"buy"` | Use this button for product purchases. | Buy with Google Pay logo | | `"donate"` | Used by approved nonprofits. Lets people make donations. | Donate with Google Pay logo | | `"checkout"` | Use this button for purchase experiences that include other payment buttons that start with "Check out". | Check Out with Google Pay logo | | `"book"` | Use this button for booking appointments, flights, or other experiences. | Book with Google Pay logo | | `"order"` | Use this button for placing orders for items. | Order with Google Pay logo | | `"pay"` | Use this button for general purchases. | Pay with Google Pay logo | The Google Pay button locale. Supported options: * **en**: English * **ar**: Arabic * **bg**: Bulgarian * **ca**: Catalan * **cs**: Czech * **da**: Danish * **de**: German * **el**: Greek * **es**: Spanish * **et**: Estonian * **fi**: Finnish * **fr**: French * **hr**: Croatian * **id**: Indonesian * **it**: Italian * **ja**: Japanese * **ko**: Korean * **ms**: Malay * **nl**: Dutch * **no**: Norwegian * **pl**: Polish * **pt**: Portuguese * **ru**: Russian * **sk**: Slovak * **sl**: Slovenian * **sr**: Serbian * **sv**: Swedish * **th**: Thai * **tr**: Turkish * **uk**: Ukrainian * **zh**: Chinese When this field is `true`, the following fields `["postalAddress", "name", "phoneticName", "phone", "email"]` are required. They will be sent with the payment and can be read through the callbacks. Height of the button. Border radius of the button. Horizontal padding. Vertical padding. Customer's identification number. Customer's first name. Customer's last name. Customer's billing email address. Triggered when the ExpressCheckout component is ready to use. Triggered upon successful completion of a digital wallet transaction. Triggered if an error occurs during the digital wallet transaction. Triggered if the user cancels the digital wallet transaction. ## Response The ExpressCheckout component uses callback functions to handle responses. The callback functions are triggered based on the component's state. There are four callback functions you can define in the configuration: * `functionCallBackReady`: Triggered when the component is ready to use. * `functionCallBackSuccess`: Triggered when a transaction is successfully completed. * `functionCallBackError`: Triggered if an error occurs during the transaction. * `functionCallBackCancel`: Triggered if the user cancels the transaction. Each callback function receives a different response object that contains information about the component's state. ### `functionCallbackReady` response The `functionCallbackReady` response is triggered when the component is ready to use. ```js Ready response { applePay: true, googlePay: false } ``` When `true`, the component is ready to accept Apple Pay. When `true`, the component is ready to accept Google Pay. ### `functionCallbackSuccess` response The `functionCallBackSuccess` response is triggered when a transaction is successfully completed with the ExpressCheckout component. The `referenceId` field of the response object is the transaction ID. The `referenceId` field can be used in other operations. ```js title="Success response" { data: { isSuccess: true, pageIdentifier: "t.XMzKRgtV6eJrI2Fsn45RLKuRujHi53qDnsizyJXNM7ChdejoRNOdb0Dm7VXQ3H/aBVMu+14IB9sOS1hbZF/kXMKgUY94nspVI+mRSphe8HeSwbr5OxLUSmu0Uuc6RmDzaLUYXn8eDr…", responseData: { authCode: "", avsResponseText: null, billingContact: { addressLines: ["9425 SW 172nd Pl"], administrativeArea: "FL", country: "United States", countryCode: "US", familyName: "Martinez", givenName: "Fernando", locality: "Miami", phoneticFamilyName: "", phoneticGivenName: "", postalCode: "33197", subAdministrativeArea: "", subLocality: "" }, customerId: 6886, cvvResponseText: null, methodReferenceId: null, referenceId: "1148-2305e2cb80eb5969920f2cf9f2565455", resultCode: 1, resultText: "Approved", shippingContact: { addressLines: ["9425 SW 172nd Pl"], administrativeArea: "FL", country: "United States", countryCode: "US", emailAddress: "fernandotest@payabli.com", familyName: "Martinez", givenName: "Fernando", locality: "Miami", phoneNumber: "4089752020", phoneticFamilyName: "4192412942195", phoneticGivenName: "941924129412943", postalCode: "33197", subAdministrativeArea: "", subLocality: "" } }, responseText: "Success" }, paymentMethod: "apple_pay" } ``` ```js title="Success response (includeDetails: true)" { data: { isSuccess: true, pageIdentifier: "t.Z...60=", responseData: { transactionDetails: { parentOrgName: "Compare2", paypointDbaname: "Homeowners Association of Antarctica", paypointLegalname: "Homeowners Association of Antarctica", paypointEntryname: "5b819b4b43", paymentTransId: "598-dfb15b5d43e198458fa453f5d392cbe5", connectorName: "gp", externalProcessorInformation: "", gatewayTransId: "TRN_stQI1cBclkHarUYJXqQ8L5pA5WQEW9", orderId: "", method: "wallet", batchNumber: "901_combined_2025...cce80", batchAmount: 12, payorId: 109018, paymentData: { maskedAccount: "XXXXXXXXXXXX1111", accountType: "VISA", accountExp: "12/27", holderName: "Card Holder Name", storedId: null, initiator: null, storedMethodUsageType: null, sequence: null, orderDescription: null, accountId: null, signatureData: null, binData: null, paymentDetails: { totalAmount: 32, serviceFee: 12, checkNumber: null, checkImage: null, checkUniqueId: "", currency: "USD", orderDescription: null, orderId: null, orderIdAlternative: null, paymentDescription: null, groupNumber: null, source: null, payabliTransId: null, unbundled: null, categories: [], splitFunding: [] } }, transStatus: 1, paypointId: 901, totalAmount: 32, netAmount: 20, feeAmount: 12, settlementStatus: 0, operation: "Sale", responseData: { response: null, responsetext: "CAPTURED", authcode: "", transactionid: "TRN_stLO1nYnaiCvmUGUXqQ9Y5pA5YBKW9", avsresponse: null, avsresponse_text: "", cvvresponse: null, cvvresponse_text: "", orderid: null, type: null, response_code: "100", response_code_text: "Operation successful", customer_vault_id: null, emv_auth_response_data: null }, source: "express_checkout_google_pay", scheduleReference: 0, orgId: 5607, refundId: 0, returnedId: 0, chargebackId: 0, retrievalId: 0, transAdditionalData: null, invoiceData: { invoiceNumber: null, invoiceDate: null, invoiceDueDate: null, invoiceEndDate: null, invoiceStatus: null, invoiceType: null, frequency: null, paymentTerms: null, termsConditions: null, notes: null, tax: null, discount: null, invoiceAmount: null, freightAmount: null, dutyAmount: null, purchaseOrder: null, firstName: null, lastName: null, company: null, shippingAddress1: null, shippingAddress2: null, shippingCity: null, shippingState: null, shippingZip: null, shippingCountry: null, shippingEmail: null, shippingPhone: null, shippingFromZip: null, summaryCommodityCode: null, items: null, attachments: null, additionalData: null }, entrypageId: 0, externalPaypointID: "0582-5", isValidatedACH: false, transactionTime: "2025-10-06T19:28:17.666", customer: { identifiers: null, firstName: "Marin", lastName: "Test", companyName: null, billingAddress1: "717 Road St", billingAddress2: null, billingCity: "Dukuth", billingState: "AK", billingZip: "383828283", billingCountry: null, billingPhone: "(123) 123-1234", billingEmail: "marin@test.com", customerNumber: "2652", shippingAddress1: null, shippingAddress2: null, shippingCity: null, shippingState: null, shippingZip: null, shippingCountry: null, customerId: 105128, customerStatus: 0, additionalData: {} }, splitFundingInstructions: null, cfeeTransactions: [ { cFeeTransId: "901-dfa95b5d...392cbe5", transStatus: 1, feeAmount: 12, settlementStatus: 0, operation: "Sale", responseData: { response: null, responsetext: null, authcode: null, transactionid: null, avsresponse: null, avsresponse_text: null, cvvresponse: null, cvvresponse_text: null, orderid: null, type: null, response_code: null, response_code_text: null, customer_vault_id: null, emv_auth_response_data: null, additional_response_text: null, processor_batch_id: null }, refundId: 0, transactionTime: "2025-10-06T19:28:17.666", gatewayTransId: null, transactionEvents: [ { transEvent: "Approved", eventData: null, eventTime: "2025-10-06T19:28:17.734001" } ] } ], transactionEvents: [ { transEvent: "Created", eventData: "0HNG1P12AP11I:000000E9", eventTime: "2025-10-06T19:28:14.306424" }, { transEvent: "Approved", eventData: "0HNG1P12AP11I:000000E9", eventTime: "2025-10-06T19:28:17.725458" } ], pendingFeeAmount: 0, riskFlagged: false, riskFlaggedOn: "2025-10-06T19:28:14.2971252", riskStatus: "PASSED", riskReason: "", riskAction: "", riskActionCode: 0, deviceId: "", achSecCode: "", achHolderType: "", ipAddress: "73.245.4.228", isSameDayACH: false, walletType: "google_pay" }, authCode: "", referenceId: "901-dfa95...cbe5", resultCode: 1, resultText: "Approved", avsResponseText: "", cvvResponseText: "", customerId: 105128, methodReferenceId: null }, responseText: "Success" }, paymentMethod: "google_pay" } ``` "Success" or "Declined" Container for response details. Authorization code for payments. Identifier for the transaction (for payments) or the stored payment method (for save payment method). Result of operation. 1 is success, 2 is declined, and 3 is error. Message related the result. If the operation was successful, it returns "Added"/"Approved". If there was an error, it returns error details. ID for the customer owner of payment. Text code describing the result for address validation. Text code describing the result for CVV validation. The stored method's identifier (sometimes referred to as 'token') in Payabli. When `null`, the method wasn't created, or doesn't exist, depending on the operation performed. The billing contact information. The street portion of the address for the contact. For example: 123 Main Street. The contact's state. For example, CA. Billing country. The contact's ISO 3166 country code. The contact's email address. The contact's family name, also known as last name. The contact's given name, also known as first name. The contact's city. For example, Los Angeles. Specifies the pronunciation of the contact's last name. Specifies the pronunciation of the contact's first name. The contact's postal code. The contact's county or other region. Additional information associated with the contact's address. Shipping address and contact information for the transaction. The street portion of the address for the contact. For example: 123 Main Street. The contact's state. For example, CA. Billing country. The contact's ISO 3166 country code. The contact's email address. The contact's family name, also known as last name. The contact's given name, also known as first name. The contact's city. For example, Los Angeles. The contact's phone number. Specifies the pronunciation of the contact's last name. Specifies the pronunciation of the contact's first name. The contact's postal code. The contact's county or other region. Additional information associated with the contact's address. Boolean indicating whether the operation was successful. A `true` value indicates success. A `false` value indicates failure. Auxiliary validation used by Payabli in payment pages and components. The payment method used. Possible values include "apple\_pay", "google\_pay", etc. ### `functionCallBackError` response This response is triggered if an error occurs during the transaction. ```js Error response { paymentMethod: "apple_pay", // apple_pay, google_pay etc error: { isSuccess: false, pageIdentifier: null, responseCode: 5005, responseData: { explanation: "", todoAction: "" }, responseText: "", roomId: null } } ``` The payment method used. Possible values include "apple\_pay", "google\_pay", etc. Container for error details when an error occurs. Indicates whether the operation was successful. In error cases, this will be false. Auxiliary validation used by Payabli in payment pages and components. The error code. For example, 5005. See [API responseCode and resultCode Reference](/developers/api-reference/api-responses) for a full list of error codes. Additional details about the error. A detailed explanation of the error. Suggested action to resolve the error. A brief description of the error. Internal field used by Payabli. ### `functionCallBackCancel` response This response is triggered if the user cancels the transaction while the modal is shown. ```js Cancel response { data: { isTrusted: true }, paymentMethod: "apple_pay" } ``` Container for response data. In this field, `true` indicates that the event was triggered by a user action, such as a user manually canceling the payment process. The digital wallet method used. ## Combine components If you want to accept digital wallet payments along with card or ACH payments, you can load both the [EmbeddedMethod UI](../guides/pay-in-components-embeddedmethod-ui) and ExpressCheckout UI components on the same webpage. You can also use `updateConfig` to switch between component configurations on your page. The code example renders the components in this image: an image of an ExpressCheckout component rendered on a site

```html ExpressCheckout, ACH, and Card example

``` ## Related resources See these related resources to help you get the most out of Payabli. * **[Apple Pay overview](/guides/pay-in-wallets-apple-pay-overview)** - You must have at least one wallet service implemented before using Express Checkout * **[Google Pay™ overview](/guides/pay-in-wallets-google-pay-overview)** - You must have at least one wallet service implemented before using Express Checkout * **[Embedded components overview](/guides/pay-in-components-overview)** - Learn how to use Payabli's embedded components to create customized checkout experiences without handling sensitive payment information yourself *** title: Embedded component playground subtitle: 'Design, test, and preview the embedded components from your browser' description: >- Design, test, and preview embedded component configurations in real time from your browser. Experiment with styling, fields, and layouts before writing code 'og:description': >- Design, test, and preview embedded component configurations in real time from your browser. Experiment with styling, fields, and layouts before writing code keywords: >- embedded payments, component playground, embedded components, payment UI preview, developer tools, checkout design slug: guides/pay-in-components-playground icon: display-code area: * Pay In subArea: * Components audience: * developers *** The Embedded Component Playground is a live test environment that lets you edit configurations, test themes and component types, and change up styling on the fly. The Playground aims to dramatically boost your developer productivity. Every code change gets instant feedback from the live coding environment. You can even choose to open your work in Code Sandbox, where you can download the code and integrate into your project or work with friends.

Check out the [Playground](https://playground.payabli.com) to get started! ## Using the Playground Using the Playground is a breeze. Go to [https://playground.payabli.com](https://playground.payabli.com) and add your Payabli entrypoint and API token values. After you've done that, your component renders in real time and you can work on configuring it. ## Configuration drawer Open the configuration drawer by clicking the gear icon on the top left or using the keyboard shortcut \[Ctrl + K]. The drawer contains several helpful options to help you craft your component. Choose the type of component you want to use. The most popular and flexible option is EmbeddedMethod, but PayMethod is available too. This determines which UI preset to use to switch between configurations, such as Card or ACH payments. Controls what type of data the component will display, such as payment type, input field names, accepted card brands, and more. This is the theme that's used by the embedded component to style the container and fields. This supplementary theme styles some external UI controls, such as tabs, toggles, and trigger buttons that go with the embedded component. ## Experimenting with the code After you've set up your component's basic options, it's time to start experimenting with the code directly. In the code editor, there are three files which each control different functions: This file contains the setup that links your configuration and style together, and also contains the switcher mechanism and trigger buttons. This file contains the configuration for your component, like payment methods and input field names. For demo purposes in the Playground, it also contains the CSS to style the container and input fields. When you implement your own component, we *strongly* recommend that you export your theme's CSS to an external file and link it to your component using [customCssUrl](/guides/pay-in-components-overview#customize-component-styling). This file is where the control theme is located, which affects external UI controls such as the tabs, toggles, or trigger buttons. It also contains other important CSS that enables the components to function. ## Next steps Go ahead and experiment with the Playground. When you're done, you can either copy the content from the editor or open your work in Code Sandbox to download it. *** title: Extend embedded components with the temporary token flow (for developers) subtitle: >- Use the temporary token flow with embedded components to have complete control over user transaction experience without expanding PCI scope description: >- Use the temporary token flow with embedded components for full control over checkout. Capture tokens client-side, then process payments on your server securely 'og:description': >- Use the temporary token flow with embedded components for full control over checkout. Capture tokens client-side, then process payments on your server securely keywords: >- embedded payments, temporary tokens, embedded components, client-side tokenization, checkout flow, PCI compliance, payment security slug: guides/platform-developer-tokenization-temp-flow icon: binary-lock area: * Pay In subArea: * Tokenization * Components audience: * developers *** If you need more flexibility than Payabli's low-code embedded components provide, you can use a workflow that gives you the best of both worlds: the security and ease of embedded components and the flexibility of direct-access APIs. This temporary token flow lets you use the EmbeddedMethod UI and PayMethod UI embedded components to create a temporary payment token. Then you use that token for further actions like creating a permanent token or processing a payment. Using this approach, you can have more control over the transaction request. You can pass additional transaction parameters that can't be passed through the EmbeddedMethod configuration without expanding your PCI scope. This approach also provides flexibility for you to implement solutions for different use cases, like: * Allowing the customer to choose whether to save the payment method permanently or not by presenting a checkbox in your UI. * Displaying payment status or results to the customer after processing the payment via API. * Handling errors that occur during the API calls. * Using split funding functionality. * Incorporating idempotency and timeout handling. This workflow has two main steps: Use a component to generate a one-time use payment token. Use the payment token in a request to make the token permanent or process a transaction (or both). Temporary token flow from user to API with three processing options

Temporary token flow from user to API with three processing options

## Generate a temporary token The first step is to use the PayMethod UI or EmbeddedMethod UI embedded component to create a temporary token. Choose a component based on the experience you prefer: the PayMethod UI opens in a modal, and the EmbeddedMethod UI displays inline on the page. Whichever component you choose must be configured to create a temporary payment token, by setting `temporaryToken` to `true`. ```js PayMethod UI config example var payabliConfig0 = { type: "methodLightbox", rootContainer: "pay-component-1", defaultOpen: 'card', buttonLabelInModal: 'Save Payment Method', hideComponent: false, token: "YOUR_API_TOKEN", temporaryToken: true, // Set the token to be temporary customCssUrl: 'www.example.com/mycssfile.css', // other configuration options }; ``` ```js EmbeddedMethod UI config example var payabliConfig0 = { type: "methodEmbedded", rootContainer: "pay-component-1", defaultOpen: 'card', hideComponent: false, token: "YOUR_API_TOKEN", temporaryToken: true, // Set the token to be temporary customCssUrl: "www.example.com/mycssfile.css", // other configuration options }; ``` For full configuration options and examples, see [EmbeddedMethod UI Configuration Reference](/guides/pay-in-components-embeddedmethod-ui#configuration-reference) and [PayMethod UI Configuration Reference](/guides/pay-in-components-paymethod-ui#configuration-reference). When used, the component returns the temporary payment token in the response as `referenceId`. For example: ```json Example response response.responseText: "Success" response.responseData {"referenceId":"30e7658e-5c2c-4638-8308-b48edec0718b-1647","resultCode":1,"resultText":"Added","customerId":1647} ``` The response looks the same when saving a payment method with either component. ## Use the temporary token After you get the temporary token from the component, you have different options for using it. You can convert it to a permanent token, process a payment, or process a payment and save the token. The payment token is passed as `tokenId` only in requests to the `TokenStorage` endpoints. If you are using a payment token to make a transaction with a `MoneyIn` endpoint, it's passed as `storedMethodId`. Pay close attention when working with these code examples. ### Option 1: Create a permanent token To convert the temporary token returned by the component to a permanent one, make a request to the `TokenStorage/Add` endpoint, passing the temporary token with `tokenId`. ```bash Convert a temporary token to permanent curl --request POST \ --url https://api-sandbox.payabli.com/api/TokenStorage/add?temporary=false \ --header 'accept: application/json' \ --header 'content-type: application/*+json' \ --header 'requestToken: ' \ --header 'idempotencyKey: 6B29FC40-CA47-1067-B31D-00DD010662DA' \ --data ' { "paymentMethod": { "method": "card", "tokenId": "c9700e93-b2ed-4b75-b1e4-ca4fb04fbe45-224" }, "customerData": { "customerId": 0, "firstName": "John", "lastName": "Doe", "company": "Sunshine LLC", "customerNumber": "3456-7645A", "billingAddress1": "123 Main Street", "billingCity": "Johnson City", "billingState": "TN", "billingZip": "37612", }, "entryPoint": "mypaypoint", "source": "web", "methodDescription": "Main card", "fallbackAuth": true, } ' ``` A successful request returns a 200 response with a JSON body. The value in "ReferenceId" is both the `storedMethodId` for transactions, and the `methodId` for managing the payment method. ```json Success response example { "isSuccess": true, "responseText": "Success", "responseData": { "ReferenceId": "32-8877drt65345632-678", "ResultCode": 1, "ResultText": "Approved", "CustomerId": 0 } } ``` Include `fallbackAuth` to prevent problems with processors that can't use a zero dollar authorization. ### Option 2: Process a payment To process a one-time payment, call `MoneyIn/GetPaid` endpoint and pass the temporary token as `storedMethodId` along with other parameters, such as `OrderID` and `idempotencyKey`. Make a payment with a saved payment method ```bash Make a payment with a saved payment method curl --request POST \ --url https://api-sandbox.payabli.com/api/MoneyIn/getpaid \ --header 'Content-Type: application/json' \ --header 'idempotencyKey: bf21c30673244141b39d81d73a42613d' \ --header 'requestToken: ' \ --data '{ "paymentMethod": { "method": "card", "storedMethodId": "f4ee4209bbc347248dbc97ab09f17820" }, "orderId": "1009-WEB", "entryPoint": "47a9s3e200o", "paymentDetails": { "totalAmount": 129.35, "serviceFee": 0 }, "customerData": { "customerId": 253, "firstName": "Rachel", "lastName": "Borodino", "customerNumber": "12345679" } }' ``` This is just like processing a transaction with any other payment method. See [Make a Sale Transaction](/guides/pay-in-developer-transactions-create) for more information and example requests and responses. ### Option 3: Process a payment and create a permanent token Use the `saveIfSuccess` parameter when calling `MoneyIn/GetPaid`, to process a payment and generate a permanent payment method token in a single API call. ```bash Process a payment and create a permanent token curl --request POST \ --url https://api-sandbox.payabli.com/api/MoneyIn/getpaid \ --header 'Content-Type: application/json' \ --header 'idempotencyKey: bf21c30673244141b39d81d73a42613d' \ --header 'requestToken: ' \ --data '{ "paymentMethod": { "method": "card", "storedMethodId": "728e2ba3-5526-4fe6-ac14-59c438beb436-0", "saveIfSuccess": true }, "orderId": "1009-WEB", "entryPoint": "47a9s3e200o", "paymentDetails": { "totalAmount": 129.35, "serviceFee": 0 }, "customerData": { "customerId": 253, "firstName": "Rachel", "lastName": "Borodino", "customerNumber": "12345679" } }' ``` You should expect to see a response like the following: ```json { "responseText": "Success", "isSuccess": true, "pageIdentifier": null, "responseData": { "authCode": "123456", "referenceId": "227-d30f8a47ddaf4fa989016d21d08000abd", "resultCode": 1, "resultText": "Approved", "avsResponseText": "No address or ZIP match only", "cvvResponseText": "CVV2/CVC2 no match", "customerId": 1409, "methodReferenceId": "1ed73dfa-3c67-4076-8f8c-9f26317993ed" } } ``` The transaction's ID is returned as `referenceId`, and the saved payment method ID is `methodReferenceId`. ## Disable customer creation When using the temporary token flow, you can prevent the embedded component from creating a customer record and associating the temporary token with it by setting `forceCustomerCreation` to `false` in the config. When the temporary token is converted to a permanent token or used to process a payment, the customer record is then associated with the token or transaction at that time. This is useful when you want to anonymously save a payment method and then associate it with a customer record later. ```js var payabliConfig0 = { type: "methodEmbedded", rootContainer: "pay-component-1", defaultOpen: 'card', token: "YOUR_API_TOKEN", temporaryToken: true, // Use temporary token flow forceCustomerCreation: false, // Disable customer creation // other configuration options // no customerData object is passed }; ``` You should expect to see a response like this: ```json { "responseText": "Success", "isSuccess": true, "pageIdentifier": "t.VL...qza72w=", "responseData": { "referenceId": "23b0775b-9b7e-4576-98b8-c791d052b714-0" // temp token, "resultCode": 1, "resultText": "Added", "customerId": null, "methodReferenceId": "23b0775b-9b7e-4576-98b8-c791d052b714-0" } } ``` The `customerId` field is `null` in the response because the config didn't contain a `customerData` object. You can then use the temporary token to create a permanent token or process a payment, and the customer record will be associated with the token or transaction at that time. ```bash Convert a temporary token to permanent curl --request POST \ --url https://api-sandbox.payabli.com/api/TokenStorage/add?temporary=false \ --header 'accept: application/json' \ --header 'content-type: application/*+json' \ --header 'requestToken: ' \ --header 'idempotencyKey: 6B29FC40-CA47-1067-B31D-00DD010662DA' \ --data ' { "paymentMethod": { "method": "card", "tokenId": "23b0775b-9b7e-4576-98b8-c791d052b714-0" }, "customerData": { "customerId": 0, "firstName": "John", "lastName": "Doe", "company": "Sunshine LLC", "customerNumber": "3456-7645A", "billingAddress1": "123 Main Street", "billingCity": "Johnson City", "billingState": "TN", "billingZip": "37612", }, "entryPoint": "mypaypoint", "source": "web", "methodDescription": "Main card", "fallbackAuth": true, } ' ``` ```bash Make a payment with a saved payment method curl --request POST \ --url https://api-sandbox.payabli.com/api/MoneyIn/getpaid \ --header 'Content-Type: application/json' \ --header 'idempotencyKey: bf21c30673244141b39d81d73a42613d' \ --header 'requestToken: ' \ --data '{ "paymentMethod": { "method": "card", "storedMethodId": "23b0775b-9b7e-4576-98b8-c791d052b714-0" }, "orderId": "1009-WEB", "entryPoint": "47a9s3e200o", "paymentDetails": { "totalAmount": 129.35, "serviceFee": 0 }, "customerData": { "customerId": 253, "firstName": "Rachel", "lastName": "Borodino", "customerNumber": "12345679" } }' ``` ```bash Process a payment and create a permanent token curl --request POST \ --url https://api-sandbox.payabli.com/api/MoneyIn/getpaid \ --header 'Content-Type: application/json' \ --header 'idempotencyKey: bf21c30673244141b39d81d73a42613d' \ --header 'requestToken: ' \ --data '{ "paymentMethod": { "method": "card", "storedMethodId": "23b0775b-9b7e-4576-98b8-c791d052b714-0", "saveIfSuccess": true }, "orderId": "1009-WEB", "entryPoint": "47a9s3e200o", "paymentDetails": { "totalAmount": 129.35, "serviceFee": 0 }, "customerData": { "customerId": 253, "firstName": "Rachel", "lastName": "Borodino", "customerNumber": "12345679" } }' ``` ## Example app This section covers setting up a demo app that uses the [EmbeddedMethod UI](/guides/pay-in-components-embeddedmethod-ui) and custom API calls to drive the [temporary token flow](/guides/platform-developer-tokenization-temp-flow). The demo app walks the user through a checkout experience with an interactive guide that updates while the transaction processes. Visit the [repository](https://github.com/payabli/examples/tree/main/temp-token) to see the code. screenshot of the demo app running

### Dependencies Before you begin, make sure you have the following installed on your machine: * [npm](https://nodejs.org/en/download/) * [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) ### Set up the app Run these commands in your terminal to configure the demo app on your local machine: ```bash git clone https://github.com/payabli/examples ``` ```bash cd examples/temp-token ``` ```bash npm install ``` ```bash cp .env.template .env ``` Open the `.env` file in your code editor. Set `PAYABLI_API_TOKEN` to your Payabli API token and `PAYABLI_API_PAYPOINT` to your Payabli API paypoint: ```txt # your Payabli API token PAYABLI_API_TOKEN="123...XYZ" # your Payabli API paypoint PAYABLI_API_PAYPOINT="123...XYZ" ``` ```bash npm run dev ``` ### Use the app The app is a single-page application with a sidebar that contains an interactive guide. When you click the "Confirm order" button to complete the checkout, the state of the transaction will update the sidebar guide. Inside of the guide, there are example code snippets that you can copy and paste to help you get started using the temporary token flow in your own applications. The app has two ways to toggle the sidebar: * Click the button on the bottom-left (desktop) or bottom-right (mobile) of the screen with a book icon. * Press the `Ctrl + K` key combination on your keyboard (desktop only). ## Related resources See these related resources to help you get the most out of Payabli. * **[Payment method tokenization](/guides/platform-tokenization-overview)** - Learn how payment method tokenization secures sensitive data and enhances security for your payments * **[Temporary token example app (for developers)](/guides/platform-tokenization-temp-token-app)** - Go through a guided checkout experience using the temporary token flow * **[EmbeddedMethod UI](/guides/pay-in-components-embeddedmethod-ui)** - Learn how to use the EmbeddedMethod UI embedded component to add the ability to securely store a payment profile or execute a sale * **[PayMethod UI](/guides/pay-in-components-paymethod-ui)** - Learn how to use the PayMethod UI embedded component to securely store a payment profile with a low-code modal-based UI. *** title: Temporary token example app (for developers) subtitle: Go through a guided checkout experience using the temporary token flow description: >- Walk through a guided checkout using the temporary token flow example app. See how client-side tokenization and server-side payment processing work together 'og:description': >- Walk through a guided checkout using the temporary token flow example app. See how client-side tokenization and server-side payment processing work together keywords: >- embedded payments, temporary token, example app, checkout flow, client-side tokenization, payment integration, developer quickstart slug: guides/platform-tokenization-temp-token-app icon: cash-register area: * Pay In subArea: * Tokenization * Components audience: * developers *** This guide covers setting up a demo app that uses the [EmbeddedMethod UI](/guides/pay-in-components-embeddedmethod-ui) and custom API calls to drive the [temporary token flow](/guides/platform-developer-tokenization-temp-flow). The demo app walks the user through a checkout experience with an interactive guide that updates while the transaction processes. Visit the [repository](https://github.com/payabli/examples/tree/main/temp-token) to see the code. screenshot of the demo app running

## Dependencies Before you begin, make sure you have the following installed on your machine: * [npm](https://nodejs.org/en/download/) * [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) ## Set up the app Run these commands in your terminal to configure the demo app on your local machine: ```bash git clone https://github.com/payabli/examples ``` ```bash cd examples/temp-token ``` ```bash npm install ``` ```bash cp .env.template .env ``` Open the `.env` file in your code editor. Set `PAYABLI_API_TOKEN` to your Payabli API token and `PAYABLI_API_PAYPOINT` to your Payabli API paypoint: ```txt # your Payabli API token PAYABLI_API_TOKEN="123...XYZ" # your Payabli API paypoint PAYABLI_API_PAYPOINT="123...XYZ" ``` ```bash npm run dev ``` ## Use the app The app is a single-page application with a sidebar that contains an interactive guide. When you click the "Confirm order" button to complete the checkout, the state of the transaction will update the sidebar guide. Inside of the guide, there are example code snippets that you can copy and paste to help you get started using the temporary token flow in your own applications. The app has two ways to toggle the sidebar: * Click the button on the bottom-left (desktop) or bottom-right (mobile) of the screen with a book icon. * Press the `Ctrl + K` key combination on your keyboard (desktop only). *** title: Embedded components framework integrations subtitle: >- Learn how to use Payabli's embedded components with front-end frameworks like React and Vue description: >- Integrate embedded components with React, Vue, and other JavaScript frameworks. Follow framework-specific setup guides to add payment UI to your application 'og:description': >- Integrate embedded components with React, Vue, and other JavaScript frameworks. Follow framework-specific setup guides to add payment UI to your application keywords: >- embedded payments, React payments, Vue payments, framework integration, embedded components, frontend payments, JavaScript payments icon: brands react slug: guides/pay-in-developer-components-frameworks area: * Pay In subArea: * Components audience: * developers *** You can use Payabli's embedded components in a React or Vue application following the same configuration patterns as in a vanilla JavaScript application. ## React Visit the [React Integration Example](https://github.com/payabli/examples/tree/main/react-integration) to see Payabli's embedded components in a React application. ### Step 1: Create the hook Create a hook that allows you to use the embedded component and execute its methods. The hook needs to inject the Payabli library script and initialize the embedded component with the provided configuration. Make a new file for the `usePayabli` hook and add the following code: ```ts TypeScript // usePayabli.ts import { useState, useEffect, useRef, useCallback } from "react"; const useScript = (src: string) => { const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { const existingScript = document.querySelector(`script[src="${src}"]`); const onLoad = () => { setIsLoaded(true); }; if (!existingScript) { const script = document.createElement("script"); script.src = src; script.async = true; script.addEventListener("load", onLoad); document.body.appendChild(script); return () => { script.removeEventListener("load", onLoad); document.body.removeChild(script); }; } else { if (existingScript.getAttribute("data-loaded") === "true") { setIsLoaded(true); } else { existingScript.addEventListener("load", onLoad); } } }, [src]); return isLoaded; }; declare var PayabliComponent: any; export const usePayabli = ( options: any, method: string, parameters: any = null, production: boolean = false ) => { const [payOptions, setPayOptions] = useState(options); const [isInitialized, setIsInitialized] = useState(false); const payComponentRef = useRef(null); const initCallbacks = useRef<(() => void)[]>([]); // Queue for functions waiting on initialization const scriptSrc = production ? "https://embedded-component.payabli.com/component.js" : "https://embedded-component-sandbox.payabli.com/component.js"; const isScriptLoaded = useScript(scriptSrc); useEffect(() => { if (isScriptLoaded) { payComponentRef.current = new PayabliComponent(payOptions); setIsInitialized(true); // payabliExecute queued callbacks initCallbacks.current.forEach((cb) => cb()); initCallbacks.current = []; // Clear the queue } }, [isScriptLoaded, payOptions]); useEffect(() => { if (isInitialized && payComponentRef.current) { payComponentRef.current.updateConfig(payOptions); } }, [isInitialized, payOptions]); const payabliReinit = useCallback(() => { if (isInitialized && payComponentRef.current) { payComponentRef.current.payabliExec("reinit"); } }, [isInitialized]); const payabliExec = useCallback(() => { const payabliExecuteMethod = () => { if (parameters != null) { payComponentRef.current.payabliExec(method, parameters); } else { payComponentRef.current.payabliExec(method); } }; if (isInitialized && payComponentRef.current) { payabliExecuteMethod(); } else { initCallbacks.current.push(payabliExecuteMethod); // Queue the payabliExecution } }, [isInitialized, method, parameters]); return [payOptions, setPayOptions, payabliExec, payabliReinit]; }; ``` ```js JavaScript // usePayabli.js import { useState, useEffect, useRef, useCallback } from "react"; const useScript = (src) => { const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { const existingScript = document.querySelector(`script[src="${src}"]`); const onLoad = () => { setIsLoaded(true); }; if (!existingScript) { const script = document.createElement("script"); script.src = src; script.async = true; script.addEventListener("load", onLoad); document.body.appendChild(script); return () => { script.removeEventListener("load", onLoad); document.body.removeChild(script); }; } else { if (existingScript.getAttribute("data-loaded") === "true") { setIsLoaded(true); } else { existingScript.addEventListener("load", onLoad); } } }, [src]); return isLoaded; }; export const usePayabli = ( options, method, parameters = null, production = false ) => { const [payOptions, setPayOptions] = useState(options); const [isInitialized, setIsInitialized] = useState(false); const payComponentRef = useRef(null); const initCallbacks = useRef([]); // Queue for functions waiting on initialization const scriptSrc = production ? "https://embedded-component.payabli.com/component.js" : "https://embedded-component-sandbox.payabli.com/component.js"; const isScriptLoaded = useScript(scriptSrc); useEffect(() => { if (isScriptLoaded) { payComponentRef.current = new PayabliComponent(payOptions); setIsInitialized(true); // Execute queued callbacks initCallbacks.current.forEach((cb) => cb()); initCallbacks.current = []; // Clear the queue } }, [isScriptLoaded, payOptions]); useEffect(() => { if (isInitialized && payComponentRef.current) { payComponentRef.current.updateConfig(payOptions); } }, [isInitialized, payOptions]); const payabliReinit = useCallback(() => { if (isInitialized && payComponentRef.current) { payComponentRef.current.payabliExec("reinit"); } }, [isInitialized]); const payabliExec = useCallback(() => { const payabliExecuteMethod = () => { if (parameters != null) { payComponentRef.current[method](parameters); } else { payComponentRef.current[method](); } }; if (isInitialized && payComponentRef.current) { payabliExecuteMethod(); } else { initCallbacks.current.push(payabliExecuteMethod); // Queue the execution } }, [isInitialized, method, parameters]); return [payOptions, setPayOptions, payabliExec, payabliReinit]; }; ``` ### Step 2: Create the component Create a new `PayabliCheckout` component that passes in the configuration object for the embedded component to the `usePayabli` hook. The `PayabliCheckout` component uses the `payabliExec` function to execute the embedded component's method. Create a new file in the same directory and add the following code: There are multiple types of embedded components with different use cases. See the [Embedded Components Overview](/guides/pay-in-components-overview#choose-a-component) to decide which component type is best for you. ```tsx TSX // PayabliCheckout.tsx import { usePayabli } from './usePayabli'; export const PayabliCheckout = () => { const token = "o.z8j8aaztW9tUtUg4d.." const entryPoint = "bozeman-aikido" const rootContainer = "pay-component-1" const payabliButton = "btnx" const [payabliConfig, setPayabliConfig, payabliExec] = usePayabli({ type: "methodEmbedded", rootContainer: rootContainer, defaultOpen: 'card', // offering only Card method - Embedded UI can only show a payment method // customCssUrl: "your url to a custom css file", token: token, entryPoint: entryPoint, card: { enabled: true, amex: true, discover: true, visa: true, mastercard: true, jcb: true, diners: true, inputs: { // here we are customizing the input fields cardHolderName: { label: "NAME ON CARD", placeholder: "", floating: false, value: "John Doe", size: 12, row: 0, order: 0 }, cardNumber: { label: "CARD NUMBER", placeholder: "1234 1234 1234 1234", floating: false, size: 6, row: 1, order: 0 }, cardExpirationDate: { label: "EXPIRATION DATE", placeholder: "MM/YY", floating: false, size: 6, row: 1, order: 1 }, cardCvv: { label: "CVV/CVC", placeholder: "CVV/CVC", floating: false, size: 6, row: 2, order: 0, }, cardZipcode: { label: "ZIP/POSTAL CODE", placeholder: "ZIP/POSTAL CODE", floating: false, size: 6, row: 2, order: 1, country: ["us", "ca"], } } }, ach: { enabled: false, checking: true, savings: true }, customerData: { customerNumber: "00001", firstName: "John", lastName: "Doe", billingEmail: "johndoe@email.com" }, functionCallBackSuccess: (response: any) => { const containerEl = document.getElementById(rootContainer); const responseText = JSON.stringify(response.responseText); const responseData = JSON.stringify(response.responseData); alert(responseText + " " + responseData); containerEl!.innerHTML += `

Embedded Component Response:

${responseText}

${responseData}

`; }, functionCallBackReady: (data: any) => { var btn = document.getElementById(payabliButton); if (data[1] === true) { btn!.classList.remove("hidden"); } else { if (!btn!.classList.contains("hidden")) { btn!.classList.add("hidden"); } } }, functionCallBackError: (errors: any) => { alert('Error!'); console.log(errors); } }, "pay", { paymentDetails: { totalAmount: 100, serviceFee: 0, categories: [ { label: "payment", amount: 100, qty: 1, }, ], }, }) return (

) } ``` ```jsx JSX // PayabliCheckout.jsx import { usePayabli } from './usePayabli'; export const PayabliCheckout = () => { const token = "o.z8j8aaztW9tUtUg4d.." const entryPoint = "bozeman-aikido" const rootContainer = "pay-component-1" const payabliButton = "btnx" const [payabliConfig, setPayabliConfig, payabliExec] = usePayabli({ type: "methodEmbedded", rootContainer: rootContainer, defaultOpen: 'card', // offering only Card method - Embedded UI can only show a payment method // customCssUrl: "your url to a custom css file", token: token, entryPoint: entryPoint, card: { enabled: true, amex: true, discover: true, visa: true, mastercard: true, jcb: true, diners: true, inputs: { // here we are customizing the input fields cardHolderName: { label: "NAME ON CARD", placeholder: "", floating: false, value: "John Doe", size: 12, row: 0, order: 0 }, cardNumber: { label: "CARD NUMBER", placeholder: "1234 1234 1234 1234", floating: false, size: 6, row: 1, order: 0 }, cardExpirationDate: { label: "EXPIRATION DATE", placeholder: "MM/YY", floating: false, size: 6, row: 1, order: 1 }, cardCvv: { label: "CVV/CVC", placeholder: "CVV/CVC", floating: false, size: 6, row: 2, order: 0, }, cardZipcode: { label: "ZIP/POSTAL CODE", placeholder: "ZIP/POSTAL CODE", floating: false, size: 6, row: 2, order: 1, country: ["us", "ca"], } } }, ach: { enabled: false, checking: true, savings: true }, customerData: { customerNumber: "00001", firstName: "John", lastName: "Doe", billingEmail: "johndoe@email.com" }, functionCallBackSuccess: (response) => { const containerEl = document.getElementById(rootContainer); const responseText = JSON.stringify(response.responseText); const responseData = JSON.stringify(response.responseData); alert(responseText + " " + responseData); containerEl.innerHTML += `

Embedded Component Response:

${responseText}

${responseData}

`; }, functionCallBackReady: (data) => { var btn = document.getElementById(payabliButton); if (data[1] === true) { btn.classList.remove("hidden"); } else { if (!btn.classList.contains("hidden")) { btn.classList.add("hidden"); } } }, functionCallBackError: (errors) => { alert('Error!'); console.log(errors); } }, "pay", { paymentDetails: { totalAmount: 100, serviceFee: 0, categories: [ { label: "payment", amount: 100, qty: 1, }, ], }, }) return (

) } ``` ```tsx TSX // PayabliCheckout.tsx import { usePayabli } from './usePayabli.ts'; export const PayabliCheckout = () => { const token = "o.z8j8aaztW9tUtUg4d.." const entryPoint = "bozeman-aikido" const [payabliConfig, setPayabliConfig, payabliExec, payabliReinit] = usePayabli({ type: "methodLightbox", rootContainer: "pay-component-1", buttonLabelInModal: 'Save Payment Method', defaultOpen: 'ach', hideComponent: true, token: token, entryPoint: entryPoint, card: { enabled: true, amex: true, discover: true, visa: true, mastercard: true, jcb: true, diners: true }, ach: { enabled: true, checking: true, savings: false }, customerData: { customerNumber: "00001", firstName: "John", lastName: "Doe", billingEmail: "johndoe@email.com" }, functionCallBackSuccess: (response: any) => { // This callback covers both 2XX and 4XX responses console.log(response); switch (response.responseText) { case "Success": // Tokenization was successful alert(`Success: ${response.responseData.resultText}`); break; case "Declined": // Tokenization failed due to processor decline or validation errors // Recommend reinitialization of the component so that the user can try again // with different card data alert(`Declined: ${response.responseData.resultText}`); payabliReinit() break; default: // Other response text. These are normally errors with Payabli internal validations // before processor engagement // We recommend reinitializing the component. // If the problem persists, contact Payabli to help debug alert(`Error: ${response.responseText}`); payabliReinit() break; } }, functionCallBackError: (errors: any) => { // This callback covers 5XX response or parsing errors // We recommend reinitializing the component. // If the problem persists, contact Payabli to help debug console.log(errors); payabliReinit() } }, "pay", { paymentDetails: { totalAmount: 100, serviceFee: 0, categories: [ { label: "payment", amount: 100, qty: 1, }, ], }, }) return (

) } ``` ```jsx JSX // PayabliCheckout.jsx import { usePayabli } from './usePayabli.js'; export const PayabliCheckout = () => { const token = "o.z8j8aaztW9tUtUg4d.." const entryPoint = "bozeman-aikido" const [payabliConfig, setPayabliConfig, payabliExec, payabliReinit] = usePayabli({ type: "methodLightbox", rootContainer: "pay-component-1", buttonLabelInModal: 'Save Payment Method', defaultOpen: 'ach', hideComponent: true, token: token, entryPoint: entryPoint, card: { enabled: true, amex: true, discover: true, visa: true, mastercard: true, jcb: true, diners: true }, ach: { enabled: true, checking: true, savings: false }, customerData: { customerNumber: "00001", firstName: "John", lastName: "Doe", billingEmail: "johndoe@email.com" }, functionCallBackSuccess: (response) => { // This callback covers both 2XX and 4XX responses console.log(response); switch (response.responseText) { case "Success": // Tokenization was successful alert(`Success: ${response.responseData.resultText}`); break; case "Declined": // Tokenization failed due to processor decline or validation errors // Recommend reinitialization of the component so that the user can try again // with different card data alert(`Declined: ${response.responseData.resultText}`); payabliReinit() break; default: // Other response text. These are normally errors with Payabli internal validations // before processor engagement // We recommend reinitializing the component. // If the problem persists, contact Payabli to help debug alert(`Error: ${response.responseText}`); payabliReinit() break; } }, functionCallBackError: (errors) => { // This callback covers 5XX response or parsing errors // We recommend reinitializing the component. // If the problem persists, contact Payabli to help debug console.log(errors); payabliReinit() } }, "pay", { paymentDetails: { totalAmount: 100, serviceFee: 0, categories: [ { label: "payment", amount: 100, qty: 1, }, ], }, }) return (

) } ``` ### Types The hook receives the following arguments: The configuration object for the embedded component. See the [configuration reference](/guides/pay-in-components-embeddedmethod-ui#configuration-reference) for the component type you are using. The method to execute in `payabliExec`. See the [field](/guides/pay-in-components-overview#param-payabli-exec-action-parameters) for more information. An optional object that contains objects to pass to the `method`. See the [`paymentMethod`](/guides/pay-in-components-embeddedmethod-ui#param-payment-method), [`paymentDetails`](/guides/pay-in-components-embeddedmethod-ui#param-payment-details), or [`customerData`](/guides/pay-in-components-embeddedmethod-ui#param-customer-data) objects for more information. A boolean value that determines whether to use the production or sandbox environment. The hook returns an array with the following elements: The configuration object for the embedded component. See the [configuration reference](/guides/pay-in-components-embeddedmethod-ui#configuration-reference) for the component type you are using. A function to update the configuration object for the embedded component. This allows you to dynamically change the options after initialization. A function to execute the embedded component's method. This will call the method specified in the `method` argument passed to the hook. A function to reinitialize the embedded component. ## Vue Visit the [Vue integration example](https://github.com/payabli/examples/tree/main/vue-integration) to see Payabli's embedded components in a Vue application. ### Step 1: Create the composable Create a composable that allows you to use the embedded component and execute its methods. The composable needs to inject the Payabli library script and initialize the embedded component with the provided configuration. Make a new file for the `usePayabli` composable and add the following code: ```ts TypeScript // usePayabli.ts import { ref, reactive, onMounted, watchEffect } from 'vue'; const loadedScripts = new Set(); const useScript = (src: string) => { const isLoaded = ref(false); onMounted(() => { if (loadedScripts.has(src)) { isLoaded.value = true; return; } const existingScript = document.querySelector(`script[src="${src}"]`); const handleLoad = () => { loadedScripts.add(src); isLoaded.value = true; script.setAttribute("data-loaded", "true"); }; let script: HTMLScriptElement; if (!existingScript) { script = document.createElement("script"); script.src = src; script.async = true; script.addEventListener("load", handleLoad); document.body.appendChild(script); } else { if (existingScript.getAttribute("data-loaded") === "true") { isLoaded.value = true; } else { existingScript.addEventListener("load", handleLoad); } } }); return isLoaded; }; declare var PayabliComponent: any; export const usePayabli = ( options: any, method: string, parameters: any = null, production = false ) => { const payOptions = reactive({ ...options }); const isInitialized = ref(false); const payComponentRef = ref(null); const initCallbacks: (() => void)[] = []; const scriptSrc = production ? "https://embedded-component.payabli.com/component.js" : "https://embedded-component-sandbox.payabli.com/component.js"; const isScriptLoaded = useScript(scriptSrc); const initPayabli = () => { if (!isScriptLoaded.value || isInitialized.value) return; payComponentRef.value = new PayabliComponent(payOptions); isInitialized.value = true; initCallbacks.splice(0).forEach(cb => cb()); }; watchEffect(() => { if (isScriptLoaded.value) { initPayabli(); } }); watchEffect(() => { if (isInitialized.value && payComponentRef.value) { payComponentRef.value.updateConfig(payOptions); } }); const payabliReinit = () => { if (isInitialized.value && payComponentRef.value) { payComponentRef.value.payabliExec("reinit"); } }; const payabliExec = () => { const exec = () => { if (!payComponentRef.value) return; if (payOptions.type === "methodEmbedded") { if (parameters != null) { payComponentRef.value.payabliExec(method, parameters); } else { payComponentRef.value.payabliExec(method); } } else if ( payOptions.type === "methodLightbox" || payOptions.type === "vterminal" ) { payComponentRef.value.showModal(); } }; if (isInitialized.value) { exec(); } else { initCallbacks.push(exec); } }; return [payOptions, payabliExec, payabliReinit] as const; }; ``` ### Step 2: Create the component Create a new `PayabliCheckout` component that passes in the configuration object for the embedded component to the `usePayabli` composable. The `PayabliCheckout` component uses the `payabliExec` function to execute the embedded component's method. Create a new file in the same directory and add the following code: ```vue Vue ``` ### Types The composable receives the following arguments: The configuration object for the embedded component. See the [configuration reference](/guides/pay-in-components-embeddedmethod-ui#configuration-reference) for the component type you are using. The method to execute in `payabliExec`. See the [field](/guides/pay-in-components-overview#param-payabli-exec-action-parameters) for more information. An optional object that contains objects to pass to the `method`. See the [`paymentMethod`](/guides/pay-in-components-embeddedmethod-ui#param-payment-method), [`paymentDetails`](/guides/pay-in-components-embeddedmethod-ui#param-payment-details), or [`customerData`](/guides/pay-in-components-embeddedmethod-ui#param-customer-data) objects for more information. A boolean value that determines whether to use the production or sandbox environment. The composable returns an array with the following elements: The configuration object for the embedded component. See the [configuration reference](/guides/pay-in-components-embeddedmethod-ui#configuration-reference) for the component type you are using. A function to execute the embedded component's method. This will call the method specified in the `method` argument passed to the hook. A function to reinitialize the embedded component. ## Related resources See these related resources to help you get the most out of Payabli. * **[Embedded components overview](/guides/pay-in-components-overview)** - Learn how to use Payabli's embedded components to create customized checkout experiences without handling sensitive payment information yourself * **[EmbeddedMethod UI](/guides/pay-in-components-embeddedmethod-ui)** - Learn how to use the EmbeddedMethod UI embedded component to add the ability to securely store a payment profile or execute a sale *** title: Use the TypeScript SDK subtitle: Learn how to install and use the TypeScript SDK to develop apps description: >- Install and configure the Payabli TypeScript SDK to process payments, manage payouts, and handle boarding in your Node.js applications with type-safe methods 'og:description': >- Install and configure the Payabli TypeScript SDK to process payments, manage payouts, and handle boarding in your Node.js applications with type-safe methods keywords: >- embedded payments, TypeScript SDK, payment API, SDK integration, developer tools, payment processing, Node.js payments slug: developers/platform-sdk-typescript-guide icon: brands node-js area: * Pay In * Pay Out * Pay Ops * Developer Tools * SDKs audience: * developers *** Payabli offers a Software Development Kit (SDK) for the TypeScript programming language. The TypeScript SDK can be installed in your projects to support app development and provide type safety when calling Payabli's APIs. Most development environments can use the SDK to generate code suggestions and inline documentation. See the [`@payabli/sdk-node`](https://www.npmjs.com/package/@payabli/sdk-node) package for more information. ## Dependencies Before you begin, make sure you have the following installed on your machine: * [npm](https://nodejs.org/en/download/) * [tsx](https://www.npmjs.com/package/tsx) * [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) ## Use the SDK This section shows you how to install and use the Payabli SDK in a new Node.js project. The example code shows how to use the SDK to make a transaction with the `moneyIn.getpaid` method. The `moneyIn.getpaid` method calls the [MoneyIn/getpaid](/developers/api-reference/moneyin/make-a-transaction) endpoint. See the [SDK reference](https://github.com/payabli/sdk-node/blob/main/reference.md) for a full list of methods. Method names in the SDK correspond to endpoint names in the API reference. For example: the `notification.addNotification` method calls the [POST Notification](/developers/api-reference/notification/add-notification) endpoint. Open your terminal and run the following commands to create a new Node.js project: ```bash mkdir my-payabli-app cd my-payabli-app npm init -y ``` Open the `package.json` file in your code editor and set the `"type"` field to `"module"`: ```json { "type": "module" } ``` Run the following command to install the Payabli SDK: ```bash npm install @payabli/sdk-node ``` Create a new file called `index.ts` in the root of your `my-payabli-app` directory: ```bash touch index.ts ``` Open the `index.ts` file in your code editor.

/// Import the client Import the Payabli SDK to make it available in your code. ```typescript // index.ts import { PayabliClient } from '@payabli/sdk-node'; ``` /// Initialize the client Create an authenticated client instance with your API key. This client has methods that call Payabli's API endpoints. ```typescript focus=4 // index.ts import { PayabliClient } from '@payabli/sdk-node'; const client = new PayabliClient({ apiKey: "REPLACE_WITH_YOUR_API_KEY" }); ``` /// Define the entrypoint Define your entrypoint. Get this value from your Payabli account. ```typescript focus=6 // index.ts import { PayabliClient } from '@payabli/sdk-node'; const client = new PayabliClient({ apiKey: "REPLACE_WITH_YOUR_API_KEY" }); const entryPoint = "REPLACE_WITH_YOUR_ENTRYPOINT"; ``` /// Build the payment request Construct a request object that contains all the necessary fields to process a transaction. Include payment details, a payment method, and customer data. ```typescript focus=8-29 // index.ts import { PayabliClient } from '@payabli/sdk-node'; const client = new PayabliClient({ apiKey: "REPLACE_WITH_YOUR_API_KEY" }); const entryPoint = "REPLACE_WITH_YOUR_ENTRYPOINT"; const request = { body: { customerData: { customerId: 4440, }, entryPoint, ipaddress: "255.255.255.255", paymentDetails: { serviceFee: 0, totalAmount: 100, }, paymentMethod: { cardcvv: "999", cardexp: "02/27", cardHolder: "Kassiane Cassian", cardnumber: "4111111111111111", cardzip: "12345", initiator: "payor", method: "card", }, }, }; ``` /// Execute the transaction Call `moneyIn.getpaid()` to process the transaction. The client calls Payabli's `POST /MoneyIn/getpaid` endpoint. ```typescript focus=31 // index.ts import { PayabliClient } from '@payabli/sdk-node'; const client = new PayabliClient({ apiKey: "REPLACE_WITH_YOUR_API_KEY" }); const entryPoint = "REPLACE_WITH_YOUR_ENTRYPOINT"; const request = { body: { customerData: { customerId: 4440, }, entryPoint, ipaddress: "255.255.255.255", paymentDetails: { serviceFee: 0, totalAmount: 100, }, paymentMethod: { cardcvv: "999", cardexp: "02/27", cardHolder: "Kassiane Cassian", cardnumber: "4111111111111111", cardzip: "12345", initiator: "payor", method: "card", }, }, }; const result = await client.moneyIn.getpaid(request); ``` /// Show the result Log the transaction response. Check the output to see if the transaction was successful. ```typescript focus=33 // index.ts import { PayabliClient } from '@payabli/sdk-node'; const client = new PayabliClient({ apiKey: "REPLACE_WITH_YOUR_API_KEY" }); const entryPoint = "REPLACE_WITH_YOUR_ENTRYPOINT"; const request = { body: { customerData: { customerId: 4440, }, entryPoint, ipaddress: "255.255.255.255", paymentDetails: { serviceFee: 0, totalAmount: 100, }, paymentMethod: { cardcvv: "999", cardexp: "02/27", cardHolder: "Kassiane Cassian", cardnumber: "4111111111111111", cardzip: "12345", initiator: "payor", method: "card", }, }, }; const result = await client.moneyIn.getpaid(request); console.log(result); ```

Run the app with the following command: ```bash tsx index.ts ``` Check the console output for the result of the transaction. ```js { responseText: "Success", isSuccess: true, pageIdentifier: null, responseData: { authCode: "TAS003", referenceId: "255-67bc92c141e24f474f60c1968fcba0cd", resultCode: 1, resultText: "Approved", avsResponseText: "No Match, No address or ZIP match", cvvResponseText: "CVV2/CVC2 match", customerId: 4440, methodReferenceId: null, }, } ``` In production, we recommend that you pass a stored method ID to the `paymentMethod` object instead of card details. See more information in [Tokenization Overview](/guides/platform-tokenization-overview). ## SDK example app The SDK example app is a basic web app built with the Payabli TypeScript SDK. It demonstrates how to manage customers and use the temporary token flow with the SDK. The code is publicly available in the [example repository](https://github.com/payabli/examples/tree/main/sdk/ts-sdk). customer creation page of SDK example app

customer creation page of SDK example app

/// Import required namespaces Import the Payabli SDK to make it available in your code. ```csharp // Program.cs using PayabliApi; ``` /// Initialize the client Create an authenticated client instance with your API key. This client has methods that call Payabli's API endpoints. ```csharp focus=4 // Program.cs using PayabliApi; var client = new PayabliApiClient("REPLACE_WITH_YOUR_API_KEY"); ``` /// Define the entrypoint Define your entrypoint. Get this value from your Payabli account. ```csharp focus=6 // Program.cs using PayabliApi; var client = new PayabliApiClient("REPLACE_WITH_YOUR_API_KEY"); var entrypoint = "REPLACE_WITH_YOUR_ENTRYPOINT"; ``` /// Build the payment request Construct a request object that contains all the necessary fields to process a transaction. Include payment details, a payment method, and customer data. ```csharp focus=8-32 // Program.cs using PayabliApi; var client = new PayabliApiClient("REPLACE_WITH_YOUR_API_KEY"); var entrypoint = "REPLACE_WITH_YOUR_ENTRYPOINT"; var request = new RequestPayment { Body = new TransRequestBody { CustomerData = new PayorDataRequest { CustomerId = 4440, }, EntryPoint = entrypoint, Ipaddress = "255.255.255.255", PaymentDetails = new PaymentDetail { ServiceFee = 0, TotalAmount = 100, }, PaymentMethod = new PayMethodCredit { Cardcvv = "999", Cardexp = "02/27", CardHolder = "Kassiane Cassian", Cardnumber = "4111111111111111", Cardzip = "12345", Initiator = "payor", Method = "card", }, }, }; ``` /// Execute the transaction Call `MoneyIn.GetpaidAsync()` to process the transaction. The client calls Payabli's `POST /MoneyIn/getpaid` endpoint. ```csharp focus=36-39 // Program.cs using PayabliApi; var client = new PayabliApiClient("REPLACE_WITH_YOUR_API_KEY"); var entrypoint = "REPLACE_WITH_YOUR_ENTRYPOINT"; var request = new RequestPayment { Body = new TransRequestBody { CustomerData = new PayorDataRequest { CustomerId = 4440, }, EntryPoint = entrypoint, Ipaddress = "255.255.255.255", PaymentDetails = new PaymentDetail { ServiceFee = 0, TotalAmount = 100, }, PaymentMethod = new PayMethodCredit { Cardcvv = "999", Cardexp = "02/27", CardHolder = "Kassiane Cassian", Cardnumber = "4111111111111111", Cardzip = "12345", Initiator = "payor", Method = "card", }, }, }; var result = await client.MoneyIn.GetpaidAsync(new RequestPayment { Body = request.Body, }); ``` /// Show the result Log the transaction response. Check the output to see if the transaction was successful. ```csharp focus=41-47 // Program.cs using PayabliApi; var client = new PayabliApiClient("REPLACE_WITH_YOUR_API_KEY"); var entrypoint = "REPLACE_WITH_YOUR_ENTRYPOINT"; var request = new RequestPayment { Body = new TransRequestBody { CustomerData = new PayorDataRequest { CustomerId = 4440, }, EntryPoint = entrypoint, Ipaddress = "255.255.255.255", PaymentDetails = new PaymentDetail { ServiceFee = 0, TotalAmount = 100, }, PaymentMethod = new PayMethodCredit { Cardcvv = "999", Cardexp = "02/27", CardHolder = "Kassiane Cassian", Cardnumber = "4111111111111111", Cardzip = "12345", Initiator = "payor", Method = "card", }, }, }; var result = await client.MoneyIn.GetpaidAsync(new RequestPayment { Body = request.Body, }); Console.WriteLine($"Response: {result.ResponseText}"); Console.WriteLine($"Success: {result.IsSuccess}"); if (result.ResponseData != null) { Console.WriteLine($"Reference ID: {result.ResponseData.ReferenceId}"); Console.WriteLine($"Result: {result.ResponseData.ResultText}"); } ```

Run the app with the following command: ```bash dotnet run ``` Check the console output for the result of the transaction. A successful transaction returns output like this: ```txt Response: Success Success: True Reference ID: 255-67bc92c141e24f474f60c1968fcba0cd Result: Approved ``` In production, we recommend that you pass a stored method ID to the `PaymentMethod` object instead of card details. See more information in [Tokenization Overview](/guides/platform-tokenization-overview). ## SDK example app The SDK example app is a basic web app built with the Payabli C# SDK. It demonstrates how to manage customers and use the temporary token flow with the SDK. The code is publicly available in the [example repository](https://github.com/payabli/examples/tree/main/sdk/cs-sdk). customer creation page of SDK example app

/// Include autoloader and import client Import the Payabli SDK to make it available in your code. ```php new TransRequestBody([ 'customerData' => new PayorDataRequest([ 'customerId' => 4440, ]), 'entryPoint' => $entrypoint, 'ipaddress' => "255.255.255.255", 'paymentDetails' => new PaymentDetail([ 'serviceFee' => 0, 'totalAmount' => 100, ]), 'paymentMethod' => new PayMethodCredit([ 'cardcvv' => "999", 'cardexp' => "02/27", 'cardHolder' => "Kassiane Cassian", 'cardnumber' => "4111111111111111", 'cardzip' => "12345", 'initiator' => "payor", 'method' => "card", ]), ]), ]); ``` /// Execute the transaction Call `moneyIn->getpaid()` to process the transaction. The client calls Payabli's `POST /MoneyIn/getpaid` endpoint. ```php focus=40 new TransRequestBody([ 'customerData' => new PayorDataRequest([ 'customerId' => 4440, ]), 'entryPoint' => $entrypoint, 'ipaddress' => "255.255.255.255", 'paymentDetails' => new PaymentDetail([ 'serviceFee' => 0, 'totalAmount' => 100, ]), 'paymentMethod' => new PayMethodCredit([ 'cardcvv' => "999", 'cardexp' => "02/27", 'cardHolder' => "Kassiane Cassian", 'cardnumber' => "4111111111111111", 'cardzip' => "12345", 'initiator' => "payor", 'method' => "card", ]), ]), ]); $result = $client->moneyIn->getpaid($request); ``` /// Show the result Log the transaction response. Check the output to see if the transaction was successful. ```php focus=42 new TransRequestBody([ 'customerData' => new PayorDataRequest([ 'customerId' => 4440, ]), 'entryPoint' => $entrypoint, 'ipaddress' => "255.255.255.255", 'paymentDetails' => new PaymentDetail([ 'serviceFee' => 0, 'totalAmount' => 100, ]), 'paymentMethod' => new PayMethodCredit([ 'cardcvv' => "999", 'cardexp' => "02/27", 'cardHolder' => "Kassiane Cassian", 'cardnumber' => "4111111111111111", 'cardzip' => "12345", 'initiator' => "payor", 'method' => "card", ]), ]), ]); $result = $client->moneyIn->getpaid($request); var_dump($result); ```

Run the app with the following command: ```bash php index.php ``` Check the console output for the result of the transaction. A successful transaction returns output like this: ```txt array(4) { ["responseText"]=> string(7) "Success" ["isSuccess"]=> bool(true) ["pageIdentifier"]=> NULL ["responseData"]=> array(8) { ["authCode"]=> string(6) "TAS003" ["referenceId"]=> string(36) "255-67bc92c141e24f474f60c1968fcba0cd" ["resultCode"]=> int(1) ["resultText"]=> string(8) "Approved" ["avsResponseText"]=> string(35) "No Match, No address or ZIP match" ["cvvResponseText"]=> string(14) "CVV2/CVC2 match" ["customerId"]=> int(4440) ["methodReferenceId"]=> NULL } } ``` In production, we recommend that you pass a stored method ID to the `paymentMethod` object instead of card details. See more information in [Tokenization Overview](/guides/platform-tokenization-overview). ## SDK example app The SDK example app is a basic web app built with the Payabli PHP SDK. It demonstrates how to manage customers and use the temporary token flow with the SDK. The code is publicly available in the [example repository](https://github.com/payabli/examples/tree/main/sdk/php-sdk). customer creation page of SDK example app

/// Import the client and types Import the Payabli SDK to make it available in your code. ```python # main.py from payabli import payabli, PaymentDetail, PayMethodCredit, PayorDataRequest ``` /// Initialize the client Create an authenticated client instance with your API key. This client has methods that call Payabli's API endpoints. ```python focus=4 # main.py from payabli import payabli, PaymentDetail, PayMethodCredit, PayorDataRequest client = payabli(api_key="REPLACE_WITH_YOUR_API_KEY") ``` /// Define the entrypoint Define your entrypoint. Get this value from your Payabli account. ```python focus=6 # main.py from payabli import payabli, PaymentDetail, PayMethodCredit, PayorDataRequest client = payabli(api_key="REPLACE_WITH_YOUR_API_KEY") entry_point = "REPLACE_WITH_YOUR_ENTRYPOINT" ``` /// Build the payment request Construct a request object that contains all the necessary fields to process a transaction. Include payment details, a payment method, and customer data. ```python focus=8-27 # main.py from payabli import payabli, PaymentDetail, PayMethodCredit, PayorDataRequest client = payabli(api_key="REPLACE_WITH_YOUR_API_KEY") entry_point = "REPLACE_WITH_YOUR_ENTRYPOINT" request_kwargs = dict( customer_data=PayorDataRequest( customer_id=4440, ), entry_point=entry_point, ipaddress="255.255.255.255", payment_details=PaymentDetail( service_fee=0.0, total_amount=100.0, ), payment_method=PayMethodCredit( cardcvv="999", cardexp="02/27", card_holder="Kassiane Cassian", cardnumber="4111111111111111", cardzip="12345", initiator="payor", method="card", ), ) ``` /// Execute the transaction Call `money_in.getpaid()` to process the transaction. The client calls Payabli's `POST /MoneyIn/getpaid` endpoint. ```python focus=29 # main.py from payabli import payabli, PaymentDetail, PayMethodCredit, PayorDataRequest client = payabli(api_key="REPLACE_WITH_YOUR_API_KEY") entry_point = "REPLACE_WITH_YOUR_ENTRYPOINT" request_kwargs = dict( customer_data=PayorDataRequest( customer_id=4440, ), entry_point=entry_point, ipaddress="255.255.255.255", payment_details=PaymentDetail( service_fee=0.0, total_amount=100.0, ), payment_method=PayMethodCredit( cardcvv="999", cardexp="02/27", card_holder="Kassiane Cassian", cardnumber="4111111111111111", cardzip="12345", initiator="payor", method="card", ), ) result = client.money_in.getpaid(**request_kwargs) ``` /// Show the result Log the transaction response. Check the output to see if the transaction was successful. ```python focus=31 # main.py from payabli import payabli, PaymentDetail, PayMethodCredit, PayorDataRequest client = payabli(api_key="REPLACE_WITH_YOUR_API_KEY") entry_point = "REPLACE_WITH_YOUR_ENTRYPOINT" request_kwargs = dict( customer_data=PayorDataRequest( customer_id=4440, ), entry_point=entry_point, ipaddress="255.255.255.255", payment_details=PaymentDetail( service_fee=0.0, total_amount=100.0, ), payment_method=PayMethodCredit( cardcvv="999", cardexp="02/27", card_holder="Kassiane Cassian", cardnumber="4111111111111111", cardzip="12345", initiator="payor", method="card", ), ) result = client.money_in.getpaid(**request_kwargs) print(result) ```

Run the app with the following command: ```bash python main.py ``` Check the console output for the result of the transaction. A successful transaction returns output like this: ```txt { 'response_text': 'Success', 'is_success': True, 'page_identifier': None, 'response_data': { 'auth_code': 'TAS003', 'reference_id': '255-67bc92c141e24f474f60c1968fcba0cd', 'result_code': 1, 'result_text': 'Approved', 'avs_response_text': 'No Match, No address or ZIP match', 'cvv_response_text': 'CVV2/CVC2 match', 'customer_id': 4440, 'method_reference_id': None } } ``` In production, we recommend that you pass a stored method ID to the `payment_method` object instead of card details. See more information in [Tokenization Overview](/guides/platform-tokenization-overview). ## SDK example app The SDK example app is a basic web app built with the Payabli Python SDK. It demonstrates how to manage customers and use the temporary token flow with the SDK. The code is publicly available in the [example repository](https://github.com/payabli/examples/tree/main/sdk/py-sdk). customer creation page of SDK example app

/// Import the SDK classes Import the Payabli SDK to make it available in your code. ```java // PayabliExample.java package example; import io.github.payabli.api.PayabliApiClient; import io.github.payabli.api.PayabliApiClientBuilder; import io.github.payabli.api.resources.moneyin.requests.RequestPayment; import io.github.payabli.api.resources.moneyin.types.PayabliApiResponseGetPaid; import io.github.payabli.api.resources.moneyin.types.TransRequestBody; import io.github.payabli.api.types.PaymentDetail; import io.github.payabli.api.types.PaymentMethod; import io.github.payabli.api.types.PayMethodCredit; import io.github.payabli.api.types.PayorDataRequest; ``` /// Initialize the client Create an authenticated client instance with your API key. This client has methods that call Payabli's API endpoints. ```java focus=16-18 // PayabliExample.java package example; import io.github.payabli.api.PayabliApiClient; import io.github.payabli.api.PayabliApiClientBuilder; import io.github.payabli.api.resources.moneyin.requests.RequestPayment; import io.github.payabli.api.resources.moneyin.types.PayabliApiResponseGetPaid; import io.github.payabli.api.resources.moneyin.types.TransRequestBody; import io.github.payabli.api.types.PaymentDetail; import io.github.payabli.api.types.PaymentMethod; import io.github.payabli.api.types.PayMethodCredit; import io.github.payabli.api.types.PayorDataRequest; public class PayabliExample { public static void main(String[] args) { PayabliApiClient client = new PayabliApiClientBuilder() .apiKey("REPLACE_WITH_YOUR_API_KEY") .build(); } } ``` /// Build the payment request Construct a request object that contains all the necessary fields to process a transaction. Include payment details, a payment method, and customer data. ```java focus=20-44 // PayabliExample.java package example; import io.github.payabli.api.PayabliApiClient; import io.github.payabli.api.PayabliApiClientBuilder; import io.github.payabli.api.resources.moneyin.requests.RequestPayment; import io.github.payabli.api.resources.moneyin.types.PayabliApiResponseGetPaid; import io.github.payabli.api.resources.moneyin.types.TransRequestBody; import io.github.payabli.api.types.PaymentDetail; import io.github.payabli.api.types.PaymentMethod; import io.github.payabli.api.types.PayMethodCredit; import io.github.payabli.api.types.PayorDataRequest; public class PayabliExample { public static void main(String[] args) { PayabliApiClient client = new PayabliApiClientBuilder() .apiKey("REPLACE_WITH_YOUR_API_KEY") .build(); PaymentDetail paymentDetails = PaymentDetail.builder() .totalAmount(100.0) .serviceFee(0.0) .build(); PayorDataRequest customerData = PayorDataRequest.builder() .customerId(4440L) .build(); PayMethodCredit paymentMethod = PayMethodCredit.builder() .cardexp("02/27") .cardnumber("4111111111111111") .cardcvv("999") .cardHolder("Kassiane Cassian") .cardzip("12345") .initiator("payor") .build(); TransRequestBody requestBody = TransRequestBody.builder() .paymentDetails(paymentDetails) .paymentMethod(PaymentMethod.of(paymentMethod)) .customerData(customerData) .entryPoint("REPLACE_WITH_YOUR_ENTRYPOINT") .ipaddress("255.255.255.255") .build(); } } ``` /// Execute the transaction Call `moneyIn().getpaid()` to process the transaction. The client calls Payabli's `POST /MoneyIn/getpaid` endpoint. ```java focus=50 // PayabliExample.java package example; import io.github.payabli.api.PayabliApiClient; import io.github.payabli.api.PayabliApiClientBuilder; import io.github.payabli.api.resources.moneyin.requests.RequestPayment; import io.github.payabli.api.resources.moneyin.types.PayabliApiResponseGetPaid; import io.github.payabli.api.resources.moneyin.types.TransRequestBody; import io.github.payabli.api.types.PaymentDetail; import io.github.payabli.api.types.PaymentMethod; import io.github.payabli.api.types.PayMethodCredit; import io.github.payabli.api.types.PayorDataRequest; public class PayabliExample { public static void main(String[] args) { PayabliApiClient client = new PayabliApiClientBuilder() .apiKey("REPLACE_WITH_YOUR_API_KEY") .build(); PaymentDetail paymentDetails = PaymentDetail.builder() .totalAmount(100.0) .serviceFee(0.0) .build(); PayorDataRequest customerData = PayorDataRequest.builder() .customerId(4440L) .build(); PayMethodCredit paymentMethod = PayMethodCredit.builder() .cardexp("02/27") .cardnumber("4111111111111111") .cardcvv("999") .cardHolder("Kassiane Cassian") .cardzip("12345") .initiator("payor") .build(); TransRequestBody requestBody = TransRequestBody.builder() .paymentDetails(paymentDetails) .paymentMethod(PaymentMethod.of(paymentMethod)) .customerData(customerData) .entryPoint("REPLACE_WITH_YOUR_ENTRYPOINT") .ipaddress("255.255.255.255") .build(); RequestPayment request = RequestPayment.builder() .body(requestBody) .build(); PayabliApiResponseGetPaid result = client.moneyIn().getpaid(request); } } ``` /// Show the result Log the transaction response. Check the output to see if the transaction was successful. ```java focus=52 // PayabliExample.java package example; import io.github.payabli.api.PayabliApiClient; import io.github.payabli.api.PayabliApiClientBuilder; import io.github.payabli.api.resources.moneyin.requests.RequestPayment; import io.github.payabli.api.resources.moneyin.types.PayabliApiResponseGetPaid; import io.github.payabli.api.resources.moneyin.types.TransRequestBody; import io.github.payabli.api.types.PaymentDetail; import io.github.payabli.api.types.PaymentMethod; import io.github.payabli.api.types.PayMethodCredit; import io.github.payabli.api.types.PayorDataRequest; public class PayabliExample { public static void main(String[] args) { PayabliApiClient client = new PayabliApiClientBuilder() .apiKey("REPLACE_WITH_YOUR_API_KEY") .build(); PaymentDetail paymentDetails = PaymentDetail.builder() .totalAmount(100.0) .serviceFee(0.0) .build(); PayorDataRequest customerData = PayorDataRequest.builder() .customerId(4440L) .build(); PayMethodCredit paymentMethod = PayMethodCredit.builder() .cardexp("02/27") .cardnumber("4111111111111111") .cardcvv("999") .cardHolder("Kassiane Cassian") .cardzip("12345") .initiator("payor") .build(); TransRequestBody requestBody = TransRequestBody.builder() .paymentDetails(paymentDetails) .paymentMethod(PaymentMethod.of(paymentMethod)) .customerData(customerData) .entryPoint("REPLACE_WITH_YOUR_ENTRYPOINT") .ipaddress("255.255.255.255") .build(); RequestPayment request = RequestPayment.builder() .body(requestBody) .build(); PayabliApiResponseGetPaid result = client.moneyIn().getpaid(request); System.out.println(result); } } ```

Compile and run the app with Maven: ```bash mvn clean compile exec:java ``` Check the console output for the result of the transaction. A successful transaction returns output like this: ```txt PayabliApiResponseGetPaid( responseText=Success, isSuccess=true, pageIdentifier=null, responseData=ResponseData( authCode=TAS003, referenceId=255-67bc92c141e24f474f60c1968fcba0cd, resultCode=1, resultText=Approved, avsResponseText=No Match, No address or ZIP match, cvvResponseText=CVV2/CVC2 match, customerId=4440, methodReferenceId=null ) ) ``` In production, we recommend that you pass a stored method ID to the `paymentMethod` object instead of card details. See more information in [Tokenization Overview](/guides/platform-tokenization-overview). ## SDK example app The SDK example app is a basic web app built with the Payabli Java SDK. It demonstrates how to manage customers and use the temporary token flow with the SDK. The code is publicly available in the [example repository](https://github.com/payabli/examples/tree/main/sdk/java-sdk). customer creation page of SDK example app

/// Import required packages Import the Payabli SDK to make it available in your code. ```go // main.go package main import ( "context" "fmt" "log" sdk "github.com/payabli/sdk-go" "github.com/payabli/sdk-go/client" "github.com/payabli/sdk-go/option" ) ``` /// Initialize the client Create an authenticated client instance with your API key. This client has methods that call Payabli's API endpoints. ```go focus=13-16 // main.go package main import ( "context" "fmt" "log" sdk "github.com/payabli/sdk-go" "github.com/payabli/sdk-go/client" "github.com/payabli/sdk-go/option" ) func main() { client := client.NewClient(option.WithApiKey("REPLACE_WITH_YOUR_API_KEY")) } ``` /// Define the entrypoint Define your entrypoint. Get this value from your Payabli account. ```go focus=17 // main.go package main import ( "context" "fmt" "log" sdk "github.com/payabli/sdk-go" "github.com/payabli/sdk-go/client" "github.com/payabli/sdk-go/option" ) func main() { client := client.NewClient(option.WithApiKey("REPLACE_WITH_YOUR_API_KEY")) entrypoint := "REPLACE_WITH_YOUR_ENTRYPOINT" } ``` /// Build the payment request Construct a request object that contains all the necessary fields to process a transaction. Include payment details, a payment method, and customer data. ```go focus=19-35 // main.go package main import ( "context" "fmt" "log" sdk "github.com/payabli/sdk-go" "github.com/payabli/sdk-go/client" "github.com/payabli/sdk-go/option" ) func main() { client := client.NewClient(option.WithApiKey("REPLACE_WITH_YOUR_API_KEY")) entrypoint := "REPLACE_WITH_YOUR_ENTRYPOINT" request := &sdk.RequestPayment{ Body: &sdk.TransRequestBody{ EntryPoint: &entrypoint, PaymentDetails: &sdk.PaymentDetail{ TotalAmount: 100.0, }, PaymentMethod: &sdk.PaymentMethod{ PayMethodCredit: &sdk.PayMethodCredit{ Cardnumber: "4111111111111111", Cardexp: "02/27", }, }, CustomerData: &sdk.PayorDataRequest{ CustomerId: sdk.Int64(4440), }, }, } } ``` /// Execute the transaction Call `MoneyIn.Getpaid()` to process the transaction. The client calls Payabli's `POST /MoneyIn/getpaid` endpoint. ```go focus=37-40 // main.go package main import ( "context" "fmt" "log" sdk "github.com/payabli/sdk-go" "github.com/payabli/sdk-go/client" "github.com/payabli/sdk-go/option" ) func main() { client := client.NewClient(option.WithApiKey("REPLACE_WITH_YOUR_API_KEY")) entrypoint := "REPLACE_WITH_YOUR_ENTRYPOINT" request := &sdk.RequestPayment{ Body: &sdk.TransRequestBody{ EntryPoint: &entrypoint, PaymentDetails: &sdk.PaymentDetail{ TotalAmount: 100.0, }, PaymentMethod: &sdk.PaymentMethod{ PayMethodCredit: &sdk.PayMethodCredit{ Cardnumber: "4111111111111111", Cardexp: "02/27", }, }, CustomerData: &sdk.PayorDataRequest{ CustomerId: sdk.Int64(4440), }, }, } response, err := client.MoneyIn.Getpaid(context.Background(), request) if err != nil { log.Fatalf("Transaction failed: %v", err) } } ``` /// Show the result Log the transaction response. Check the output to see if the transaction was successful. ```go focus=42 // main.go package main import ( "context" "fmt" "log" sdk "github.com/payabli/sdk-go" "github.com/payabli/sdk-go/client" "github.com/payabli/sdk-go/option" ) func main() { client := client.NewClient(option.WithApiKey("REPLACE_WITH_YOUR_API_KEY")) entrypoint := "REPLACE_WITH_YOUR_ENTRYPOINT" request := &sdk.RequestPayment{ Body: &sdk.TransRequestBody{ EntryPoint: &entrypoint, PaymentDetails: &sdk.PaymentDetail{ TotalAmount: 100.0, }, PaymentMethod: &sdk.PaymentMethod{ PayMethodCredit: &sdk.PayMethodCredit{ Cardnumber: "4111111111111111", Cardexp: "02/27", }, }, CustomerData: &sdk.PayorDataRequest{ CustomerId: sdk.Int64(4440), }, }, } response, err := client.MoneyIn.Getpaid(context.Background(), request) if err != nil { log.Fatalf("Transaction failed: %v", err) } fmt.Printf("Transaction successful: %+v\n", response) } ```

Run the app with the following command: ```bash go run main.go ``` Check the console output for the result of the transaction. A successful transaction returns output like this: ```txt Transaction successful: { ResponseText: Success IsSuccess: true PageIdentifier: ResponseData: { AuthCode: TAS003 ReferenceId: 255-67bc92c141e24f474f60c1968fcba0cd ResultCode: 1 ResultText: Approved AvsResponseText: No Match, No address or ZIP match CvvResponseText: CVV2/CVC2 match CustomerId: 4440 MethodReferenceId: } } ``` In production, we recommend that you pass a stored method ID to the `PaymentMethod` object instead of card details. See more information in [Tokenization Overview](/guides/platform-tokenization-overview). ## SDK example app The SDK example app is a basic web app built with the Payabli Go SDK. It demonstrates how to manage customers and use the temporary token flow with the SDK. The code is publicly available in the [example repository](https://github.com/payabli/examples/tree/main/sdk/go-sdk). customer creation page of SDK example app

/// Import the SDK Import the Payabli SDK to make it available in your code. ```ruby # main.rb require 'payabli' ``` /// Initialize the client Create an authenticated client instance with your API key. This client has methods that call Payabli's API endpoints. ```ruby focus=4-7 # main.rb require 'payabli' client = Payabli::Client.new( api_key: "REPLACE_WITH_YOUR_API_KEY", base_url: Payabli::Environment::SANDBOX ) ``` /// Define the entrypoint Define your entrypoint. Get this value from your Payabli account. ```ruby focus=9 # main.rb require 'payabli' client = Payabli::Client.new( api_key: "REPLACE_WITH_YOUR_API_KEY", base_url: Payabli::Environment::SANDBOX ) entry_point = "REPLACE_WITH_YOUR_ENTRYPOINT" ``` /// Build the payment request Construct a request object that contains all the necessary fields to process a transaction. Include payment details, a payment method, and customer data. ```ruby focus=11-30 # main.rb require 'payabli' client = Payabli::Client.new( api_key: "REPLACE_WITH_YOUR_API_KEY", base_url: Payabli::Environment::SANDBOX ) entry_point = "REPLACE_WITH_YOUR_ENTRYPOINT" request_params = { customer_data: { customer_id: 4440 }, entry_point: entry_point, ipaddress: "255.255.255.255", payment_details: { service_fee: 0.0, total_amount: 100.0 }, payment_method: { cardcvv: "999", cardexp: "02/27", card_holder: "Kassiane Cassian", cardnumber: "4111111111111111", cardzip: "12345", initiator: "payor", method: "card" } } ``` /// Execute the transaction Call `money_in.getpaid()` to process the transaction. The client calls Payabli's `POST /MoneyIn/getpaid` endpoint. ```ruby focus=32 # main.rb require 'payabli' client = Payabli::Client.new( api_key: "REPLACE_WITH_YOUR_API_KEY", base_url: Payabli::Environment::SANDBOX ) entry_point = "REPLACE_WITH_YOUR_ENTRYPOINT" request_params = { customer_data: { customer_id: 4440 }, entry_point: entry_point, ipaddress: "255.255.255.255", payment_details: { service_fee: 0.0, total_amount: 100.0 }, payment_method: { cardcvv: "999", cardexp: "02/27", card_holder: "Kassiane Cassian", cardnumber: "4111111111111111", cardzip: "12345", initiator: "payor", method: "card" } } result = client.money_in.getpaid(**request_params) ``` /// Show the result Log the transaction response. Check the output to see if the transaction was successful. ```ruby focus=34 # main.rb require 'payabli' client = Payabli::Client.new( api_key: "REPLACE_WITH_YOUR_API_KEY", base_url: Payabli::Environment::SANDBOX ) entry_point = "REPLACE_WITH_YOUR_ENTRYPOINT" request_params = { customer_data: { customer_id: 4440 }, entry_point: entry_point, ipaddress: "255.255.255.255", payment_details: { service_fee: 0.0, total_amount: 100.0 }, payment_method: { cardcvv: "999", cardexp: "02/27", card_holder: "Kassiane Cassian", cardnumber: "4111111111111111", cardzip: "12345", initiator: "payor", method: "card" } } result = client.money_in.getpaid(**request_params) puts result.to_h ```

Run the app with the following command: ```bash ruby main.rb ``` Check the console output for the result of the transaction. A successful transaction returns output like this: ```txt { "responseText" => "Success", "isSuccess" => true, "responseData" => { "authCode" => "TAS003", "referenceId" => "255-67bc92c141e24f474f60c1968fcba0cd", "resultCode" => 1, "resultText" => "Approved", "avsResponseText" => "No Match, No address or ZIP match", "cvvResponseText" => "CVV2/CVC2 match", "customerId" => 4440, } } ``` In production, we recommend that you pass a stored method ID to the `payment_method` object instead of card details. See more information in [Tokenization Overview](/guides/platform-tokenization-overview). ## SDK example app The SDK example app is a basic web app built with the Payabli Ruby SDK. It demonstrates how to manage customers and use the temporary token flow with the SDK. The code is publicly available in the [example repository](https://github.com/payabli/examples/tree/main/sdk/ruby-sdk). customer creation page of SDK example app

/// Import the SDK Import the Payabli SDK to make it available in your code. ```rust // src/main.rs use payabli_api::prelude::*; ``` /// Define constants Define your API key and entrypoint as constants. Get these values from your Payabli account. ```rust focus=3-5 // src/main.rs use payabli_api::prelude::*; const API_KEY: &str = "REPLACE_WITH_YOUR_API_KEY"; const ENTRY_POINT: &str = "REPLACE_WITH_YOUR_ENTRYPOINT"; ``` /// Set up the async runtime Create the main async function using the `tokio` runtime. ```rust focus=7-8 // src/main.rs use payabli_api::prelude::*; const API_KEY: &str = "REPLACE_WITH_YOUR_API_KEY"; const ENTRY_POINT: &str = "REPLACE_WITH_YOUR_ENTRYPOINT"; #[tokio::main] async fn main() {} ``` /// Initialize the client Create an authenticated client instance with your API key. This client has methods that call Payabli's API endpoints. ```rust focus=9-14 // src/main.rs use payabli_api::prelude::*; const API_KEY: &str = "REPLACE_WITH_YOUR_API_KEY"; const ENTRY_POINT: &str = "REPLACE_WITH_YOUR_ENTRYPOINT"; #[tokio::main] async fn main() { let config = ClientConfig { api_key: Some(API_KEY.to_string()), ..Default::default() }; let client = ApiClient::new(config).expect("Failed to build client"); } ``` /// Build the payment request Construct a request object that contains all the necessary fields to process a transaction. Include payment details, a payment method, and customer data. ```rust focus=16-79 // src/main.rs use payabli_api::prelude::*; const API_KEY: &str = "REPLACE_WITH_YOUR_API_KEY"; const ENTRY_POINT: &str = "REPLACE_WITH_YOUR_ENTRYPOINT"; #[tokio::main] async fn main() { let config = ClientConfig { api_key: Some(API_KEY.to_string()), ..Default::default() }; let client = ApiClient::new(config).expect("Failed to build client"); let result = client .money_in .getpaid( &GetpaidRequest { body: TransRequestBody { account_id: None, customer_data: Some(PayorDataRequest { additional_data: None, billing_address_1: None, billing_address_2: None, billing_city: None, billing_country: None, billing_email: None, billing_phone: None, billing_state: None, billing_zip: None, company: None, customer_id: Some(CustomerId(4440)), customer_number: None, first_name: None, identifier_fields: None, last_name: None, shipping_address_1: None, shipping_address_2: None, shipping_city: None, shipping_country: None, shipping_state: None, shipping_zip: None, }), entry_point: Some(Entrypointfield(ENTRY_POINT.to_string())), invoice_data: None, ipaddress: Some(IpAddress("255.255.255.255".to_string())), order_description: None, order_id: None, payment_details: PaymentDetail { categories: None, check_image: None, check_number: None, currency: None, service_fee: Some(0.0), split_funding: None, total_amount: 100.0, }, payment_method: PaymentMethod::PayMethodCredit(PayMethodCredit { cardcvv: Some(Cardcvv("999".to_string())), cardexp: Cardexp("02/27".to_string()), card_holder: Some(Cardholder("John Cassian".to_string())), cardnumber: Cardnumber("4111111111111111".to_string()), cardzip: Some(Cardzip("12345".to_string())), initiator: Some(Initiator("payor".to_string())), method: "card".to_string(), save_if_success: None, }), source: None, subdomain: None, subscription_id: None, }, ach_validation: None, force_customer_creation: None, include_details: None, }, None, ) .await; } ``` /// Show the result Log the transaction response. Check the output to see if the transaction was successful. ```rust focus=81 // src/main.rs use payabli_api::prelude::*; const API_KEY: &str = "REPLACE_WITH_YOUR_API_KEY"; const ENTRY_POINT: &str = "REPLACE_WITH_YOUR_ENTRYPOINT"; #[tokio::main] async fn main() { let config = ClientConfig { api_key: Some(API_KEY.to_string()), ..Default::default() }; let client = ApiClient::new(config).expect("Failed to build client"); let result = client .money_in .getpaid( &GetpaidRequest { body: TransRequestBody { account_id: None, customer_data: Some(PayorDataRequest { additional_data: None, billing_address_1: None, billing_address_2: None, billing_city: None, billing_country: None, billing_email: None, billing_phone: None, billing_state: None, billing_zip: None, company: None, customer_id: Some(CustomerId(4440)), customer_number: None, first_name: None, identifier_fields: None, last_name: None, shipping_address_1: None, shipping_address_2: None, shipping_city: None, shipping_country: None, shipping_state: None, shipping_zip: None, }), entry_point: Some(Entrypointfield(ENTRY_POINT.to_string())), invoice_data: None, ipaddress: Some(IpAddress("255.255.255.255".to_string())), order_description: None, order_id: None, payment_details: PaymentDetail { categories: None, check_image: None, check_number: None, currency: None, service_fee: Some(0.0), split_funding: None, total_amount: 100.0, }, payment_method: PaymentMethod::PayMethodCredit(PayMethodCredit { cardcvv: Some(Cardcvv("999".to_string())), cardexp: Cardexp("02/27".to_string()), card_holder: Some(Cardholder("John Cassian".to_string())), cardnumber: Cardnumber("4111111111111111".to_string()), cardzip: Some(Cardzip("12345".to_string())), initiator: Some(Initiator("payor".to_string())), method: "card".to_string(), save_if_success: None, }), source: None, subdomain: None, subscription_id: None, }, ach_validation: None, force_customer_creation: None, include_details: None, }, None, ) .await; println!("{:?}", result); } ```

Run the app with the following command: ```bash cargo run ``` Check the console output for the result of the transaction. A successful transaction returns output like this: ```rust Ok( PayabliApiResponseGetPaid { response_text: ResponseText("Success"), is_success: IsSuccess(true), page_identifier: None, response_data: GetPaidResponseData { auth_code: Some(Authcode("TAS660")), transaction_details: None, reference_id: Referenceidtrans("255-2ea956014a6d42e9a3353d35d1cc2dae"), result_code: ResultCode(1), result_text: Resulttext("Approved"), avs_response_text: AvsResponseText("No Match, No address or ZIP match"), cvv_response_text: CvvResponseText("CVV2/CVC2 match"), customer_id: Customeridtrans(4440), method_reference_id: None } } ) ``` In production, we recommend that you pass a stored method ID to the `payment_method` object instead of card details. See more information in [Tokenization Overview](/guides/platform-tokenization-overview). ## SDK example app The SDK example app is a basic web app built with the Payabli Rust SDK. It demonstrates how to manage customers and use the temporary token flow with the SDK. The code is publicly available in the [example repository](https://github.com/payabli/examples/tree/main/sdk/rust-sdk). customer creation page of SDK example app

### Set up the app Follow these steps to set up the SDK example app on your local machine: Open your terminal and run the following command to clone the SDK example app repository: ```bash git clone https://github.com/payabli/examples ``` In your terminal, navigate to the directory containing the SDK example app: ```bash cd examples/sdk/rust-sdk ``` Install the project dependencies with Cargo: ```bash cargo build ``` Copy the `.env.template` file to a new file called `.env`: ```bash cp .env.template .env ``` Open the `.env` file in your code editor. Set `PAYABLI_KEY` to a private API token, `PAYABLI_ENTRY` to your Payabli entrypoint, and `PAYABLI_PUBLIC_TOKEN` to a public API token: ```bash # your Payabli Private API token PAYABLI_KEY="o.Oim...Mekgjw=" # your Payabli entrypoint PAYABLI_ENTRY="41xxxxxa7e" # your Payabli Public API token PAYABLI_PUBLIC_TOKEN="o.Oim...Mekgjw=" ``` Run this command to start the development server, and open the app in your browser: ```bash cargo run ``` ### Use the app The SDK example app has three pages: 1. **Create Customer** - Create a new customer in the Payabli entrypoint. 2. **List Customers** - View a list of all customers in the Payabli entrypoint. 3. **Make Transaction** - Make a transaction using the temporary token flow. #### Create customer The **Create Customer** page has a form that allows you to create a new customer. Fill in the form with the customer's information and click the "Create" button. If the customer is created successfully, a green success message appears below the button. #### List customers The **List Customers** page has a table of all customers in the entrypoint. You can view the customer's information, including their name, email address, and ZIP Code. Click the "X" button on the right side of a customer's row to delete the customer. If the customer is deleted successfully, the row is removed from the table. #### Make transaction The **Make Transaction** page contains an EmbeddedMethod UI component using the temporary token flow. Fill in the form with payment information and click the "Process" button when the payment information is valid. The app performs these steps: 1. The embedded component saves the payment method as a temporary token and sends it to the server. 2. The server converts the temporary token to a permanent token with the **POST TokenStorage/add** endpoint. 3. The server uses the permanent token to make a transaction with the **POST MoneyIn/getpaid** endpoint. If everything is successful, a green success message appears below the embedded component. See [Extend embedded components with the temporary token flow](/guides/platform-developer-tokenization-temp-flow) for more information. *** title: Postman collection subtitle: Download a Payabli Postman collection to get testing fast description: >- Fork the official Payabli Postman collection to test API endpoints, explore request and response formats, and speed up your embedded payments API integration 'og:description': >- Fork the official Payabli Postman collection to test API endpoints, explore request and response formats, and speed up your embedded payments API integration keywords: >- embedded payments, Postman collection, API testing, payment API, developer tools, API exploration, REST API slug: developers/platform-postman-collection icon: rocket-launch area: * Developer Tools audience: * developers hide-nav-links: true *** {/* vale Payabli.We = NO */} View and fork our Postman Collections from the [Official Payabli API Workspace](https://www.postman.com/payabli-docs/payabli-api-workspace/overview) Collections are automatically regenerated when we update the API docs. Due to technical limitations, when updates occur, the entire collection is replaced rather than incrementally updated. This means: * When the API specification changes, we generate a new collection * Existing collections are fully replaced with the updated versions * You may need to re-import collections after updates We recommend that you save any important custom modifications separately, check for collection updates, and review the [Payabli API changelog](/changelog/api-changelog) when collections are updated. *** title: Use the Payabli MCP server subtitle: Learn how to use the Payabli MCP server to integrate with AI workflows description: >- Connect your AI agents and LLMs to Payabli documentation and SDK references with the MCP server. Streamline your development workflow with AI-powered assistance 'og:description': >- Connect your AI agents and LLMs to Payabli documentation and SDK references with the MCP server. Streamline your development workflow with AI-powered assistance keywords: >- embedded payments, MCP server, AI integration, developer tools, model context protocol, payment API, AI agents slug: developers/platform-developer-mcp icon: microchip-ai area: * Developer Tools audience: * developers *** The Payabli MCP (Model Context Protocol) server connects your AI agents to Payabli's documentation and SDK references. Set up the Payabli MCP server in your IDE or AI chat to get help with your Payabli integration. For more information about the Model Context Protocol, visit the [MCP docs](https://modelcontextprotocol.io/introduction). If your AI agent supports MCP, you can set up the Payabli MCP Server to give your AI agent knowledge about Payabli's APIs and SDK. The Payabli MCP server lets you: * Get instant answers to questions about Payabli APIs, features, and implementation * Search documentation without leaving your development environment * Find code examples and best practices for common use cases * Troubleshoot issues with guidance from our documentation and SDK references * Write code that integrates your application with Payabli ## Installation To configure the Payabli MCP server, select your IDE or AI chat provider and follow the instructions. 1. Open **Cursor** and open the `.cursor` directory in your project root. If it doesn't exist, create it. This directory contains Cursor's configuration files for your project. 2. Open the `mcp.json` file in the `.cursor` directory. If it doesn't exist, create it. This file contains all MCP server configurations for your project. 3. Add the following configuration to your `mcp.json` file: ```json mcp.json { "mcpServers": { "inkeepMcp": { "url": "https://mcp.inkeep.com/payabli/mcp" } } } ``` 4. Save the configuration file. 5. Restart Cursor. Windsurf uses `npm` to access the Payabli MCP server. You must have **Node.js** installed on your system. See [Node.js installation instructions](https://nodejs.org/en/download/) for more information. 1. Open **Windsurf**. 2. Navigate to the *Cascade assistant* sidebar. 3. Click the **hammer (MCP)** icon to access MCP settings. 4. Click **Configure > View raw config**. 5. Open the configuration file `~/.codeium/windsurf/mcp_config.json`. This file contains Windsurf's global configuration for MCP servers. 6. Add the following configuration to your `mcp_config.json` file: ```json mcp_config.json { "mcpServers": { "payabli": { "server_url": "https://mcp.inkeep.com/payabli/mcp", } } } ``` 7. Save the configuration file. 8. Click the **Refresh** button in the *Cascade sidebar* next to "available MCP servers". Claude Desktop uses `npm` to access the Payabli MCP server. You must have **Node.js** installed on your system. See [Node.js installation instructions](https://nodejs.org/en/download/) for more information. 1. Open **Claude Desktop**. 2. Navigate to **File > Settings** on Windows or **Settings** on MacOS. 3. Navigate to the **Developer** tab. 4. Click **Edit Config**. 5. Open the configuration file `claude_desktop_config.json`. This file manages all MCP servers for Claude Desktop. 6. Add the following configuration to your `claude_desktop_config.json` file: ```json claude_desktop_config.json { "mcpServers": { "payabli": { "command": "npx", "args": ["-y", "mcp-remote", "https://mcp.inkeep.com/payabli/mcp"] } } } ``` 7. Save the configuration file. 8. Restart Claude Desktop. Claude Desktop's remote MCP functionality is currently in beta. ### Enterprise and team plans 1. Open **Claude Desktop**. 2. Navigate to **Admin settings > Connectors**. 3. Navigate to the bottom of the section. 4. Click **Add custom connector**. 5. Fill in the fields as follows: * **Name**: Payabli MCP * **Remote MCP server URL**: `https://mcp.inkeep.com/payabli/mcp` 6. Click the **Add** button. ### Pro and max plans 1. Open **Claude Desktop**. 2. Navigate to **Settings > Connectors**. 3. Navigate to the bottom of the section. 4. Click **Add custom connector**. 5. Fill in the fields as follows: * **Name**: Payabli MCP * **Remote MCP server URL**: `https://mcp.inkeep.com/payabli/mcp` 6. Click the **Add** button. ## Usage The Payabli MCP provides the following tools: * **`search-payabli-docs`** - Searches Payabli's official documentation * **`ask-question-about-payabli`** - Searches Payabli's SDK GitHub repository and other resources outside of the documentation Your AI agent automatically selects the appropriate tool based on your question. *** title: Payabli example apps subtitle: Check out example apps to help you get started with Payabli description: >- Explore ready-to-run example apps that demonstrate Payabli payment integrations. Get started faster with working code for common embedded payment use cases 'og:description': >- Explore ready-to-run example apps that demonstrate Payabli payment integrations. Get started faster with working code for common embedded payment use cases keywords: >- embedded payments, example apps, sample code, payment integration, developer tools, quickstart, payment processing slug: developers/platform-example-apps icon: users area: * Pay In * Pay Out * Pay Ops audience: * developers *** This page contains example applications that show how to use Payabli's APIs and embedded components. All examples are open source and available on the `payabli/examples` GitHub repository. Visit the [GitHub repository](https://github.com/payabli/examples) to explore the code. * [Boarding](https://github.com/payabli/examples/tree/main/boarding) — An example app that uses Payabli's boarding APIs in a custom UI. The app is built with shadcn/ui and React. See [API boarding quickstart](/guides/pay-ops-developer-boarding-quickstart) for more information. * [Temp token flow](https://github.com/payabli/examples/tree/main/temp-token) — An example app that demonstrates how to use Payabli's temporary token flow with embedded components. The app has an interactive sidebar that explains the lifecycle of transactions. See [Temporary token example app](/guides/platform-tokenization-temp-token-app) for more information. * [Server SDKs](https://github.com/payabli/examples/tree/main/sdk) — An example app built with Payabli's official server SDKs. The application demonstrates how to use the SDK to interact with Payabli's APIs. See [SDKs](/developers/platform-developer-tools-overview#sdks) for more information. * [React](https://github.com/payabli/examples/tree/main/react-integration) — An example app using Payabli's embedded components in React. See [Framework integrations](/guides/pay-in-developer-components-frameworks#react) for more information. * [Vue](https://github.com/payabli/examples/tree/main/vue-integration) — An example app using Payabli's embedded components in Vue. See [Framework integrations](/guides/pay-in-developer-components-frameworks#vue) for more information.

Payment Form

Payment Form

Payment Form

Payment Form

Payment Form

Payment Form

Payment Form

Payment Form

Payment Form

Payment Form

Payment Form

Payment Form

Payment Form

Payment Form

Payment Form

Payment Form

Virtual Terminal

Virtual Terminal

Virtual Terminal

Virtual Terminal

Express Checkout

Express Checkout

Express Checkout

Express Checkout

Pay your order

Diagram: Temporary Token Flow Process