# Payment Plugins
# Amazon Pay
hubble comes with a fully JS based solution for payment via amazon pay. You can choose weather you want to use the Amazon Express Integration (which is a good solution if you dont have to calculate shipping costs), or use the API-based transaction management (good to keep the customer on your page while checkout).
# How it works
Amazon Express Integration:
- Customer clicks on the amazon pay button on cart page.
- Customer is promted to login to his/her amazon account.
- Order will be placed via amazon.
- The order will not be send to shop system and only belongs in your amazon merchant account.
API-based transaction management:
- Customer clicks on the amazon pay button on cart page.
- Customer is promted to login to his/her amazon account.
- Customer will be redirected to the checkout amazon page pages/checkout/amazon.vue
- On checkout/amazon the amazon pay widgets will be initialized.
- The cart and the shipping costs will be recalculated depending the default address of the customer.
- Customer can change a shipping address and payment method. Each time this happens the cart and totals will be recalculated.
- Customer placed the order. Now several api calls to amazon happen before the order is placed to the shop system:
- SetOrderReferenceDetails
- ConfirmOrderReference
- Authorize
- GetOrderReferenceDetails
- All important order data will be collected and validated to finally be placed to shop system via api call.
# Configuration
Setup the payone credentials in .env file.
# Amazon Payment
AMAZON_PAY_SANDBOX = 'true'
AMAZON_PAY_MERCHANT_ID = 'ABCD123456'
AMAZON_PAY_ACCESS_KEY = 'ABCD123456'
AMAZON_PAY_SECRET_KEY = 'asiduasd988z43nkjsndf'
AMAZON_PAY_CURRENCY = 'USD'
LOGIN_WITH_AMAZON_CLIENT_ID = 'amzn1.application-oa2-client.asdoudfb239834ndfijn'
# Amazon Payment Modes:
# express_custom_integration: Adjust the payment amount for simple tax and shipping options
# api_integration: Maintain complete control of the checkout experience on your site
AMAZON_PAY_MODE = 'api_integration'
# Add http:// or https:// before your Return URL
AMAZON_PAY_RETURN_URL = 'http://localhost:3336/checkout/cart'
AMAZON_PAY_CANCEL_RETURN_URL = 'http://localhost:3336/checkout/error'
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Payone
hubble comes with a fully JS based solution for payment via payone and its supported payment methods. Here is used the channel client api in AJAX Mode (opens new window).
# How it works
User chooses a payment method in checkout components/checkout/PaymentMethods.vue
The chosen method will conditionally render its linked payment component @hubblecommerce/payone/components/lib/PayoneChannel.vue.
The customer places the order. This changes the 'setBeforePlaceOrder' state.
Payment Component is been triggered e.g. @hubblecommerce/payone/components/lib/PayoneChannelAjaxVor.vue.
This component aggregates the required data, calculate a hash based on the PAYONE_KEY defined in .env and makes the api call to payone api.
Payone calls the callback function processPayoneResponse in @hubblecommerce/payone/plugins/lib/payone-response.js.
An order is placed via api call to the shop system if the response of payone is successful
A response of type 'REDIRECT' will be redirected to the url.
A response of type 'APPROVED' redirects the customer to the checkout success page.
# Configuration
Setup the payone credentials in .env file.
# Payone Integration
# live or test
PAYONE_MODE = 'test'
PAYONE_MID = '20000'
PAYONE_AID = '20001'
PAYONE_PORTALID = '2000000'
PAYONE_KEY = '123xyz'
2
3
4
5
6
7
← Payment API Analytics →