Skip to content

Commit 516bd28

Browse files
jakubjasinskyjakubjasinsky
authored
feat: dc - delete saved methods, widget api, logos fix (#161)
1 parent 980d432 commit 516bd28

35 files changed

+1133
-409
lines changed

‎examples/dynamic-checkout/index.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,17 @@
1111
document.addEventListener("DOMContentLoaded", function () {
1212
// You need to replace these values with your own
1313
const projectId = "test-proj_qEi1u5BwoYcZb6mOMKDWIm4mpqKCq6bN"
14-
const invoiceId = "iv_cJXSDBgjJFcFBtzLJWcDoQ3ZcEqaJCEU"
15-
const clientSecret = "client-secret"
14+
const invoiceId = "iv_fbzOpNMPAuIQjy1mGVjJG7htCw7mNYkY"
15+
const clientSecret = ""
1616

1717
const client = new ProcessOut.ProcessOut(projectId)
1818

1919
const dynamicCheckout = client.setupDynamicCheckout({
2020
invoiceId,
21-
projectId,
2221
clientSecret,
22+
capturePayments: false,
23+
allowFallbackToSale: false,
24+
locale: "en",
2325
})
2426

2527
dynamicCheckout.mount("#dynamic-cko-container")

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "processout.js",
3-
"version": "1.0.3",
3+
"version": "1.0.4",
44
"description": "ProcessOut.js is a JavaScript library for ProcessOut's payment processing API.",
55
"scripts": {
66
"build:processout": "tsc -p src/processout && uglifyjs --compress --keep-fnames --ie8 dist/processout.js -o dist/processout.js",

‎src/dynamic-checkout/clients/apple-pay.ts‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,35 +16,31 @@ module ProcessOut {
1616
getViewContainer: () => HTMLElement,
1717
) {
1818
const applePayScript = document.createElement("script")
19-
const initializeApplePay = this.initializeApplePay.bind(this)
20-
2119
applePayScript.src = applePaySdkUrl
2220
applePayScript.onload = () => {
2321
buttonContainer.innerHTML = `<apple-pay-button buttonstyle="black" type="plain" locale="en-US"></apple-pay-button>`
24-
initializeApplePay(invoiceData, buttonContainer, getViewContainer)
22+
this.initializeApplePay(invoiceData, buttonContainer, getViewContainer)
2523
}
2624

2725
document.head.appendChild(applePayScript)
2826
}
2927

3028
private initializeApplePay(
3129
invoiceData: Invoice,
32-
buttonContainer: HTMLDivElement,
30+
buttonContainer: HTMLElement,
3331
getViewContainer: () => HTMLElement,
3432
) {
35-
const tokenizeApplePay = this.tokenizeApplePay.bind(this)
36-
3733
const applePayPaymentMethodData = this.getApplePayPaymentMethodData(invoiceData)
3834

3935
this.processOutInstance.applePay.checkAvailability(
40-
function (err) {
36+
err => {
4137
if (err) {
4238
console.log(err)
4339
} else {
4440
buttonContainer.classList.add("visible")
4541

4642
document.querySelector("apple-pay-button").addEventListener("click", () => {
47-
tokenizeApplePay(invoiceData, getViewContainer)
43+
this.tokenizeApplePay(invoiceData, getViewContainer)
4844
})
4945
}
5046
},
@@ -53,10 +49,9 @@ module ProcessOut {
5349
}
5450

5551
private getSupportedNetworks(invoiceData: Invoice) {
56-
let supportedNetworks = []
57-
5852
const applePayPaymentMethodData = this.getApplePayPaymentMethodData(invoiceData)
5953

54+
let supportedNetworks = []
6055
applePayPaymentMethodData.supported_networks.forEach(network => {
6156
if (networksMap[network]) {
6257
supportedNetworks.push(networksMap[network])
@@ -67,9 +62,8 @@ module ProcessOut {
6762
}
6863

6964
private createApplePaySession(invoiceData: Invoice) {
70-
const supportedNetworks = this.getSupportedNetworks(invoiceData)
71-
7265
const applePayPaymentMethodData = this.getApplePayPaymentMethodData(invoiceData)
66+
const supportedNetworks = this.getSupportedNetworks(invoiceData)
7367

7468
const session = this.processOutInstance.applePay.newSession(
7569
{
@@ -96,7 +90,6 @@ module ProcessOut {
9690

9791
private tokenizeApplePay(invoiceData: Invoice, getViewContainer: () => HTMLElement) {
9892
const session = this.createApplePaySession(invoiceData)
99-
const makeApplePayPayment = this.makeApplePayPayment.bind(this)
10093

10194
this.processOutInstance.tokenize(
10295
session,
@@ -110,13 +103,11 @@ module ProcessOut {
110103
// You can check the implementation of tokenize function
111104
const cardToken = (card as unknown as Record<string, any>).id
112105

113-
makeApplePayPayment(cardToken, invoiceData, getViewContainer)
106+
this.makeApplePayPayment(cardToken, invoiceData, getViewContainer)
114107
},
115-
err => {
108+
() => {
116109
session.completePayment(1)
117110

118-
DynamicCheckoutEventsUtils.dispatchTokenizePaymentErrorEvent(err)
119-
120111
getViewContainer().appendChild(
121112
new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig)
122113
.element,
@@ -142,6 +133,7 @@ module ProcessOut {
142133
new DynamicCheckoutPaymentSuccessView(this.processOutInstance, this.paymentConfig)
143134
.element,
144135
)
136+
145137
DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({
146138
invoiceId,
147139
returnUrl: this.paymentConfig.invoiceDetails.return_url,
@@ -152,6 +144,7 @@ module ProcessOut {
152144
new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig)
153145
.element,
154146
)
147+
155148
DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error)
156149
},
157150
)

‎src/dynamic-checkout/clients/google-pay.ts‎

Lines changed: 51 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,58 @@
11
/// <reference path="../references.ts" />
22

33
module ProcessOut {
4-
export class GooglePayClient {
5-
googleClient: any
6-
processOutInstance: ProcessOut
7-
paymentConfig: DynamicCheckoutPaymentConfig
8-
isReadyToPayRequest: {
9-
apiVersion: number
10-
apiVersionMinor: number
11-
allowedPaymentMethods: {
4+
interface IsReadyToPayRequest {
5+
apiVersion: number
6+
apiVersionMinor: number
7+
allowedPaymentMethods: {
8+
type: string
9+
parameters: {
10+
allowedAuthMethods: string[]
11+
allowedCardNetworks: string[]
12+
}
13+
tokenizationSpecification: {
1214
type: string
1315
parameters: {
14-
allowedAuthMethods: string[]
15-
allowedCardNetworks: string[]
16-
}
17-
tokenizationSpecification: {
18-
type: string
19-
parameters: {
20-
gateway: string
21-
gatewayMerchantId: string
22-
}
16+
gateway: string
17+
gatewayMerchantId: string
2318
}
24-
}[]
25-
}
19+
}
20+
}[]
21+
}
2622

27-
paymentRequest: {
28-
apiVersion: number
29-
apiVersionMinor: number
30-
allowedPaymentMethods: {
23+
interface PaymentRequest {
24+
apiVersion: number
25+
apiVersionMinor: number
26+
allowedPaymentMethods: {
27+
type: string
28+
parameters: {
29+
allowedAuthMethods: string[]
30+
allowedCardNetworks: string[]
31+
}
32+
tokenizationSpecification: {
3133
type: string
3234
parameters: {
33-
allowedAuthMethods: string[]
34-
allowedCardNetworks: string[]
35-
}
36-
tokenizationSpecification: {
37-
type: string
38-
parameters: {
39-
gateway: string
40-
gatewayMerchantId: string
41-
}
35+
gateway: string
36+
gatewayMerchantId: string
4237
}
43-
}[]
44-
transactionInfo: {
45-
totalPriceStatus: string
46-
totalPrice: string
47-
currencyCode: string
48-
}
49-
merchantInfo: {
50-
merchantName: string
5138
}
39+
}[]
40+
transactionInfo: {
41+
totalPriceStatus: string
42+
totalPrice: string
43+
currencyCode: string
44+
}
45+
merchantInfo: {
46+
merchantName: string
47+
merchantId: string
5248
}
49+
}
50+
export class GooglePayClient {
51+
googleClient: any
52+
processOutInstance: ProcessOut
53+
paymentConfig: DynamicCheckoutPaymentConfig
54+
isReadyToPayRequest: IsReadyToPayRequest
55+
paymentRequest: PaymentRequest
5356

5457
constructor(processOutInstance: ProcessOut, paymentConfig: DynamicCheckoutPaymentConfig) {
5558
this.processOutInstance = processOutInstance
@@ -62,7 +65,6 @@ module ProcessOut {
6265
getViewContainer: () => HTMLElement,
6366
) {
6467
const googleClientScript = document.createElement("script")
65-
6668
googleClientScript.src = googlePaySdkUrl
6769
googleClientScript.onload = () => {
6870
this.googleClient =
@@ -113,15 +115,13 @@ module ProcessOut {
113115
JSON.parse(paymentData.paymentMethodData.tokenizationData.token),
114116
)
115117

116-
const processOutInstance = this.processOutInstance
117-
118-
processOutInstance.tokenize(
118+
this.processOutInstance.tokenize(
119119
paymentToken,
120120
{},
121121
token => {
122122
DynamicCheckoutEventsUtils.dispatchTokenizePaymentSuccessEvent(token)
123123

124-
processOutInstance.makeCardPayment(
124+
this.processOutInstance.makeCardPayment(
125125
invoiceData.id,
126126
token,
127127
{
@@ -135,6 +135,7 @@ module ProcessOut {
135135
this.paymentConfig,
136136
).element,
137137
)
138+
138139
DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({
139140
invoiceId,
140141
returnUrl: this.paymentConfig.invoiceDetails.return_url,
@@ -145,17 +146,19 @@ module ProcessOut {
145146
new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig)
146147
.element,
147148
)
149+
148150
DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error)
149151
},
150152
)
151153
},
152-
err => {
154+
error => {
153155
getViewContainer().appendChild(
154156
new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig)
155157
.element,
156158
)
159+
157160
DynamicCheckoutEventsUtils.dispatchTokenizePaymentErrorEvent({
158-
message: `Tokenize payment error: ${JSON.stringify(err, undefined, 2)}`,
161+
message: `Tokenize payment error: ${JSON.stringify(error, undefined, 2)}`,
159162
})
160163
},
161164
)
@@ -225,6 +228,7 @@ module ProcessOut {
225228
},
226229
merchantInfo: {
227230
merchantName: invoiceData.name,
231+
merchantId: googlePayMethod.googlepay.gateway_merchant_id,
228232
},
229233
}
230234
}

‎src/dynamic-checkout/config/assets.ts‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,17 @@ module ProcessOut {
44
mastercard: "/images/schemes/rectangle/mastercard.svg",
55
amex: "/images/schemes/rectangle/americanexpress.svg",
66
unionpay: "/images/schemes/rectangle/unionpay.svg",
7-
};
7+
}
88

9-
export const PAYMENT_SUCCESS_IMAGE_ASSET =
10-
"/images/dynamic-checkout-assets/payment-success.svg";
9+
export const PAYMENT_SUCCESS_IMAGE_ASSET = "/images/dynamic-checkout-assets/payment-success.svg"
1110

12-
export const PAYMENT_ERROR_IMAGE_ASSET =
13-
"/images/dynamic-checkout-assets/payment-error.svg";
11+
export const PAYMENT_ERROR_IMAGE_ASSET = "/images/dynamic-checkout-assets/payment-error.svg"
12+
13+
export const COG_ICON = "/images/dynamic-checkout-assets/cog-icon.svg"
14+
15+
export const TRASH_ICON = "/images/dynamic-checkout-assets/trash-icon.svg"
16+
17+
export const CREDIT_CARD_ICON = "/images/dynamic-checkout-assets/credit-card.svg"
18+
19+
export const REDIRECT_ARROW_ICON = "/images/dynamic-checkout-assets/apm-redirect-arrow.svg"
1420
}

‎src/dynamic-checkout/config/billing-address.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module ProcessOut {
2-
export const billingAddressUnitsData = (paymentConfig: DynamicCheckoutPublicConfig) => {
2+
export const billingAddressUnitsData = (paymentConfig: DynamicCheckoutPaymentConfig) => {
33
return {
44
street1: {
55
unit: "street1",

‎src/dynamic-checkout/config/card-networks-map.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,5 @@ module ProcessOut {
2222
"private label": "privateLabel",
2323
visa: "visa",
2424
vpay: "vpay",
25-
};
25+
}
2626
}

‎src/dynamic-checkout/config/external-libraries.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
module ProcessOut {
2-
export const applePaySdkUrl =
3-
"https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js";
4-
5-
export const googlePaySdkUrl = "https://pay.google.com/gp/p/js/pay.js";
2+
export const applePaySdkUrl = "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"
3+
export const googlePaySdkUrl = "https://pay.google.com/gp/p/js/pay.js"
4+
export const tingleLibrary = "/js/libraries/tingle.min.js"
65
}

0 commit comments

Comments
 (0)